summaryrefslogtreecommitdiffhomepage
path: root/src
diff options
context:
space:
mode:
authorAdam Malczewski <[email protected]>2026-06-28 20:44:53 +0900
committerAdam Malczewski <[email protected]>2026-06-28 20:44:53 +0900
commit5c5e43ab068e9b70ecb81e4414ea5460ec8d2510 (patch)
tree1ebbedaec494198a1a653f3497f2290dbc10d89e /src
parente5c01aa3640ac430155d96e9802dd523fe461319 (diff)
downloaddispatch-web-5c5e43ab068e9b70ecb81e4414ea5460ec8d2510.tar.gz
dispatch-web-5c5e43ab068e9b70ecb81e4414ea5460ec8d2510.zip
fix(ui): shrink tabs to 40vh and tasks to 30vh fixed height
Diffstat (limited to 'src')
-rw-r--r--src/features/surface-host/ui/TodoList.svelte4
-rw-r--r--src/features/tabs/ui.test.ts4
-rw-r--r--src/features/tabs/ui/TabList.svelte4
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"