fix: fix settings not scrolling all the way

src/interface/components/TabbedContainer.svelte

@@ -38,8 +38,8 @@
   });
 </script>
 
-<div class="flex flex-col h-full">
+<div class="flex flex-col h-full min-h-0">
-  <div class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 px-2 tab-width-container" role="tablist">
+  <div class="top-0 z-10 shrink-0 text-[0.875rem] pb-0.5 mx-4 px-2 tab-width-container" role="tablist">
     <div bind:this={containerRef} class="flex relative">
       <MotionDiv
         class="absolute top-0 left-0 z-0 h-full bg-gradient-to-tr dark:from-[#38373D]/80 dark:to-[#38373D] from-[#DDDDDD]/80 to-[#DDDDDD] rounded-full opacity-40 tab-width"
@@ -58,14 +58,14 @@
       {/each}
     </div>
   </div>
-  <div class="overflow-hidden px-4 h-full">
+  <div class="overflow-hidden px-4 flex-1 min-h-0">
     {#each tabs as { Content, props }, index (index)}
       {#if activeTab === index}
         <div
           role="tabpanel"
-          class="focus:outline-none w-full pt-2 overflow-y-scroll no-scrollbar pb-2 h-full tab active"
+          class="focus:outline-none w-full h-full min-h-0 pt-2 overflow-y-auto no-scrollbar pb-6 tab active"
         >
-          <div class="fixed top-0 w-full h-8 bg-gradient-to-b to-transparent pointer-events-none z-[100] from-white dark:from-zinc-800 dark:to-transparent"></div>
+          <div class="sticky top-0 w-full h-8 bg-gradient-to-b to-transparent pointer-events-none z-[100] from-white dark:from-zinc-800 dark:to-transparent"></div>
           <Content {...props} />
         </div>
       {/if}

src/interface/pages/settings.svelte

@@ -144,10 +144,10 @@
     : ''} {standalone ? 'h-[600px]' : 'h-full rounded-xl'} overflow-clip"
 >
   <div
-    class="flex relative flex-col gap-2 h-full overflow-clip bg-white dark:bg-zinc-800 dark:text-white"
+    class="flex relative flex-col gap-2 h-full min-h-0 overflow-hidden bg-white dark:bg-zinc-800 dark:text-white"
   >
     <div
-      class="grid place-items-center border-b border-b-zinc-200/40 dark:border-b-zinc-700/40"
+      class="grid shrink-0 place-items-center border-b border-b-zinc-200/40 dark:border-b-zinc-700/40"
     >
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -354,18 +354,20 @@
       {/if}
     </div>
 
-    <TabbedContainer
+    <div class="flex-1 min-h-0 overflow-hidden">
-      bind:activeTab={settingsActiveTab}
+      <TabbedContainer
-      tabs={[
+        bind:activeTab={settingsActiveTab}
-        {
+        tabs={[
-          title: "Settings",
+          {
-          Content: Settings,
+            title: "Settings",
-          props: { showColourPicker: openColourPicker, showFontPicker: openFontPicker, showDisclaimer, showCloudPanel: openCloudPanel },
+            Content: Settings,
-        },
+            props: { showColourPicker: openColourPicker, showFontPicker: openFontPicker, showDisclaimer, showCloudPanel: openCloudPanel },
-        { title: "Shortcuts", Content: Shortcuts },
+          },
-        { title: "Themes", Content: Theme },
+          { title: "Shortcuts", Content: Shortcuts },
-      ]}
+          { title: "Themes", Content: Theme },
-    />
+        ]}
+      />
+    </div>
   </div>
 
   {#if showColourPicker && ColourPickerComponent}

vite.config.ts

@@ -60,6 +60,10 @@ const mode = process.env.MODE || "chrome"; // Check the environment variable to
 const useMillion = mode.toLowerCase() !== "firefox";
 
 export default defineConfig(({ command }) => ({
+  // Content scripts run on the host page; absolute `/assets/...` URLs would
+  // resolve against SEQTA instead of chrome-extension://. Relative base makes
+  // Vite emit import.meta.url-relative chunk/CSS URLs at runtime.
+  base: command === "build" ? "./" : "/",
   define: {
     __ENABLE_GH_RELEASE_UPDATE_CHECK__: JSON.stringify(
       process.env.GH_RELEASE_UPDATE_CHECK === "true",