From 7dd4f52308be155de303a9ea5e5cab1911f2aaac Mon Sep 17 00:00:00 2001 From: Youwes09 Date: Wed, 22 Apr 2026 10:57:03 -0500 Subject: [PATCH] Fix: Attempt to Fix Tab Boundaries --- src/features/discover/components/Search.svelte | 11 ++--------- src/features/extensions/components/Extensions.svelte | 5 ++--- src/features/library/components/Library.svelte | 8 +++----- src/features/library/components/LibraryToolbar.svelte | 4 ++-- 4 files changed, 9 insertions(+), 19 deletions(-) diff --git a/src/features/discover/components/Search.svelte b/src/features/discover/components/Search.svelte index 9e284e0..a9e24b8 100644 --- a/src/features/discover/components/Search.svelte +++ b/src/features/discover/components/Search.svelte @@ -30,17 +30,10 @@ if (!tabsEl) return; const active = tabsEl.querySelector(".tab.tabActive"); if (!active) return; - const containerLeft = tabsEl.getBoundingClientRect().left; - tabIndicator = { - left: active.getBoundingClientRect().left - containerLeft, - width: active.offsetWidth, - }; + tabIndicator = { left: active.offsetLeft, width: active.offsetWidth }; } - $effect(() => { - tab; // reactive on tab change - if (anims) requestAnimationFrame(updateIndicator); - }); + $effect(() => { tab; if (anims) requestAnimationFrame(() => requestAnimationFrame(updateIndicator)); }); const SEARCH_PAGES = 3; const SEARCH_LIMIT = 200; diff --git a/src/features/extensions/components/Extensions.svelte b/src/features/extensions/components/Extensions.svelte index 6e3bb1b..b30a211 100644 --- a/src/features/extensions/components/Extensions.svelte +++ b/src/features/extensions/components/Extensions.svelte @@ -18,8 +18,7 @@ if (!tabsEl) return; const active = tabsEl.querySelector(".tab.active"); if (!active) return; - const containerLeft = tabsEl.getBoundingClientRect().left; - tabIndicator = { left: active.getBoundingClientRect().left - containerLeft, width: active.offsetWidth }; + tabIndicator = { left: active.offsetLeft, width: active.offsetWidth }; } let extensions: Extension[] = $state([]); @@ -33,7 +32,7 @@ let expanded = $state(new Set()); let panel = $state(null); - $effect(() => { filter; if (anims) requestAnimationFrame(() => requestAnimationFrame(updateIndicator)); }); + $effect(() => { filter; extensions; if (anims) requestAnimationFrame(() => requestAnimationFrame(updateIndicator)); }); let externalUrl = $state(""); let installing = $state(false); diff --git a/src/features/library/components/Library.svelte b/src/features/library/components/Library.svelte index 3be08a9..ecbdf93 100644 --- a/src/features/library/components/Library.svelte +++ b/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(".tab.active"); if (!active) return; - const parent = tabsEl.getBoundingClientRect(); - const rect = active.getBoundingClientRect(); - tabIndicator = { left: rect.left - parent.left, width: rect.width }; + tabIndicator = { left: active.offsetLeft, width: active.offsetWidth }; } 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(); diff --git a/src/features/library/components/LibraryToolbar.svelte b/src/features/library/components/LibraryToolbar.svelte index 532ff17..0b7f390 100644 --- a/src/features/library/components/LibraryToolbar.svelte +++ b/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); } - .tabs-anims .tab.active { background: transparent; border-color: transparent; } + .tab.active { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid 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; }