fix(mobile): status bar content are misaligned

Muhammed-Rahif · Dec 1, 2024 · 576e5b7 · 576e5b7
1 parent 0e63c24
commit 576e5b7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 21 deletions.
diff --git a/src/app.json b/src/app.json
@@ -1,3 +1,3 @@
 {
   "version": "1.0.0-3"
-}
+}
diff --git a/src/lib/components/StatusBar.svelte b/src/lib/components/StatusBar.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Separator from '@/components/ui/separator/separator.svelte';
   import { settings } from '@/store/store';
   import { slide } from 'svelte/transition';
 
@@ -15,18 +14,17 @@
 
 {#if $settings.statusBar}
   <div
-    class="sticky bottom-0 z-10 h-[30px] w-full
-    bg-primary-foreground px-2"
+    class="sticky bottom-0 z-10 h-[30px] w-screen bg-primary-foreground"
     transition:slide
     on:contextmenu|stopPropagation|preventDefault
     role="contentinfo"
   >
-    <Separator />
     <p
-      class="flex h-full w-full items-center justify-start
-  divide-x-2 text-sm [&>span]:px-4 first:[&>span]:pl-0 last:[&>span]:pr-0"
+      class="flex h-full w-full items-center justify-start divide-x-2
+      overflow-x-auto px-2 text-sm [&>span]:px-4 first:[&>span]:pl-0
+      last:[&>span]:pr-0"
     >
-      <span class="flex items-center justify-center">
+      <span class="inline-flex items-center justify-center whitespace-nowrap">
         Line:
         {#key caretLineNo}
           <span in:slide={inAnimation} class="ml-1 inline-block">

diff --git a/src/lib/components/font-dialog/FontDialog.svelte b/src/lib/components/font-dialog/FontDialog.svelte
@@ -47,19 +47,21 @@
       </Dialog.Description>
     </Dialog.Header>
 
-    <div class="flex gap-3 max-[464px]:flex-col">
-      <FontFamilyCombobox bind:value={fontFamily} />
-      <FontSizeCombobox bind:value={fontSize} />
-    </div>
+    <div class="flex max-h-[50vh] w-full flex-col gap-6 overflow-y-auto pb-1 pr-3">
+      <div class="flex gap-3 max-[464px]:flex-col">
+        <FontFamilyCombobox bind:value={fontFamily} />
+        <FontSizeCombobox bind:value={fontSize} />
+      </div>
 
-    <Card.Root id="sample-font" class="relative">
-      <Label for="sample-font" class="absolute left-3 top-0 -translate-y-1/2 bg-background px-2">
-        Sample
-      </Label>
-      <Card.Content>
-        <p style={`font-size: ${fontSize}px; font-family: ${fontFamily}`}>Card Content</p>
-      </Card.Content>
-    </Card.Root>
+      <Card.Root id="sample-font" class="relative w-full">
+        <Label for="sample-font" class="absolute left-3 top-0 -translate-y-1/2 bg-background px-2">
+          Sample
+        </Label>
+        <Card.Content class="break-words max-[420px]:max-w-xs">
+          <p style={`font-size: ${fontSize}px; font-family: ${fontFamily}`}>AaBbYyZz</p>
+        </Card.Content>
+      </Card.Root>
+    </div>
 
     <Dialog.Footer class="gap-2">
       <Button variant="ghost" class="mr-auto max-sm:w-full" on:click={resetFontDefault}>

diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -3,6 +3,7 @@
   import { Dialog as DialogPrimitive } from 'bits-ui';
   import { cn } from '@/utils.js';
   import Cross2 from 'svelte-radix/Cross2.svelte';
+  import Separator from '@/components/ui/separator/separator.svelte';
 
   type $$Props = HTMLAttributes<HTMLDivElement>;
 
@@ -24,5 +25,5 @@
     </DialogPrimitive.Close>
   </div>
 
-  <hr class="mt-3" />
+  <Separator class="mt-3" />
 </div>