diff options
| author | Adam Malczewski <[email protected]> | 2026-06-02 15:47:24 +0900 |
|---|---|---|
| committer | Adam Malczewski <[email protected]> | 2026-06-02 15:47:24 +0900 |
| commit | 2f1cf4ad1c7996810c4a68af38aee3b1f64f8cd8 (patch) | |
| tree | 543f8989cc8c245f21f4036a71e2f7d1d73b5109 | |
| parent | c0c08720cceb75b5e635e71190ae1f956f535133 (diff) | |
| download | dispatch-2f1cf4ad1c7996810c4a68af38aee3b1f64f8cd8.tar.gz dispatch-2f1cf4ad1c7996810c4a68af38aee3b1f64f8cd8.zip | |
feat(tabbar): sticky + button & double-clickable trailing pad
Pin the new-tab + button to the left edge of the user-tab row via
position: sticky (!sticky left-0 z-10) with an opaque bg-base-200 and a
right-side shadow as a floating cue, so it stays reachable at any
horizontal scroll. Add a flex-fill trailing pad after the last tab
(flex-1 min-w-12) that opens a new tab on double-click.
| -rw-r--r-- | packages/frontend/src/lib/components/TabBar.svelte | 15 |
1 files changed, 13 insertions, 2 deletions
diff --git a/packages/frontend/src/lib/components/TabBar.svelte b/packages/frontend/src/lib/components/TabBar.svelte index 4fbe3b1..9d33d5e 100644 --- a/packages/frontend/src/lib/components/TabBar.svelte +++ b/packages/frontend/src/lib/components/TabBar.svelte @@ -89,10 +89,11 @@ function handleRenameKeydown(e: KeyboardEvent): void { class="tabs tabs-lift min-w-max" ondblclick={(e) => { if (e.target === e.currentTarget) tabStore.createNewTab(); }} > - <!-- New tab button — always first --> + <!-- New tab button — sticky-pinned to the left edge so it stays reachable + at any horizontal scroll; opaque bg + right-side shadow as a floating cue. --> <button type="button" - class="tab" + class="tab !sticky left-0 z-10 bg-base-200 shadow-[2px_0_4px_-1px_rgba(0,0,0,0.2)]" onclick={() => tabStore.createNewTab()} aria-label="New tab" > @@ -152,6 +153,16 @@ function handleRenameKeydown(e: KeyboardEvent): void { </button> </div> {/each} + + <!-- Trailing padding after the last tab. Fills remaining space (big target), + shrinks to a small minimum when the bar overflows and scrolls. + Double-click anywhere in it to open a new tab. --> + <!-- svelte-ignore a11y_no_static_element_interactions --> + <div + class="flex-1 min-w-12 self-stretch cursor-default" + ondblclick={() => tabStore.createNewTab()} + title="Double-click to open a new tab" + ></div> </div> </div> |