From 9a40d7df91746630dfd049c928b3cdd37cc03275 Mon Sep 17 00:00:00 2001
From: AiraAgent <305439133+AiraAgent@users.noreply.github.com>
Date: Fri, 9 Oct 2026 18:15:34 +1100
Subject: [PATCH 1/3] feat(appearance): add compact task cards

---
 .../src/composables/useBoardCardGeometry.ts   |  24 ++++
 apps/desktop/src/renderer/src/constants/ui.ts |   3 +
 .../{fragments}/TaskCard/TaskCard.vue         |  83 +++++++++++--
 .../GeneralSettings/GeneralSettings.vue       |  13 ++-
 .../modules/TaskBoard/TaskCard.test.ts        | 110 +++++++++++++++++-
 .../renderer/stores/settings.store.test.ts    |  32 +++++
 .../views/Settings/GeneralSettings.test.ts    |  18 ++-
 .../core/src/storage/models/SettingsModel.ts  |  12 +-
 .../core/src/storage/models/_rowMappers.ts    |  11 +-
 .../storage/models/SettingsModel.test.ts      |  57 +++++++++
 packages/protocol/src/types/storage.ts        |   2 +
 11 files changed, 344 insertions(+), 21 deletions(-)
 create mode 100644 apps/desktop/src/renderer/src/composables/useBoardCardGeometry.ts

diff --git a/apps/desktop/src/renderer/src/composables/useBoardCardGeometry.ts b/apps/desktop/src/renderer/src/composables/useBoardCardGeometry.ts
new file mode 100644
index 00000000..3d71415b
--- /dev/null
+++ b/apps/desktop/src/renderer/src/composables/useBoardCardGeometry.ts
@@ -0,0 +1,24 @@
+import {computed} from "vue"
+
+import {BOARD_CARD_GAP, BOARD_CARD_HEIGHT, COMPACT_BOARD_CARD_HEIGHT} from "@/constants/ui"
+import {useSettingValue} from "./useSettingValue"
+
+import type {FontSize, TaskView} from "@daily/protocol"
+
+/** Reactive card dimensions shared by presentation, virtual columns, navigation and drag placement. */
+export function useBoardCardGeometry() {
+  const storedTaskView = useSettingValue<"appearance.taskView", TaskView>("appearance.taskView", "regular")
+  const fontSize = useSettingValue<"typography.fontSize", FontSize>("typography.fontSize", "normal")
+  const fontSizePx: Record<FontSize, number> = {small: 13, normal: 15, large: 17}
+  const taskView = computed<TaskView>({
+    get: () => (storedTaskView.value === "compact" ? "compact" : "regular"),
+    set: (value) => {
+      storedTaskView.value = value === "compact" ? "compact" : "regular"
+    },
+  })
+  const isCompact = computed(() => taskView.value === "compact")
+  const cardHeight = computed(() => (isCompact.value ? (COMPACT_BOARD_CARD_HEIGHT * (fontSizePx[fontSize.value] ?? 15)) / 15 : BOARD_CARD_HEIGHT))
+  const cardStep = computed(() => cardHeight.value + BOARD_CARD_GAP)
+
+  return {taskView, isCompact, cardHeight, cardStep}
+}
diff --git a/apps/desktop/src/renderer/src/constants/ui.ts b/apps/desktop/src/renderer/src/constants/ui.ts
index 0aeddf50..111f6293 100644
--- a/apps/desktop/src/renderer/src/constants/ui.ts
+++ b/apps/desktop/src/renderer/src/constants/ui.ts
@@ -44,3 +44,6 @@ export const BOARD_CARD_HEIGHT = 200
 
 /** A board card plus the gap below it; the virtual columns and the drop index step through a column by it, so it must match the card. */
 export const BOARD_CARD_STEP = 206
+
+export const BOARD_CARD_GAP = BOARD_CARD_STEP - BOARD_CARD_HEIGHT
+export const COMPACT_BOARD_CARD_HEIGHT = 108
diff --git a/apps/desktop/src/renderer/src/ui/modules/TaskBoard/{fragments}/TaskCard/TaskCard.vue b/apps/desktop/src/renderer/src/ui/modules/TaskBoard/{fragments}/TaskCard/TaskCard.vue
index 297b5442..4a3dc32a 100644
--- a/apps/desktop/src/renderer/src/ui/modules/TaskBoard/{fragments}/TaskCard/TaskCard.vue
+++ b/apps/desktop/src/renderer/src/ui/modules/TaskBoard/{fragments}/TaskCard/TaskCard.vue
@@ -4,7 +4,7 @@ import {computed, toRef, useTemplateRef} from "vue"
 import {sortTags} from "@daily/protocol"
 import {toDateLabel} from "@daily/std"
 
-import {BOARD_CARD_HEIGHT} from "@/constants/ui"
+import {useBoardCardGeometry} from "@/composables/useBoardCardGeometry"
 import {useBranchesStore} from "@/stores/branches.store"
 import {useFilterStore} from "@/stores/filter.store"
 import {useFocusStore} from "@/stores/focus.store"
@@ -29,6 +29,7 @@ import PriorityIcon from "@/ui/common/priority/PriorityIcon.vue"
 import {useConfirmUnsavedModal} from "@/ui/overlays/ConfirmUnsavedModal"
 import {toShortDurationLabel} from "@/utils/date/toShortDurationLabel"
 import {cn} from "@/utils/ui/tailwindcss"
+import {toTaskTitle} from "@shared/utils/tasks/toTaskTitle"
 import CardCrumb from "./{fragments}/CardCrumb.vue"
 import DeleteMenuItem from "./{fragments}/DeleteMenuItem.vue"
 import FocusBorder from "./{fragments}/FocusBorder.vue"
@@ -41,6 +42,9 @@ import type {Branch, Tag, Task, TaskRelationSets, TaskStatus} from "@daily/proto
 
 const props = defineProps<{task: Task}>()
 
+const {isCompact, cardHeight} = useBoardCardGeometry()
+const title = computed(() => toTaskTitle(props.task.content) || "Untitled task")
+
 const tasksStore = useTasksStore()
 const tagsStore = useTagsStore()
 const taskEditorStore = useTaskEditorStore()
@@ -70,6 +74,7 @@ const footerDayLabel = computed(() => {
 })
 
 const hasTime = computed(() => Boolean(estimateLabel.value) || Boolean(spentLabel.value))
+const hasContext = computed(() => hasRelation.value || Boolean(footerDayLabel.value) || commentCount.value > 0)
 const hasMetrics = computed(() => hasRelation.value || Boolean(footerDayLabel.value) || hasTime.value || commentCount.value > 0)
 const hasPriority = computed(() => props.task.priority !== "none")
 const hasFooter = computed(() => tags.value.length > 0 || hasMetrics.value || hasPriority.value)
@@ -164,7 +169,7 @@ function getStatusClass(status: TaskStatus) {
 
 function getCardClasses(status: TaskStatus, isInSession: boolean) {
   return cn(
-    "bg-base-100 hover:shadow-accent/5 group relative overflow-hidden rounded-2xl border transition-all duration-200 hover:shadow-lg",
+    "bg-base-100 hover:shadow-accent/5 group relative overflow-hidden rounded-2xl border transition-[border-color,box-shadow] duration-200 hover:shadow-lg",
     status === "backlog" && "border-base-content/15 border-dashed",
     status === "done" && "border-success/30 hover:border-success/40",
     status === "discarded" && "border-warning/30 hover:border-warning/40",
@@ -183,7 +188,8 @@ function getSpentClasses(hasSpent: boolean) {
 
 function getContentClasses(status: TaskStatus) {
   return cn(
-    "board-card-text relative min-h-0 flex-1 overflow-hidden transition-opacity duration-200",
+    "relative min-h-0 flex-1 overflow-hidden transition-opacity duration-200",
+    !isCompact.value && "board-card-text",
     (status === "done" || status === "discarded") && "opacity-50",
   )
 }
@@ -218,20 +224,29 @@ async function onLinkTask(side: keyof TaskRelationSets, taskId: Task["id"]) {
 
 <template>
   <BaseContextMenu ref="contextMenu" :items="menuItems" @select="onSelect">
-    <div :id="task.id" :class="getCardClasses(task.status, isInSession)" :style="{height: `${BOARD_CARD_HEIGHT}px`}" @click.stop="onCardClick">
-      <div class="relative z-10 flex h-full w-full flex-col gap-2 px-4 pt-3.5 pb-3">
+    <div
+      :id="task.id"
+      :class="[getCardClasses(task.status, isInSession), {'board-card-compact': isCompact}]"
+      :style="{height: `${cardHeight}px`}"
+      @click.stop="onCardClick"
+    >
+      <div class="board-card-inner relative z-10 flex h-full w-full flex-col gap-2 px-4 pb-3 pt-3.5">
         <CardCrumb v-if="projectName || milestone" :project-name="projectName" :milestone="milestone" />
 
         <div :class="getContentClasses(task.status)">
-          <MarkdownContent :content="task.content" :minimizable="false" clip-code />
+          <p v-if="isCompact" class="board-card-title">{{ title }}</p>
+          <MarkdownContent v-else :content="task.content" :minimizable="false" clip-code />
         </div>
 
-        <div v-if="hasFooter" class="flex min-h-5 min-w-0 items-center gap-2 text-xs">
+        <div
+          v-if="isCompact ? tags.length || hasTime || hasPriority : hasFooter"
+          class="board-card-footer flex min-h-5 min-w-0 items-center gap-2 text-xs"
+        >
           <TagLine v-if="tags.length" :tags="tags" />
 
-          <div v-if="hasMetrics" class="ml-auto flex shrink-0 items-center gap-2.5">
-            <RelationChip :task-id="task.id" />
-            <div v-if="footerDayLabel" class="text-base-content/75 inline-flex items-center gap-1 whitespace-nowrap">
+          <div v-if="isCompact ? hasTime : hasMetrics" class="ml-auto flex shrink-0 items-center gap-2.5">
+            <RelationChip v-if="!isCompact" :task-id="task.id" />
+            <div v-if="!isCompact && footerDayLabel" class="text-base-content/75 inline-flex items-center gap-1 whitespace-nowrap">
               <BaseIcon name="calendar" class="text-base-content/40 size-3.5" />
               <span>{{ footerDayLabel }}</span>
             </div>
@@ -242,13 +257,25 @@ async function onLinkTask(side: keyof TaskRelationSets, taskId: Task["id"]) {
                 <span class="text-base-content/55"> / {{ estimateLabel || "–" }}</span>
               </span>
             </div>
-            <div v-if="commentCount" class="text-base-content/75 inline-flex items-center gap-1 whitespace-nowrap">
+            <div v-if="!isCompact && commentCount" class="text-base-content/75 inline-flex items-center gap-1 whitespace-nowrap">
               <BaseIcon name="message" class="text-base-content/40 size-3.5" />
               <span>{{ commentCount }}</span>
             </div>
           </div>
 
-          <PriorityIcon v-if="hasPriority" :priority="task.priority" :class="getPriorityClasses(hasMetrics)" />
+          <PriorityIcon v-if="hasPriority" :priority="task.priority" :class="getPriorityClasses(isCompact ? hasTime : hasMetrics)" />
+        </div>
+
+        <div v-if="isCompact && hasContext" class="board-card-context flex min-h-5 shrink-0 items-center justify-end gap-2.5 text-xs">
+          <RelationChip :task-id="task.id" />
+          <div v-if="footerDayLabel" class="text-base-content/75 inline-flex items-center gap-1 whitespace-nowrap">
+            <BaseIcon name="calendar" class="text-base-content/40 size-3.5" />
+            <span>{{ footerDayLabel }}</span>
+          </div>
+          <div v-if="commentCount" class="text-base-content/75 inline-flex items-center gap-1 whitespace-nowrap">
+            <BaseIcon name="message" class="text-base-content/40 size-3.5" />
+            <span>{{ commentCount }}</span>
+          </div>
         </div>
       </div>
 
@@ -312,6 +339,38 @@ async function onLinkTask(side: keyof TaskRelationSets, taskId: Task["id"]) {
 </template>
 
 <style scoped>
+.board-card-compact .board-card-inner {
+  padding: 0.5rem 0.8rem 0.4rem;
+  gap: 0.125rem;
+}
+
+.board-card-compact .board-card-inner > :deep(.h-4.text-xs) {
+  height: 0.9rem;
+  line-height: 1.2;
+  flex-shrink: 0;
+}
+
+.board-card-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.board-card-compact .board-card-footer {
+  min-height: 1.15rem;
+  flex-shrink: 0;
+}
+
+.board-card-context {
+  min-height: 0.9rem;
+  line-height: 1.2;
+}
+
 .board-card-text {
   scroll-timeline: --board-card-text y;
 }
diff --git a/apps/desktop/src/renderer/src/ui/views/Settings/{fragments}/GeneralSettings/GeneralSettings.vue b/apps/desktop/src/renderer/src/ui/views/Settings/{fragments}/GeneralSettings/GeneralSettings.vue
index 97d097f4..7c6f9be0 100644
--- a/apps/desktop/src/renderer/src/ui/views/Settings/{fragments}/GeneralSettings/GeneralSettings.vue
+++ b/apps/desktop/src/renderer/src/ui/views/Settings/{fragments}/GeneralSettings/GeneralSettings.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import {useBoardCardGeometry} from "@/composables/useBoardCardGeometry"
 import {useSettingValue} from "@/composables/useSettingValue"
 import {useThemeStore} from "@/stores/theme"
 import BaseSegmented from "@/ui/base/BaseSegmented.vue"
@@ -11,7 +12,7 @@ import MainColorPicker from "./{fragments}/MainColorPicker.vue"
 import QuickTaskHotkey from "./{fragments}/QuickTaskHotkey.vue"
 import ShortcutsSection from "./{fragments}/ShortcutsSection.vue"
 
-import type {AppearanceMode, FontSize} from "@daily/protocol"
+import type {AppearanceMode, FontSize, TaskView} from "@daily/protocol"
 
 const themeOptions: {value: AppearanceMode; label: string}[] = [
   {value: "light", label: "Light"},
@@ -25,6 +26,12 @@ const fontSizeOptions: {value: FontSize; label: string}[] = [
   {value: "large", label: "Large"},
 ]
 
+const taskViewOptions: {value: TaskView; label: string}[] = [
+  {value: "regular", label: "Regular"},
+  {value: "compact", label: "Compact"},
+]
+
+const {taskView} = useBoardCardGeometry()
 const themeStore = useThemeStore()
 const shouldNotify = useSettingValue("focus.shouldNotify", true)
 const shouldPlaySound = useSettingValue("focus.shouldPlaySound", true)
@@ -51,6 +58,10 @@ const isQuickTaskEnabled = useSettingValue("quickTask.isEnabled", true)
         <BaseSegmented v-model="themeStore.fontSize" :options="fontSizeOptions" />
       </SettingRow>
 
+      <SettingRow title="Task view" description="Choose regular previews or compact task titles">
+        <BaseSegmented v-model="taskView" :options="taskViewOptions" />
+      </SettingRow>
+
       <SettingRow title="Show icon in menu bar" description="Keep the Daily icon in the menu bar to open Settings or Quick task">
         <BaseSwitch v-model="isMenuBarVisible" />
       </SettingRow>
diff --git a/apps/desktop/tests/renderer/modules/TaskBoard/TaskCard.test.ts b/apps/desktop/tests/renderer/modules/TaskBoard/TaskCard.test.ts
index 87fb1441..b258e5ca 100644
--- a/apps/desktop/tests/renderer/modules/TaskBoard/TaskCard.test.ts
+++ b/apps/desktop/tests/renderer/modules/TaskBoard/TaskCard.test.ts
@@ -2,11 +2,11 @@
 // @ts-nocheck
 import {nextTick} from "vue"
 import {createPinia, setActivePinia} from "pinia"
-import {afterEach, beforeEach, describe, expect, it} from "vitest"
+import {afterEach, beforeEach, describe, expect, it, vi} from "vitest"
 
 import {toDateLabel} from "@daily/std"
 
-import {mount} from "@vue/test-utils"
+import {flushPromises, mount} from "@vue/test-utils"
 import {mockBridgeIPC} from "../../../helpers/bridgeIPC"
 import {installFakeResizeObserver, stubLayout} from "../../../helpers/resizeObserver"
 
@@ -467,3 +467,109 @@ describe("TaskCard — the relation chip", () => {
     expect(tips).toEqual(["Blocked by 2"])
   })
 })
+
+describe("TaskCard — compact presentation", () => {
+  let wrapper = null
+  let bridge
+
+  beforeEach(() => {
+    bridge = mockBridgeIPC()
+    setActivePinia(createPinia())
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+    wrapper = null
+    vi.restoreAllMocks()
+  })
+
+  async function setup(task, fontSize = "normal") {
+    const {useSettingsStore} = await import("../../../../src/renderer/src/stores/settings.store")
+    const settings = useSettingsStore()
+    await flushPromises()
+    settings.settings = {appearance: {taskView: "compact"}, typography: {fontSize}, branch: {activeId: "main"}}
+    const {default: TaskCard} = await import("../../../../src/renderer/src/ui/modules/TaskBoard/{fragments}/TaskCard/TaskCard.vue")
+    wrapper = mount(TaskCard, {props: {task}, global: {directives: {tooltip: {}}}})
+    await nextTick()
+    return settings
+  }
+
+  it.each([
+    ["small", 93.6],
+    ["normal", 108],
+    ["large", 122.4],
+  ])("scales compact space at %s while returning to the original regular height", async (fontSize, height) => {
+    const settings = await setup(makeTask(), fontSize)
+    expect(Number.parseFloat(wrapper.get("#task-1").element.style.height)).toBeCloseTo(height)
+    settings.settings.appearance.taskView = "regular"
+    await nextTick()
+    expect(wrapper.get("#task-1").element.style.height).toBe("200px")
+  })
+
+  it("shows the normalized first line while opening the untouched rich content in the existing editor", async () => {
+    const content = "# Ship **promo** codes\n\nBody details\n```js\nconst x = 1\n```\n![Diagram](file:diagram)"
+    const task = makeTask({content})
+    const {useTasksStore} = await import("../../../../src/renderer/src/stores/tasks")
+    const {useTaskEditorStore} = await import("../../../../src/renderer/src/stores/task-editor")
+    useTasksStore().tasks = [task]
+    const settings = await setup(task)
+    expect(wrapper.get("#task-1").text()).toBe("Ship promo codes")
+    await wrapper.get("#task-1").trigger("click")
+    await flushPromises()
+    expect(useTaskEditorStore().editingTaskId).toBe("task-1")
+    expect(useTaskEditorStore().draft.content).toBe(content)
+    useTaskEditorStore().patch({content: content + "\nUnsaved edit"})
+    settings.settings.appearance.taskView = "regular"
+    await nextTick()
+    settings.settings.appearance.taskView = "compact"
+    await nextTick()
+    expect(useTaskEditorStore().draft.content).toBe(content + "\nUnsaved edit")
+    expect(useTaskEditorStore().isDirty).toBe(true)
+    expect(useTasksStore().tasks[0].content).toBe(content)
+    expect(bridge["tasks:update"]).not.toHaveBeenCalled()
+  })
+
+  it.each(["", "\n\n", "![](file:image)\nLater body", "```\nLater code", "# ** **"])(
+    "gives an empty normalized summary an explicit title for %s",
+    async (content) => {
+      await setup(makeTask({content}))
+      expect(wrapper.get("#task-1").text()).toBe("Untitled task")
+    },
+  )
+
+  it("keeps tags with overflow, time and priority together and puts relation, date and comments on another row", async () => {
+    const {useTagsStore} = await import("../../../../src/renderer/src/stores/tags.store")
+    const {useFilterStore} = await import("../../../../src/renderer/src/stores/filter.store")
+    const {useTaskCommentsStore} = await import("../../../../src/renderer/src/stores/taskComments.store")
+    const {useTaskRelationsStore} = await import("../../../../src/renderer/src/stores/taskRelations.store")
+    const {useTasksStore} = await import("../../../../src/renderer/src/stores/tasks")
+    const tags = ["alpha", "beta", "gamma", "delta"].map((name) => ({id: name, name, color: "#123456", branchId: "main"}))
+    useTagsStore().tags = tags
+    useFilterStore().setFrame("milestone")
+    useTaskCommentsStore().commentCounts = {"task-1": 12}
+    useTasksStore().tasks = [makeTask(), makeTask({id: "task-2"})]
+    useTaskRelationsStore().relations = [{blockerId: "task-1", blockedId: "task-2"}]
+    vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(function () {
+      return this.classList.contains("overflow-hidden") ? 100 : 40
+    })
+    await setup(makeTask({tags, spentTime: 2700, estimatedTime: 7200, priority: "high"}))
+    const time = wrapper.get('use[href="#stopwatch"]').element.closest(".min-h-5")
+    const comments = wrapper.get('use[href="#message"]').element.closest(".min-h-5")
+    expect(time).not.toBe(comments)
+    expect(time.textContent).toContain("+3")
+    expect(time.textContent).toContain("45m")
+    expect(time.textContent).toContain("2h")
+    expect(time.querySelector('use[href="#priority-high"]')).not.toBeNull()
+    expect(comments.textContent).toContain("12")
+    expect(comments.querySelector('use[href="#calendar"]')).not.toBeNull()
+    expect(comments.querySelector('use[href="#ban"]')).not.toBeNull()
+    const menu = wrapper.findComponent({name: "BaseContextMenu"})
+    expect(
+      menu
+        .props("items")
+        .find((item) => item.value === "copy")
+        .children.map((item) => item.value),
+    ).toContain("copy-content")
+    expect(menu.props("items").map((item) => item.value)).toContain("status")
+  })
+})
diff --git a/apps/desktop/tests/renderer/stores/settings.store.test.ts b/apps/desktop/tests/renderer/stores/settings.store.test.ts
index 1cb35add..af48757f 100644
--- a/apps/desktop/tests/renderer/stores/settings.store.test.ts
+++ b/apps/desktop/tests/renderer/stores/settings.store.test.ts
@@ -85,6 +85,38 @@ describe("settingsStore", () => {
     }
   })
 
+  it("updates validated card geometry immediately and on settings reload without rewriting other appearance values", async () => {
+    const store = await getStore()
+    const {useBoardCardGeometry} = await import("../../../src/renderer/src/composables/useBoardCardGeometry")
+    const geometry = useBoardCardGeometry()
+    expect(geometry.taskView.value).toBe("regular")
+    expect(geometry.cardHeight.value).toBe(200)
+    expect(geometry.cardStep.value).toBe(206)
+    store.settings.appearance = {mode: "dark", accent: "rose", taskView: "invalid"}
+    expect(geometry.taskView.value).toBe("regular")
+    expect(store.settings.appearance.mode).toBe("dark")
+    bridge["settings:load"].mockResolvedValueOnce({
+      ...store.settings,
+      appearance: {...store.settings.appearance, taskView: "compact"},
+      typography: {fontSize: "large"},
+    })
+    await store.revalidate()
+    expect(geometry.taskView.value).toBe("compact")
+    expect(geometry.cardHeight.value).toBeCloseTo(122.4)
+    expect(geometry.cardStep.value).toBeCloseTo(128.4)
+    vi.useFakeTimers()
+    try {
+      geometry.taskView.value = "regular"
+      expect(geometry.cardHeight.value).toBe(200)
+      expect(geometry.cardStep.value).toBe(206)
+      expect(store.settings.appearance.accent).toBe("rose")
+      await vi.runAllTimersAsync()
+      expect(bridge["settings:save"]).toHaveBeenCalledWith({appearance: {taskView: "regular"}})
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
   it("revalidate reloads settings from IPC", async () => {
     const store = await getStore()
 
diff --git a/apps/desktop/tests/renderer/views/Settings/GeneralSettings.test.ts b/apps/desktop/tests/renderer/views/Settings/GeneralSettings.test.ts
index dcafd973..cf304e11 100644
--- a/apps/desktop/tests/renderer/views/Settings/GeneralSettings.test.ts
+++ b/apps/desktop/tests/renderer/views/Settings/GeneralSettings.test.ts
@@ -87,15 +87,29 @@ describe("GeneralSettings", () => {
     expect(titles()).not.toContain("Quick task shortcut")
   })
 
+  it("Appearance: selects regular by default and saves compact through the existing settings path", async () => {
+    await setup({shouldNotify: true, shouldPlaySound: true})
+    const titles = wrapper.findAllComponents(SettingRow).map((row) => row.props("title"))
+    expect(titles).toContain("Task view")
+    const row = wrapper.findAllComponents(SettingRow).find((row) => row.props("title") === "Task view")
+    const buttons = row.findAll("button")
+    expect(buttons.map((button) => button.text())).toEqual(["Regular", "Compact"])
+    expect(buttons[0].classes()).toContain("bg-accent")
+    await buttons[1].trigger("click")
+    await vi.advanceTimersByTimeAsync(300)
+    expect(buttons[1].classes()).toContain("bg-accent")
+    expect(bridge["settings:save"]).toHaveBeenCalledWith({appearance: {taskView: "compact"}})
+  })
+
   it("opens with the Appearance group in the agreed row order", async () => {
     await setup({shouldNotify: true, shouldPlaySound: true})
 
     expect(wrapper.findAllComponents(SettingsGroup)[0].props("label")).toBe("Appearance")
     const titles = wrapper
       .findAllComponents(SettingRow)
-      .slice(0, 5)
+      .slice(0, 6)
       .map((r) => r.props("title"))
-    expect(titles).toEqual(["Theme", "Shell Color", "Main Color", "Text size", "Show icon in menu bar"])
+    expect(titles).toEqual(["Theme", "Shell Color", "Main Color", "Text size", "Task view", "Show icon in menu bar"])
     const shortcuts = wrapper.findAllComponents(SettingsGroup).find((g) => g.props("label") === "Shortcuts")
     expect(shortcuts.text()).not.toContain("Show icon in menu bar")
   })
diff --git a/packages/core/src/storage/models/SettingsModel.ts b/packages/core/src/storage/models/SettingsModel.ts
index 53388c17..91b98763 100644
--- a/packages/core/src/storage/models/SettingsModel.ts
+++ b/packages/core/src/storage/models/SettingsModel.ts
@@ -3,7 +3,13 @@ import {nanoid} from "nanoid"
 import {deepMerge} from "@daily/std"
 
 import {logger} from "../../utils/logger"
-import {getDefaultSettings, getDefaultSyncSettings, getDefaultTypographySettings, migrateSettingsShape} from "./_rowMappers"
+import {
+  getDefaultSettings,
+  getDefaultSyncSettings,
+  getDefaultTypographySettings,
+  migrateSettingsShape,
+  normalizeSettingsTaskView,
+} from "./_rowMappers"
 
 import type {Settings, SyncSettings, TypographySettings} from "@daily/protocol"
 import type {SqliteDriver} from "../../database/SqliteDriver"
@@ -21,7 +27,7 @@ export class SettingsModel {
     try {
       const parsed = migrateSettingsShape(JSON.parse(row.data))
       const {sync: _sync, typography: _typography, ...syncable} = parsed
-      return {...deepMerge<Settings>(defaults, syncable), sync, typography}
+      return {...normalizeSettingsTaskView(deepMerge<Settings>(defaults, syncable)), sync, typography}
     } catch {
       return {...defaults, sync, typography}
     }
@@ -29,7 +35,7 @@ export class SettingsModel {
 
   saveSettings(partial: Partial<Settings>) {
     const current = this.loadSettings()
-    const merged = deepMerge<Settings>(current, partial)
+    const merged = normalizeSettingsTaskView(deepMerge<Settings>(current, partial))
     merged.version = nanoid()
     const {sync, typography, ...syncable} = merged
     const now = new Date().toISOString()
diff --git a/packages/core/src/storage/models/_rowMappers.ts b/packages/core/src/storage/models/_rowMappers.ts
index d101e2b4..0211d6bb 100644
--- a/packages/core/src/storage/models/_rowMappers.ts
+++ b/packages/core/src/storage/models/_rowMappers.ts
@@ -242,6 +242,7 @@ export function getDefaultSettings(): Settings {
       mode: "system",
       accent: DEFAULT_ACCENT_ID,
       base: DEFAULT_BASE_ID,
+      taskView: "regular",
     },
     typography: getDefaultTypographySettings(),
     sync: getDefaultSyncSettings(),
@@ -279,12 +280,20 @@ export function rowToSettings(row: SettingsRow): Settings {
   const defaults = getDefaultSettings()
   try {
     const parsed = migrateSettingsShape(JSON.parse(row.data))
-    return deepMerge<Settings>(defaults, parsed)
+    return normalizeSettingsTaskView(deepMerge<Settings>(defaults, parsed))
   } catch {
     return defaults
   }
 }
 
+/** Resolves older or unknown task views without discarding other saved preferences. */
+export function normalizeSettingsTaskView(settings: Settings): Settings {
+  return {
+    ...settings,
+    appearance: {...settings.appearance, taskView: settings.appearance?.taskView === "compact" ? "compact" : "regular"},
+  }
+}
+
 export type {TaskRow, TagRow, BranchRow, MilestoneRow, TaskRelationRow, TaskCommentRow, FileRow, SettingsRow}
 
 const COMMENT_KINDS: TaskCommentKind[] = ["manual", "agent", "mcp"]
diff --git a/packages/core/tests/storage/models/SettingsModel.test.ts b/packages/core/tests/storage/models/SettingsModel.test.ts
index 220d39ee..0a84101b 100644
--- a/packages/core/tests/storage/models/SettingsModel.test.ts
+++ b/packages/core/tests/storage/models/SettingsModel.test.ts
@@ -1,5 +1,9 @@
+import {mkdtempSync, rmSync} from "node:fs"
+import {join} from "node:path"
+import Database from "better-sqlite3"
 import {afterEach, beforeEach, describe, expect, it, vi} from "vitest"
 
+import {rowToSettings} from "@core/storage/models/_rowMappers"
 import {FileModel} from "@core/storage/models/FileModel"
 import {SettingsModel} from "@core/storage/models/SettingsModel"
 import {LocalStorageAdapter} from "@core/storage/sync/adapters/LocalStorageAdapter"
@@ -32,6 +36,59 @@ describe("SettingsModel", () => {
     expect(settings.branch.activeId).toBe("main")
   })
 
+  it.each([undefined, null, "dense", 108])("uses regular for a missing or invalid task view %s while preserving appearance", (taskView) => {
+    const data = JSON.stringify({appearance: {mode: "dark", accent: "rose", base: "slate", taskView}, branch: {activeId: "project-a"}})
+    db.prepare("INSERT INTO settings (id, version, data, created_at, updated_at) VALUES ('default', 'v', ?, 'now', 'now')").run(data)
+
+    for (const settings of [settingsModel.loadSettings(), rowToSettings({data} as any)]) {
+      expect(settings.appearance).toEqual({mode: "dark", accent: "rose", base: "slate", taskView: "regular"})
+      expect(settings.branch.activeId).toBe("project-a")
+    }
+  })
+
+  it("normalizes an invalid partial save without losing the existing colors or other preferences", () => {
+    settingsModel.saveSettings({appearance: {mode: "dark", accent: "rose", base: "slate", taskView: "compact"}, menuBar: {isVisible: false}})
+    settingsModel.saveSettings({appearance: {taskView: "dense"}} as any)
+
+    expect(settingsModel.loadSettings().appearance).toEqual({mode: "dark", accent: "rose", base: "slate", taskView: "regular"})
+    expect(settingsModel.loadSettings().menuBar.isVisible).toBe(false)
+    const persisted = JSON.parse(db.prepare("SELECT data FROM settings WHERE id = 'default'").get().data)
+    expect(persisted.appearance.taskView).toBe("regular")
+  })
+
+  it("migrates legacy themes with regular cards while retaining the selected project", () => {
+    db.prepare("INSERT INTO settings (id, version, data, created_at, updated_at) VALUES ('default', 'v', ?, 'now', 'now')").run(
+      JSON.stringify({themes: {current: "github-dark", useSystem: false}, branch: {activeId: "project-a"}}),
+    )
+    const settings = settingsModel.loadSettings()
+    expect(settings.appearance.mode).toBe("dark")
+    expect(settings.appearance.taskView).toBe("regular")
+    expect(settings.branch.activeId).toBe("project-a")
+  })
+
+  it("keeps compact after partial saves and reopening a real SQLite database without leaking it into snapshots", async () => {
+    const directory = mkdtempSync("/tmp/daily-task-view-settings-")
+    try {
+      settingsModel.saveSettings({appearance: {taskView: "compact", mode: "dark"}})
+      settingsModel.saveSettings({menuBar: {isVisible: false}})
+      const filename = join(directory, "settings.sqlite")
+      db.exec(`VACUUM INTO '${filename}'`)
+      db.close()
+      db = new Database(filename)
+      settingsModel = new SettingsModel(db)
+
+      expect(settingsModel.loadSettings().appearance.taskView).toBe("compact")
+      expect(settingsModel.loadSettings().appearance.mode).toBe("dark")
+      expect(settingsModel.loadSettings().menuBar.isVisible).toBe(false)
+      const docs = await new LocalStorageAdapter(db, new FileModel(db, directory)).loadAllDocs()
+      const snapshot = buildSnapshot(docs)
+      expect(snapshot.docs).not.toHaveProperty("settings")
+      expect(JSON.stringify(snapshot)).not.toContain("taskView")
+    } finally {
+      rmSync(directory, {recursive: true, force: true})
+    }
+  })
+
   it("keeps a rebound Quick task hotkey", () => {
     settingsModel.saveSettings({quickTask: {hotkey: "Control+Shift+A"}})
 
diff --git a/packages/protocol/src/types/storage.ts b/packages/protocol/src/types/storage.ts
index cf456904..26c5282c 100644
--- a/packages/protocol/src/types/storage.ts
+++ b/packages/protocol/src/types/storage.ts
@@ -47,6 +47,7 @@ export type InstalledAppReleaseState = {
 
 export type AppearanceMode = "light" | "dark" | "system"
 export type FontSize = "small" | "normal" | "large"
+export type TaskView = "regular" | "compact"
 
 /** UI preferences. */
 export type TypographySettings = {
@@ -91,6 +92,7 @@ export type Settings = {
     mode: AppearanceMode
     accent: string
     base: string
+    taskView: TaskView
   }
   typography: TypographySettings
   sync: SyncSettings

From 665c5e37301275dfc4a3e7edc2f531b78e5e9f88 Mon Sep 17 00:00:00 2001
From: AiraAgent <305439133+AiraAgent@users.noreply.github.com>
Date: Fri, 9 Oct 2026 18:24:03 +1100
Subject: [PATCH 2/3] feat(board): apply task view geometry to columns and
 dragging

---
 .../src/composables/tasks/useTaskColumns.ts   |  48 ++++++-
 .../src/composables/useBoardCardGeometry.ts   |   2 +-
 .../TaskBoard/composables/useVirtualColumn.ts |  21 ++-
 .../TaskBoard/{fragments}/TaskColumn.vue      |  16 ++-
 apps/desktop/tests/helpers/boardDrag.ts       |  11 +-
 .../composables/useTaskColumns.drag.test.ts   |  54 ++++++++
 .../modules/TaskBoard/TaskBoard.test.ts       | 130 +++++++++++++++++-
 7 files changed, 255 insertions(+), 27 deletions(-)

diff --git a/apps/desktop/src/renderer/src/composables/tasks/useTaskColumns.ts b/apps/desktop/src/renderer/src/composables/tasks/useTaskColumns.ts
index 3c96e588..737f090b 100644
--- a/apps/desktop/src/renderer/src/composables/tasks/useTaskColumns.ts
+++ b/apps/desktop/src/renderer/src/composables/tasks/useTaskColumns.ts
@@ -5,10 +5,11 @@ import {sortTasksByDateThenOrder, sortTasksByOrderIndex} from "@daily/protocol"
 import {clamp} from "@daily/std"
 
 import {createSharedComposable} from "@/composables/createSharedComposable"
-import {BOARD_CARD_HEIGHT, BOARD_CARD_STEP} from "@/constants/ui"
+import {useBoardCardGeometry} from "@/composables/useBoardCardGeometry"
 import {useDragDropStore} from "@/stores/dragDrop.store"
 import {useFilterStore} from "@/stores/filter.store"
 import {useProjectScopeStore} from "@/stores/projectScope.store"
+import {useTaskEditorStore} from "@/stores/task-editor"
 import {useTasksStore} from "@/stores/tasks"
 import {useUIStore} from "@/stores/ui"
 import {getActiveTagNames} from "@/utils/tags/getActiveTagNames"
@@ -31,6 +32,8 @@ export const useTaskColumns = createSharedComposable(() => {
   const projectScopeStore = useProjectScopeStore()
   const uiStore = useUIStore()
   const dragDropStore = useDragDropStore()
+  const taskEditorStore = useTaskEditorStore()
+  const {taskView, fontSize, cardHeight, cardStep} = useBoardCardGeometry()
 
   const dropTarget = shallowRef<ColumnSlot | null>(null)
   const landing = shallowRef<PlacedTask | null>(null)
@@ -40,6 +43,7 @@ export const useTaskColumns = createSharedComposable(() => {
   let origin: PlacedTask | null = null
   let pointer = {x: 0, y: 0}
   let bodyUserSelect = ""
+  let geometryRevision = 0
 
   const milestoneFrameTasks = computed(() => {
     if (filterStore.isNoMilestoneActive) return tasksStore.tasksWithoutMilestone
@@ -113,7 +117,7 @@ export const useTaskColumns = createSharedComposable(() => {
     column.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})
 
     const top = clamp(
-      track.offsetTop + index * BOARD_CARD_STEP + BOARD_CARD_HEIGHT / 2 - list.clientHeight / 2,
+      track.offsetTop + index * cardStep.value + cardHeight.value / 2 - list.clientHeight / 2,
       0,
       list.scrollHeight - list.clientHeight,
     )
@@ -253,7 +257,7 @@ export const useTaskColumns = createSharedComposable(() => {
     }
 
     const count = tasksByStatus.value[status].filter((task) => task.id !== origin?.task.id).length
-    const index = getColumnInsertIndex(pointer.y - track.getBoundingClientRect().top, count)
+    const index = getColumnInsertIndex(pointer.y - track.getBoundingClientRect().top, count, cardStep.value)
     if (dropTarget.value?.status !== status || dropTarget.value.index !== index) dropTarget.value = {status, index}
 
     columnScroll.update(column.querySelector<HTMLElement>("[data-column-list]"), pointer.y)
@@ -322,7 +326,41 @@ export const useTaskColumns = createSharedComposable(() => {
     if (!Object.values(byStatus).some((tasks) => tasks.some((task) => task.id === draggedId))) stopPress()
   })
 
+  watch([taskView, cardHeight, cardStep, fontSize], async (_, [, previousHeight, previousStep]) => {
+    const revision = ++geometryRevision
+    stopPress()
+    const selectedId = taskEditorStore.editingTaskId
+    const selectedStatus = (Object.keys(tasksByStatus.value) as TaskStatus[]).find((status) =>
+      tasksByStatus.value[status].some((task) => task.id === selectedId),
+    )
+    const anchors = (Object.keys(tasksByStatus.value) as TaskStatus[]).flatMap((status) => {
+      const list = document.querySelector<HTMLElement>(`[data-column-status="${status}"] [data-column-list]`)
+      const track = list?.querySelector<HTMLElement>("[data-column-track]")
+      const tasks = tasksByStatus.value[status]
+      if (!list || !track || !tasks.length) return []
+      const top = list.scrollTop - track.offsetTop
+      let index = clamp(Math.floor(top / previousStep), 0, tasks.length - 1)
+      if (top - index * previousStep >= previousHeight && index < tasks.length - 1) index += 1
+      return [{status, list, track, taskId: tasks[index].id, offset: top - index * previousStep}]
+    })
+    if (selectedStatus && isColumnCollapsed(selectedStatus)) uiStore.setSectionCollapsed(selectedStatus, false)
+    await nextTick()
+    if (revision !== geometryRevision) return
+    for (const anchor of anchors) {
+      const tasks = tasksByStatus.value[anchor.status]
+      const selected = anchor.status === selectedStatus
+      const index = tasks.findIndex((task) => task.id === (selected ? selectedId : anchor.taskId))
+      if (index < 0 || !anchor.list.isConnected) continue
+      const top = anchor.track.offsetTop + index * cardStep.value + (selected ? cardHeight.value / 2 - anchor.list.clientHeight / 2 : anchor.offset)
+      anchor.list.scrollTop = clamp(top, 0, Math.max(0, anchor.list.scrollHeight - anchor.list.clientHeight))
+      anchor.list.dispatchEvent(new Event("scroll"))
+      if (selected)
+        anchor.list.closest<HTMLElement>("[data-column-status]")?.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})
+    }
+  })
+
   onScopeDispose(() => {
+    geometryRevision += 1
     stopPress()
     window.removeEventListener("click", swallowClick, {capture: true})
   })
@@ -347,6 +385,6 @@ function resolveMoveTarget(items: Task[], newIndex: number): {targetTaskId: Task
   return {targetTaskId, position}
 }
 
-function getColumnInsertIndex(offsetY: number, count: number): number {
-  return clamp(Math.floor(offsetY / BOARD_CARD_STEP), 0, count)
+function getColumnInsertIndex(offsetY: number, count: number, cardStep: number): number {
+  return clamp(Math.floor(offsetY / cardStep), 0, count)
 }
diff --git a/apps/desktop/src/renderer/src/composables/useBoardCardGeometry.ts b/apps/desktop/src/renderer/src/composables/useBoardCardGeometry.ts
index 3d71415b..8e5524f7 100644
--- a/apps/desktop/src/renderer/src/composables/useBoardCardGeometry.ts
+++ b/apps/desktop/src/renderer/src/composables/useBoardCardGeometry.ts
@@ -20,5 +20,5 @@ export function useBoardCardGeometry() {
   const cardHeight = computed(() => (isCompact.value ? (COMPACT_BOARD_CARD_HEIGHT * (fontSizePx[fontSize.value] ?? 15)) / 15 : BOARD_CARD_HEIGHT))
   const cardStep = computed(() => cardHeight.value + BOARD_CARD_GAP)
 
-  return {taskView, isCompact, cardHeight, cardStep}
+  return {taskView, fontSize, isCompact, cardHeight, cardStep}
 }
diff --git a/apps/desktop/src/renderer/src/ui/modules/TaskBoard/composables/useVirtualColumn.ts b/apps/desktop/src/renderer/src/ui/modules/TaskBoard/composables/useVirtualColumn.ts
index 1d3c427d..48bd79c9 100644
--- a/apps/desktop/src/renderer/src/ui/modules/TaskBoard/composables/useVirtualColumn.ts
+++ b/apps/desktop/src/renderer/src/ui/modules/TaskBoard/composables/useVirtualColumn.ts
@@ -1,14 +1,14 @@
-import {computed, shallowRef, toValue} from "vue"
+import {computed, shallowRef, toValue, watch} from "vue"
 import {useEventListener} from "@vueuse/core"
 
 import {useBatchedResizeObserver} from "@/composables/useBatchedResizeObserver"
-import {BOARD_CARD_HEIGHT, BOARD_CARD_STEP} from "@/constants/ui"
+import {useBoardCardGeometry} from "@/composables/useBoardCardGeometry"
 
 import type {ComputedRef, MaybeRefOrGetter, ShallowRef} from "vue"
 
 type ColumnRange = {start: number; end: number}
 
-/** A column renders only the rows this range covers; it needs no measurement, because every card is `BOARD_CARD_HEIGHT` tall. */
+/** A column renders only the rows this range covers, using the current shared card dimensions. */
 export function useVirtualColumn(
   listRef: Readonly<ShallowRef<HTMLElement | null>>,
   trackRef: Readonly<ShallowRef<HTMLElement | null>>,
@@ -17,22 +17,31 @@ export function useVirtualColumn(
   const scrollTop = shallowRef(0)
   const viewportHeight = shallowRef(0)
   const trackTop = shallowRef(0)
+  const {fontSize, cardHeight, cardStep} = useBoardCardGeometry()
 
   const range = computed<ColumnRange>((previous) => {
     const top = scrollTop.value - trackTop.value
-    const start = Math.max(0, Math.floor(top / BOARD_CARD_STEP) - 3)
-    const end = Math.min(toValue(count), Math.ceil((top + viewportHeight.value) / BOARD_CARD_STEP) + 3)
+    const start = Math.min(Math.max(0, toValue(count) - 1), Math.max(0, Math.floor(top / cardStep.value) - 3))
+    const end = Math.min(toValue(count), Math.ceil((top + viewportHeight.value) / cardStep.value) + 3)
 
     return previous?.start === start && previous.end === end ? previous : {start, end}
   })
 
   const trackHeight = computed(() => {
     const total = toValue(count)
-    return total > 0 ? total * BOARD_CARD_STEP - (BOARD_CARD_STEP - BOARD_CARD_HEIGHT) : 0
+    return total > 0 ? total * cardStep.value - (cardStep.value - cardHeight.value) : 0
   })
 
   useEventListener(listRef, "scroll", onScroll, {passive: true})
   useBatchedResizeObserver([listRef], {read: readViewport, write: applyViewport})
+  watch(
+    [cardStep, fontSize],
+    () => {
+      applyViewport(readViewport())
+      onScroll()
+    },
+    {flush: "post"},
+  )
 
   function onScroll() {
     scrollTop.value = listRef.value?.scrollTop ?? 0
diff --git a/apps/desktop/src/renderer/src/ui/modules/TaskBoard/{fragments}/TaskColumn.vue b/apps/desktop/src/renderer/src/ui/modules/TaskBoard/{fragments}/TaskColumn.vue
index a204d4d3..82144c3a 100644
--- a/apps/desktop/src/renderer/src/ui/modules/TaskBoard/{fragments}/TaskColumn.vue
+++ b/apps/desktop/src/renderer/src/ui/modules/TaskBoard/{fragments}/TaskColumn.vue
@@ -2,7 +2,8 @@
 import {computed, useTemplateRef} from "vue"
 
 import {useTaskColumns} from "@/composables/tasks/useTaskColumns"
-import {BOARD_CARD_HEIGHT, BOARD_CARD_STEP, TASK_COLUMNS} from "@/constants/ui"
+import {useBoardCardGeometry} from "@/composables/useBoardCardGeometry"
+import {TASK_COLUMNS} from "@/constants/ui"
 import BaseIcon from "@/ui/base/BaseIcon"
 import {cn} from "@/utils/ui/tailwindcss"
 import {useVirtualColumn} from "../composables/useVirtualColumn"
@@ -18,6 +19,7 @@ const listRef = useTemplateRef<HTMLElement>("list")
 const trackRef = useTemplateRef<HTMLElement>("track")
 
 const columns = useTaskColumns()
+const {cardHeight, cardStep} = useBoardCardGeometry()
 
 const column = computed(() => TASK_COLUMNS.find((s) => s.status === props.status)!)
 const tasksCount = computed(() => columns.tasksByStatus.value[props.status].length)
@@ -93,7 +95,7 @@ function getListClasses(isCollapsed: boolean) {
     <button v-else type="button" aria-expanded="true" :class="getHeaderClasses(column.titleClass)" @click="onToggle">
       <span class="flex items-center gap-2">
         <BaseIcon :name="column.icon" class="size-4" />
-        <span class="text-sm font-medium tracking-wide uppercase">{{ column.label }}</span>
+        <span class="text-sm font-medium uppercase tracking-wide">{{ column.label }}</span>
       </span>
       <span :class="getCounterClasses(column.counterClass)">
         {{ tasksCount }}
@@ -107,7 +109,7 @@ function getListClasses(isCollapsed: boolean) {
             v-if="item.kind === 'task'"
             data-task-card
             :class="getItemClasses(columns.isDragging.value)"
-            :style="{transform: `translateY(${(range.start + offset) * BOARD_CARD_STEP}px)`}"
+            :style="{transform: `translateY(${(range.start + offset) * cardStep}px)`}"
             @pointerdown="columns.onCardPointerDown($event, item.task)"
             @dragstart="onCardDragStart"
           >
@@ -115,8 +117,8 @@ function getListClasses(isCollapsed: boolean) {
           </div>
           <div
             v-else
-            class="border-base-content/38 bg-base-300/40 absolute inset-x-1.5 top-0 rounded-[0.9rem] border border-dashed transition-transform duration-140"
-            :style="{height: `${BOARD_CARD_HEIGHT}px`, transform: `translateY(${(range.start + offset) * BOARD_CARD_STEP}px)`}"
+            class="border-base-content/38 bg-base-300/40 duration-140 absolute inset-x-1.5 top-0 rounded-[0.9rem] border border-dashed transition-transform"
+            :style="{height: `${cardHeight}px`, transform: `translateY(${(range.start + offset) * cardStep}px)`}"
           />
         </template>
       </div>
@@ -134,9 +136,9 @@ function getListClasses(isCollapsed: boolean) {
 
     <template v-if="!collapsed">
       <div
-        class="from-base-100 via-base-100/60 pointer-events-none absolute inset-x-0 top-0 z-[5] h-26 bg-linear-to-b from-35% via-70% to-transparent"
+        class="from-base-100 via-base-100/60 h-26 bg-linear-to-b pointer-events-none absolute inset-x-0 top-0 z-[5] from-35% via-70% to-transparent"
       />
-      <div class="to-base-100/70 pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-12 bg-linear-to-b from-transparent" />
+      <div class="to-base-100/70 bg-linear-to-b pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-12 from-transparent" />
     </template>
   </div>
 </template>
diff --git a/apps/desktop/tests/helpers/boardDrag.ts b/apps/desktop/tests/helpers/boardDrag.ts
index 1c21b4cb..0e77491c 100644
--- a/apps/desktop/tests/helpers/boardDrag.ts
+++ b/apps/desktop/tests/helpers/boardDrag.ts
@@ -33,11 +33,11 @@ export function makeColumn(status, ids, overrides = {}) {
   return ids.map((id, index) => makeTask(id, {status, orderIndex: (index + 1) * 1024, ...overrides}))
 }
 
-export function yForIndex(index) {
-  return TRACK_TOP + index * 206 + 50
+export function yForIndex(index, step = 206) {
+  return TRACK_TOP + index * step + 50
 }
 
-export async function mountBoardDrag(seed, {frame = "day"} = {}) {
+export async function mountBoardDrag(seed, {frame = "day", taskView = "regular", fontSize = "normal"} = {}) {
   const {useTasksStore} = await import("../../src/renderer/src/stores/tasks/tasks.store")
   const {useDragDropStore} = await import("../../src/renderer/src/stores/dragDrop.store")
   const {useSettingsStore} = await import("../../src/renderer/src/stores/settings.store")
@@ -48,7 +48,9 @@ export async function mountBoardDrag(seed, {frame = "day"} = {}) {
 
   let hit = null
 
-  useSettingsStore().settings = {branch: {activeId: "main"}, layout: {sectionsCollapsed: {}}}
+  const settings = useSettingsStore()
+  await new Promise((resolve) => setTimeout(resolve))
+  settings.settings = {branch: {activeId: "main"}, layout: {sectionsCollapsed: {}}, appearance: {taskView}, typography: {fontSize}}
   useMilestonesStore().milestones = [
     {
       id: "milestone-1",
@@ -152,6 +154,7 @@ export async function mountBoardDrag(seed, {frame = "day"} = {}) {
 
   return {
     tasks,
+    settings,
     drag: useDragDropStore(),
     ui: useUIStore(),
     columns,
diff --git a/apps/desktop/tests/renderer/composables/useTaskColumns.drag.test.ts b/apps/desktop/tests/renderer/composables/useTaskColumns.drag.test.ts
index 7f5a2739..5d397e10 100644
--- a/apps/desktop/tests/renderer/composables/useTaskColumns.drag.test.ts
+++ b/apps/desktop/tests/renderer/composables/useTaskColumns.drag.test.ts
@@ -249,6 +249,29 @@ describe("useTaskColumns — the board's pointer drag", () => {
   })
 
   describe("TC-8 a reorder in the day frame", () => {
+    it.each([
+      ["small", 99.6],
+      ["normal", 114],
+      ["large", 128.4],
+    ])("targets compact drop slots at %s text size", async (fontSize, step) => {
+      const {tasks, columns, startDrag, moveOver, release, find} = await setupBoard(makeColumn("active", ["A", "B", "C", "D"]), {
+        taskView: "compact",
+        fontSize,
+      })
+      startDrag(find("B"), yForIndex(1, step))
+      moveOver("active", yForIndex(2, step))
+      expect(itemsOf(columns.columnItems.value.active)).toEqual(["A", "C", "placeholder", "D"])
+      release(yForIndex(2, step))
+      expect(tasks.moveTaskByOrder).toHaveBeenCalledWith({
+        taskId: "B",
+        targetStatus: "active",
+        targetTaskId: "D",
+        position: "before",
+        activeDate: TODAY,
+        acrossProjects: false,
+      })
+    })
+
     it.each([
       [2, {targetTaskId: "D", position: "before"}],
       [3, {targetTaskId: null, position: "after"}],
@@ -421,6 +444,37 @@ describe("useTaskColumns — the board's pointer drag", () => {
   })
 
   describe("TC-12 a drag that ends without a drop", () => {
+    it.each([
+      ["view", {appearance: {taskView: "compact"}}, {}],
+      ["text size", {typography: {fontSize: "large"}}, {taskView: "compact"}],
+      ["regular text size", {typography: {fontSize: "large"}}, {}],
+    ])("cancels an uncommitted drag when %s changes without writing a task", async (_, patch, options) => {
+      const {tasks, settings, drag, columns, startDrag, moveOver, release, find} = await setupBoard(makeColumn("active", ["A", "B", "C"]), options)
+      startDrag(find("B"), yForIndex(1))
+      moveOver("active", yForIndex(2))
+      settings.settings = {...settings.settings, ...patch}
+      await nextTick()
+      release(yForIndex(2))
+      await settle()
+
+      expect(drag.draggingTaskId).toBeNull()
+      expect(columns.isDragging.value).toBe(false)
+      expect(itemsOf(columns.columnItems.value.active)).toEqual(["A", "B", "C"])
+      expect(tasks.moveTaskByOrder).not.toHaveBeenCalled()
+      expect(document.body.style.userSelect).not.toBe("none")
+    })
+
+    it("cancels a pending press on a view change before it can become a drag", async () => {
+      const {settings, tasks, drag, press, moveOver, release, find} = await setupBoard(makeColumn("active", ["A", "B", "C"]))
+      press(find("B"), yForIndex(1))
+      settings.settings.appearance.taskView = "compact"
+      await nextTick()
+      moveOver("active", yForIndex(2, 114))
+      release(yForIndex(2, 114))
+      expect(drag.draggingTaskId).toBeNull()
+      expect(tasks.moveTaskByOrder).not.toHaveBeenCalled()
+    })
+
     it.each([
       ["Esc is pressed", () => window.dispatchEvent(new KeyboardEvent("keydown", {key: "Escape", bubbles: true}))],
       [
diff --git a/apps/desktop/tests/renderer/modules/TaskBoard/TaskBoard.test.ts b/apps/desktop/tests/renderer/modules/TaskBoard/TaskBoard.test.ts
index dc7c5a96..2887f588 100644
--- a/apps/desktop/tests/renderer/modules/TaskBoard/TaskBoard.test.ts
+++ b/apps/desktop/tests/renderer/modules/TaskBoard/TaskBoard.test.ts
@@ -88,7 +88,7 @@ describe("TaskBoard", () => {
     vi.restoreAllMocks()
   })
 
-  async function setup({sectionsCollapsed = {}} = {}) {
+  async function setup({sectionsCollapsed = {}, taskView = "regular", fontSize = "normal"} = {}) {
     const {default: TaskBoard} = await import("../../../../src/renderer/src/ui/modules/TaskBoard")
     const {default: NoTasksPlaceholder} = await import("../../../../src/renderer/src/ui/modules/TaskBoard/{fragments}/NoTasksPlaceholder.vue")
     const {useTasksStore} = await import("../../../../src/renderer/src/stores/tasks/tasks.store")
@@ -98,7 +98,7 @@ describe("TaskBoard", () => {
 
     const settings = useSettingsStore()
     await new Promise((resolve) => setTimeout(resolve))
-    settings.settings = {branch: {activeId: "main"}, layout: {sectionsCollapsed}}
+    settings.settings = {branch: {activeId: "main"}, layout: {sectionsCollapsed}, appearance: {taskView}, typography: {fontSize}}
 
     function mountBoard() {
       wrapper = mount(TaskBoard, {attachTo: document.body, global: {directives: {tooltip: {}}}})
@@ -133,10 +133,132 @@ describe("TaskBoard", () => {
       .sort((a, b) => a.index - b.index)
   }
 
-  function onGrid(indices) {
-    return indices.map((index) => ({index, transform: `translateY(${index * 206}px)`}))
+  function onGrid(indices, step = 206) {
+    return indices.map((index) => ({index, transform: `translateY(${index * step}px)`}))
   }
 
+  it.each([
+    ["small", 99.6],
+    ["normal", 114],
+    ["large", 128.4],
+  ])("keeps compact virtual rows, track and gaps consistent at %s text size", async (fontSize, step) => {
+    const {mountBoard, tasks} = await setup({taskView: "compact", fontSize})
+    tasks.activeDay = DateTime.now().toISODate()
+    tasks.tasks = makeTasks(221)
+    const board = mountBoard()
+    await nextTick()
+    const {list, track} = viewport(board, "active", {clientHeight: 700, offsetTop: 100})
+    await settle()
+    expect(parseFloat(track.style.height)).toBeCloseTo(221 * step - 6)
+    list.scrollTop = 100 + 100 * step
+    list.dispatchEvent(new Event("scroll"))
+    await settle()
+    expect(placedCards(board, "active").map((card) => card.index)).toEqual(range(97, 100 + Math.ceil(700 / step) + 3))
+    for (const card of cardsIn(board, "active")) {
+      const index = Number(card.querySelector("[id^='task-']").id.slice(5))
+      expect(parseFloat(card.style.transform.slice(11))).toBeCloseTo(index * step)
+      expect(parseFloat(card.querySelector("[id^='task-']").style.height)).toBeCloseTo(step - 6)
+    }
+  })
+
+  it.each([false, true])(
+    "preserves the first visible task and its offset through density switches, including bottom clamping (selection outside board: %s)",
+    async (outsideSelection) => {
+      const {mountBoard, tasks, settings} = await setup()
+      const {useTaskEditorStore} = await import("../../../../src/renderer/src/stores/task-editor")
+      if (outsideSelection) useTaskEditorStore().editingTaskId = "task-outside-board"
+      tasks.activeDay = DateTime.now().toISODate()
+      tasks.tasks = makeTasks(221)
+      const original = JSON.stringify(tasks.tasks)
+      const board = mountBoard()
+      await nextTick()
+      const {list, track} = viewport(board, "active", {clientHeight: 700, offsetTop: 100})
+      Object.defineProperty(list, "scrollHeight", {configurable: true, get: () => 100 + parseFloat(track.style.height) + 16})
+      await settle()
+      list.scrollTop = 100 + 100 * 206 + 37
+      list.dispatchEvent(new Event("scroll"))
+      await settle()
+      settings.settings.appearance.taskView = "compact"
+      await settle()
+      expect(list.scrollTop).toBe(100 + 100 * 114 + 37)
+      expect(placedCards(board, "active").some((card) => card.index === 100)).toBe(true)
+      settings.settings.appearance.taskView = "regular"
+      await settle()
+      expect(list.scrollTop).toBe(100 + 100 * 206 + 37)
+      list.scrollTop = list.scrollHeight - 700
+      list.dispatchEvent(new Event("scroll"))
+      await settle()
+      settings.settings.appearance.taskView = "compact"
+      await settle()
+      expect(list.scrollTop).toBe(100 + 221 * 114 - 6 + 16 - 700)
+      expect(placedCards(board, "active").at(-1).index).toBe(220)
+      expect(JSON.stringify(tasks.tasks)).toBe(original)
+    },
+  )
+
+  it("keeps the same compact task visible when text size changes", async () => {
+    const {mountBoard, tasks, settings} = await setup({taskView: "compact"})
+    tasks.activeDay = DateTime.now().toISODate()
+    tasks.tasks = makeTasks(221)
+    const board = mountBoard()
+    await nextTick()
+    const {list, track} = viewport(board, "active", {clientHeight: 700, offsetTop: 100})
+    Object.defineProperty(list, "scrollHeight", {configurable: true, get: () => 100 + parseFloat(track.style.height) + 16})
+    list.scrollTop = 100 + 100 * 114 + 37
+    list.dispatchEvent(new Event("scroll"))
+    await settle()
+    settings.settings.typography.fontSize = "large"
+    await settle()
+    expect(list.scrollTop).toBeCloseTo(100 + 100 * 128.4 + 37)
+    expect(placedCards(board, "active").some((card) => card.index === 100)).toBe(true)
+  })
+
+  it("uses compact dimensions for a drag placeholder", async () => {
+    const {mountBoard, tasks} = await setup({taskView: "compact"})
+    tasks.activeDay = DateTime.now().toISODate()
+    tasks.tasks = makeTasks(4)
+    const board = mountBoard()
+    await nextTick()
+    const {track} = viewport(board, "active", {clientHeight: 700, offsetTop: 100})
+    vi.spyOn(track, "getBoundingClientRect").mockReturnValue({top: 100})
+    vi.spyOn(document, "elementFromPoint").mockReturnValue(track)
+    await settle()
+    board.element
+      .querySelector("#task-1")
+      .dispatchEvent(new PointerEvent("pointerdown", {bubbles: true, button: 0, clientX: 50, clientY: 264, pointerId: 1}))
+    window.dispatchEvent(new PointerEvent("pointermove", {bubbles: true, clientX: 50, clientY: 274, pointerId: 1}))
+    await settle()
+    const gaps = Array.from(track.children).filter((item) => !item.hasAttribute("data-task-card"))
+    expect(gaps).toHaveLength(1)
+    expect(gaps[0].style.height).toBe("108px")
+    expect(gaps[0].style.transform).toBe("translateY(114px)")
+    expect(track.style.height).toBe("450px")
+    window.dispatchEvent(new PointerEvent("pointercancel", {bubbles: true, pointerId: 1}))
+  })
+
+  it("reveals the selected card on a switch while preserving its unsaved editor draft", async () => {
+    const {mountBoard, tasks, settings} = await setup({sectionsCollapsed: {done: true}})
+    const {useTaskEditorStore} = await import("../../../../src/renderer/src/stores/task-editor")
+    const editor = useTaskEditorStore()
+    tasks.activeDay = DateTime.now().toISODate()
+    tasks.tasks = makeTasks(221, {status: "done"})
+    await editor.open("task-200")
+    editor.patch({content: "Unsaved text"})
+    const board = mountBoard()
+    await nextTick()
+    const {list, track} = viewport(board, "done", {clientHeight: 700, offsetTop: 100})
+    Object.defineProperty(list, "scrollHeight", {configurable: true, get: () => 100 + parseFloat(track.style.height) + 16})
+    columnOf(board, "done").scrollIntoView = vi.fn()
+    await settle()
+    settings.settings.appearance.taskView = "compact"
+    await settle()
+    expect(list.scrollTop).toBe(100 + 200 * 114 + 54 - 350)
+    expect(document.getElementById("task-200")).not.toBeNull()
+    expect(editor.editingTaskId).toBe("task-200")
+    expect(editor.draft.content).toBe("Unsaved text")
+    expect(editor.isDirty).toBe(true)
+  })
+
   it("keeps the columns mounted while a drag is in flight, even when the dragged task was the last one on the board", async () => {
     const {NoTasksPlaceholder, mountBoard, tasks, drag} = await setup()
     tasks.activeDay = DateTime.now().toISODate()

From e8b1d459f9d64eaa05d801488d9643001221ade3 Mon Sep 17 00:00:00 2001
From: AiraAgent <305439133+AiraAgent@users.noreply.github.com>
Date: Fri, 9 Oct 2026 18:33:29 +1100
Subject: [PATCH 3/3] fix(desktop): keep density scroll anchor visible

---
 .../src/composables/tasks/useTaskColumns.ts   |  3 ++-
 .../{fragments}/TaskCard/TaskCard.vue         |  4 +--
 .../modules/TaskBoard/TaskBoard.test.ts       | 27 +++++++++++++++++++
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/src/renderer/src/composables/tasks/useTaskColumns.ts b/apps/desktop/src/renderer/src/composables/tasks/useTaskColumns.ts
index 737f090b..df51d439 100644
--- a/apps/desktop/src/renderer/src/composables/tasks/useTaskColumns.ts
+++ b/apps/desktop/src/renderer/src/composables/tasks/useTaskColumns.ts
@@ -351,7 +351,8 @@ export const useTaskColumns = createSharedComposable(() => {
       const selected = anchor.status === selectedStatus
       const index = tasks.findIndex((task) => task.id === (selected ? selectedId : anchor.taskId))
       if (index < 0 || !anchor.list.isConnected) continue
-      const top = anchor.track.offsetTop + index * cardStep.value + (selected ? cardHeight.value / 2 - anchor.list.clientHeight / 2 : anchor.offset)
+      const offset = selected ? cardHeight.value / 2 - anchor.list.clientHeight / 2 : Math.min(anchor.offset, cardHeight.value - 1)
+      const top = anchor.track.offsetTop + index * cardStep.value + offset
       anchor.list.scrollTop = clamp(top, 0, Math.max(0, anchor.list.scrollHeight - anchor.list.clientHeight))
       anchor.list.dispatchEvent(new Event("scroll"))
       if (selected)
diff --git a/apps/desktop/src/renderer/src/ui/modules/TaskBoard/{fragments}/TaskCard/TaskCard.vue b/apps/desktop/src/renderer/src/ui/modules/TaskBoard/{fragments}/TaskCard/TaskCard.vue
index 4a3dc32a..f9403290 100644
--- a/apps/desktop/src/renderer/src/ui/modules/TaskBoard/{fragments}/TaskCard/TaskCard.vue
+++ b/apps/desktop/src/renderer/src/ui/modules/TaskBoard/{fragments}/TaskCard/TaskCard.vue
@@ -356,9 +356,9 @@ async function onLinkTask(side: keyof TaskRelationSets, taskId: Task["id"]) {
   -webkit-line-clamp: 2;
   overflow: hidden;
   margin: 0;
-  font-size: 0.875rem;
+  font-size: 0.9rem;
   font-weight: 400;
-  line-height: 1.5;
+  line-height: 1.45;
 }
 
 .board-card-compact .board-card-footer {
diff --git a/apps/desktop/tests/renderer/modules/TaskBoard/TaskBoard.test.ts b/apps/desktop/tests/renderer/modules/TaskBoard/TaskBoard.test.ts
index 2887f588..1e34fbaf 100644
--- a/apps/desktop/tests/renderer/modules/TaskBoard/TaskBoard.test.ts
+++ b/apps/desktop/tests/renderer/modules/TaskBoard/TaskBoard.test.ts
@@ -196,6 +196,33 @@ describe("TaskBoard", () => {
     },
   )
 
+  it("keeps the first visible task in view when its regular offset exceeds the compact card height", async () => {
+    const {mountBoard, tasks, settings} = await setup()
+    tasks.activeDay = DateTime.now().toISODate()
+    tasks.tasks = makeTasks(221)
+    const board = mountBoard()
+    await nextTick()
+    const {list, track} = viewport(board, "active", {clientHeight: 700, offsetTop: 100})
+    Object.defineProperty(list, "scrollHeight", {configurable: true, get: () => 100 + parseFloat(track.style.height) + 16})
+    await settle()
+    list.scrollTop = 20820
+    list.dispatchEvent(new Event("scroll"))
+    await settle()
+    settings.settings.appearance.taskView = "compact"
+    await settle()
+    expect(list.scrollTop).toBe(11607)
+    const firstVisible = cardsIn(board, "active").find((card) => {
+      const top = track.offsetTop + parseFloat(card.style.transform.slice(11))
+      const height = parseFloat(card.querySelector("[id^='task-']").style.height)
+      return top + height > list.scrollTop && top < list.scrollTop + list.clientHeight
+    })
+    expect(firstVisible.querySelector("[id^='task-']").id).toBe("task-100")
+    expect(11500 + 108 - list.scrollTop).toBe(1)
+    settings.settings.appearance.taskView = "regular"
+    await settle()
+    expect(list.scrollTop).toBe(20807)
+  })
+
   it("keeps the same compact task visible when text size changes", async () => {
     const {mountBoard, tasks, settings} = await setup({taskView: "compact"})
     tasks.activeDay = DateTime.now().toISODate()