fix(responsiveness): editor title overlapping if maxlength are met

Muhammed-Rahif · Dec 1, 2024 · e526055 · e526055
1 parent 55c397b
commit e526055
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/src/lib/components/DownloadButton.svelte → src/lib/components/DownloadMenuButton.svelte b/src/lib/components/DownloadButton.svelte → src/lib/components/DownloadMenuButton.svelte
diff --git a/src/lib/components/EditorTabs.svelte b/src/lib/components/EditorTabs.svelte
@@ -10,7 +10,7 @@
 
   let innerWidth = $state(window.innerWidth);
 
-  let isXS = $derived(innerWidth <= 450);
+  let isMD = $derived(innerWidth <= 768);
   /**
    * Compact mode is disabled on mobile devices (width <= 450px)
    * and on PCs when multiple editors are open.
@@ -21,7 +21,7 @@
 <svelte:window bind:innerWidth />
 
 <Tabs.Root bind:value={$activeTabId} class="flex h-full w-full flex-col overflow-hidden">
-  {#if tabsMode || isXS}
+  {#if tabsMode || isMD}
     <div transition:slide>
       <Tabs.List
         class="w-full justify-start gap-1 overflow-x-auto

diff --git a/src/lib/components/EditorTitle.svelte b/src/lib/components/EditorTitle.svelte
@@ -14,8 +14,8 @@
     editor: EditorType;
   }
 
+  const maxlength = 54;
   let { editor }: Props = $props();
-
   let readonly = $state(true);
   let input: HTMLInputElement = $state(null!);
 
@@ -30,7 +30,7 @@
   async function submit(e?: SubmitEvent) {
     e?.preventDefault();
     const t = input.value.trim();
-    const isValidFileName = t !== '' && t.length > 0 && t.length <= 24;
+    const isValidFileName = t !== '' && t.length > 0 && t.length <= maxlength;
 
     if (isValidFileName) {
       Notpad.editors.updateFileName(editor.id, t);
@@ -81,7 +81,7 @@
               'rounded bg-transparent focus-visible:outline focus-visible:outline-2 focus-visible:outline-secondary',
               editor.fileHandle && 'border-none border-transparent outline-none outline-transparent'
             )}
-            maxlength={54}
+            {maxlength}
             {readonly}
           />
         </form>

diff --git a/src/lib/components/MenuBar.svelte b/src/lib/components/MenuBar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import * as Menubar from '@/components/ui/menubar';
   import EditorTitle from '@/components/EditorTitle.svelte';
-  import DownloadButton from '@/components/DownloadButton.svelte';
+  import DownloadButtonMenu from '@/src/lib/components/DownloadButtonMenu.svelte';
   import { Notpad } from '@/helpers/notpad';
   import { editors, settings } from '@/store/store';
   import { fade } from 'svelte/transition';
@@ -21,7 +21,7 @@
   let innerWidth = $state(window.innerWidth);
   let isFullScreen = $state(screenfull.isFullscreen);
 
-  let isXS = $derived(innerWidth <= 450);
+  let isMD = $derived(innerWidth <= 768);
   let tabsMode = $derived($editors.length > 1);
   let singleEditor = $derived($editors.at(0)!);
 
@@ -165,17 +165,17 @@
     </Menubar.Content>
   </Menubar.Menu>
 
-  {#if !isTauri}
-    <DownloadButton />
-  {/if}
-
-  {#if !isXS && !tabsMode}
+  {#if !isMD && !tabsMode}
     <div
       transition:fade
-      class="max-md:!ml-auto md:absolute md:left-1/2
-      md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2"
+      class="!mx-auto lg:absolute lg:left-1/2 lg:top-1/2
+      lg:-translate-x-1/2 lg:-translate-y-1/2"
     >
       <EditorTitle editor={singleEditor} />
     </div>
   {/if}
+
+  {#if !isTauri}
+    <DownloadButtonMenu />
+  {/if}
 </Menubar.Root>