Fix: Attempt to Fix Tab Boundaries

src/features/discover/components/Search.svelte

@@ -30,17 +30,10 @@
     if (!tabsEl) return;
     const active = tabsEl.querySelector<HTMLElement>(".tab.tabActive");
     if (!active) return;
-    const containerLeft = tabsEl.getBoundingClientRect().left;
+    tabIndicator = { left: active.offsetLeft, width: active.offsetWidth };
-    tabIndicator = {
-      left:  active.getBoundingClientRect().left - containerLeft,
-      width: active.offsetWidth,
-    };
   }
 
-  $effect(() => {
+  $effect(() => { tab; if (anims) requestAnimationFrame(() => requestAnimationFrame(updateIndicator)); });
-    tab; // reactive on tab change
-    if (anims) requestAnimationFrame(updateIndicator);
-  });
 
   const SEARCH_PAGES         = 3;
   const SEARCH_LIMIT         = 200;

src/features/extensions/components/Extensions.svelte

@@ -18,8 +18,7 @@
     if (!tabsEl) return;
     const active = tabsEl.querySelector<HTMLElement>(".tab.active");
     if (!active) return;
-    const containerLeft = tabsEl.getBoundingClientRect().left;
+    tabIndicator = { left: active.offsetLeft, width: active.offsetWidth };
-    tabIndicator = { left: active.getBoundingClientRect().left - containerLeft, width: active.offsetWidth };
   }
 
   let extensions: Extension[] = $state([]);
@@ -33,7 +32,7 @@
   let expanded     = $state(new Set<string>());
   let panel        = $state<Panel>(null);
 
-  $effect(() => { filter; if (anims) requestAnimationFrame(() => requestAnimationFrame(updateIndicator)); });
+  $effect(() => { filter; extensions; if (anims) requestAnimationFrame(() => requestAnimationFrame(updateIndicator)); });
 
   let externalUrl    = $state("");
   let installing     = $state(false);

src/features/library/components/Library.svelte

@@ -166,7 +166,7 @@
     if (!store.categories.some(c => c.id === id)) untrack(() => { store.libraryFilter = "library"; });
   });
   $effect(() => { tab; untrack(() => exitSelectMode()); });
-  $effect(() => { tab; setTimeout(updateTabIndicator); });
+  $effect(() => { tab; counts; requestAnimationFrame(updateTabIndicator); });
 
   let prevChapterId: number | null = null;
   $effect(() => {
@@ -179,9 +179,7 @@
     if (!tabsEl) return;
     const active = tabsEl.querySelector<HTMLElement>(".tab.active");
     if (!active) return;
-    const parent = tabsEl.getBoundingClientRect();
+    tabIndicator = { left: active.offsetLeft, width: active.offsetWidth };
-    const rect   = active.getBoundingClientRect();
-    tabIndicator = { left: rect.left - parent.left, width: rect.width };
   }
 
   function enterSelectMode(id?: number) { selectMode = true; if (id !== undefined) selectedIds = new Set([id]); }
@@ -459,7 +457,7 @@
 
     window.addEventListener("keydown", onKeyDown);
     document.addEventListener("mousedown", onDocMouseDown, true);
-    updateTabIndicator();
+    requestAnimationFrame(updateTabIndicator);
 
     return () => {
       ro.disconnect(); unsub();

src/features/library/components/LibraryToolbar.svelte

@@ -202,8 +202,8 @@
   .tab-slide-indicator { position: absolute; top: 2px; bottom: 2px; border-radius: var(--radius-sm); background: var(--accent-muted); border: 1px solid var(--accent-dim); pointer-events: none; z-index: 0; transition: left 0.22s cubic-bezier(0.16,1,0.3,1), width 0.22s cubic-bezier(0.16,1,0.3,1); }
   .tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-sm); color: var(--text-faint); white-space: nowrap; transition: background var(--t-base), color var(--t-base); cursor: grab; }
   .tab:hover { color: var(--text-muted); }
-  .tab.active { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); }
+  .tab.active { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid transparent; }
-  .tabs-anims .tab.active { background: transparent; border-color: transparent; }
+  .tabs-anims .tab.active { background: transparent; }
   .tab-dragging { opacity: 0.4; cursor: grabbing; }
   .tab-drop-target { background: var(--accent-muted) !important; color: var(--accent-fg) !important; outline: 1px dashed var(--accent); }
   .tab-insert-bar { width: 2px; height: 22px; background: var(--accent); border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 6px var(--accent); pointer-events: none; }