diff options
| author | Adam Malczewski <[email protected]> | 2026-06-28 20:44:53 +0900 |
|---|---|---|
| committer | Adam Malczewski <[email protected]> | 2026-06-28 20:44:53 +0900 |
| commit | 5c5e43ab068e9b70ecb81e4414ea5460ec8d2510 (patch) | |
| tree | 1ebbedaec494198a1a653f3497f2290dbc10d89e | |
| parent | e5c01aa3640ac430155d96e9802dd523fe461319 (diff) | |
| download | dispatch-web-5c5e43ab068e9b70ecb81e4414ea5460ec8d2510.tar.gz dispatch-web-5c5e43ab068e9b70ecb81e4414ea5460ec8d2510.zip | |
fix(ui): shrink tabs to 40vh and tasks to 30vh fixed height
| -rw-r--r-- | src/features/surface-host/ui/TodoList.svelte | 4 | ||||
| -rw-r--r-- | src/features/tabs/ui.test.ts | 4 | ||||
| -rw-r--r-- | src/features/tabs/ui/TabList.svelte | 4 |
3 files changed, 6 insertions, 6 deletions
diff --git a/src/features/surface-host/ui/TodoList.svelte b/src/features/surface-host/ui/TodoList.svelte index 30cdf8f..cffefde 100644 --- a/src/features/surface-host/ui/TodoList.svelte +++ b/src/features/surface-host/ui/TodoList.svelte @@ -6,10 +6,10 @@ const data = $derived(parseTodoPayload(payload)); </script> -<!-- Fixed at 60% of the viewport height so the region is consistent whether the +<!-- Fixed at 30% of the viewport height so the region is consistent whether the list is empty or overflowing — it always reserves the space and scrolls internally (mirrors the tabs view). --> -<ul class="flex h-[60vh] flex-col gap-1 overflow-y-auto pr-1"> +<ul class="flex h-[30vh] flex-col gap-1 overflow-y-auto pr-1"> {#if data !== null && data.todos.length > 0} {#each data.todos as todo, i (i)} <li class="flex items-start gap-2 rounded-box bg-base-200 px-3 py-2 text-sm"> diff --git a/src/features/tabs/ui.test.ts b/src/features/tabs/ui.test.ts index b12ca1a..ae2a021 100644 --- a/src/features/tabs/ui.test.ts +++ b/src/features/tabs/ui.test.ts @@ -183,7 +183,7 @@ describe("TabList", () => { expect(region).toHaveClass("flex-col"); }); - it("fixes the tab list region at 60vh so a long set scrolls internally", () => { + it("fixes the tab list region at 40vh so a long set scrolls internally", () => { render(TabList, { props: { tabs: sampleTabs, @@ -196,7 +196,7 @@ describe("TabList", () => { const tabs = screen.getAllByRole("tab"); const region = tabs[0]?.parentElement; - expect(region).toHaveClass("h-[60vh]"); + expect(region).toHaveClass("h-[40vh]"); expect(region).toHaveClass("overflow-y-auto"); }); diff --git a/src/features/tabs/ui/TabList.svelte b/src/features/tabs/ui/TabList.svelte index dff2583..6d85065 100644 --- a/src/features/tabs/ui/TabList.svelte +++ b/src/features/tabs/ui/TabList.svelte @@ -83,9 +83,9 @@ </script> <div class="flex flex-col gap-2"> - <!-- Single-column vertical tab list. Fixed at 60% of the viewport height so a + <!-- Single-column vertical tab list. Fixed at 40% of the viewport height so a long tab set scrolls inside this region instead of growing the whole sidebar. --> - <div class="flex h-[60vh] flex-col gap-1 overflow-y-auto pr-1"> + <div class="flex h-[40vh] flex-col gap-1 overflow-y-auto pr-1"> {#each tabs as tab (tab.conversationId)} <div class="flex items-center gap-1.5 rounded px-2 py-1.5 text-sm hover:bg-base-300" |
