diff --git a/docs/USER_GUIDE.md b/docs/USER_GUIDE.md
index 1b842518..1443f041 100644
--- a/docs/USER_GUIDE.md
+++ b/docs/USER_GUIDE.md
@@ -335,11 +335,11 @@ The Tracked tab lets you pin issues and PRs into a personal TODO list that you c
 
 **Pinning items:** On the Issues and Pull Requests tabs, hover over any row to reveal a bookmark icon. Click it to pin the item to your tracked list. Click it again to unpin. The bookmark appears filled and highlighted on tracked items.
 
-**Tracked tab:** Shows your pinned items in a flat list (not grouped by repo). Each item displays a type badge (Issue or PR) and uses live data from the poll cycle — statuses, check results, and labels stay current. Items whose repo is no longer being polled show a minimal fallback row with stored metadata.
+**Tracked tab:** Shows your pinned items in a flat list (not grouped by repo). Each item shows a repo badge, a type badge (Issue or PR), and uses live data from the poll cycle — labels, comments, and timestamps stay current. Tracked PRs display the same metadata as the Pull Requests tab: review status, size badge, check status dot, draft indicator, and role badge. Tracked issues show a role badge (author/assignee). In compact density, the repo badge abbreviates to just the repo name (hover for the full owner/repo). Items whose repo is no longer being polled show a minimal fallback row with stored metadata. PRs being hot-polled show a shimmer animation and a spinner in the left margin.
 
 **Reordering:** Use the chevron buttons on the left side of each row to move items up or down. Items slide smoothly into their new position.
 
-**Auto-removal:** When a tracked issue is closed or a tracked PR is merged, it is automatically removed from the list. Closure is detected by absence from the `is:open` poll results. For PRs detected as closed by the hot poll, removal happens within seconds.
+**Auto-removal:** When a tracked issue is closed or a tracked PR is merged, it is automatically removed from the list. Closure is detected by absence from the `is:open` poll results. For PRs detected as closed by the hot poll, removal happens within seconds. Auto-removal is suspended when the API returns errors (e.g., rate limiting) to prevent false pruning.
 
 **Relationship to other features:** The Tracked tab bypasses the org/repo filter — it always shows all your pinned items regardless of which repo filter is active. Ignoring an item from the Issues or Pull Requests tab also removes it from the tracked list. The tracked list is preserved when tracking is disabled and restored when re-enabled.
 
diff --git a/docs/dashboard-screenshot.png b/docs/dashboard-screenshot.png
index ad5ef9f0..6808a261 100644
Binary files a/docs/dashboard-screenshot.png and b/docs/dashboard-screenshot.png differ
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 39731bd8..23a7eb2f 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -147,6 +147,10 @@ export default function App() {
     document.documentElement.setAttribute("data-theme", resolveTheme(config.theme));
   });
 
+  createEffect(() => {
+    document.documentElement.dataset.density = config.viewDensity;
+  });
+
   onMount(() => {
     // Listen for system theme changes so "auto" reacts immediately
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
diff --git a/src/app/components/dashboard/ActionsTab.tsx b/src/app/components/dashboard/ActionsTab.tsx
index a5b6987d..a9fe8095 100644
--- a/src/app/components/dashboard/ActionsTab.tsx
+++ b/src/app/components/dashboard/ActionsTab.tsx
@@ -1,7 +1,6 @@
 import { createEffect, createMemo, For, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 import type { WorkflowRun } from "../../services/api";
-import { config } from "../../stores/config";
 import { viewState, setViewState, setTabFilter, resetAllTabFilters, ignoreItem, unignoreItem, toggleExpandedRepo, setAllExpanded, pruneExpandedRepos, pruneLockedRepos, type ActionsFilterField } from "../../stores/view";
 import WorkflowSummaryCard from "./WorkflowSummaryCard";
 import IgnoreBadge from "./IgnoreBadge";
@@ -221,8 +220,8 @@ export default function ActionsTab(props: ActionsTabProps) {
   return (
     <div class="divide-y divide-base-300">
       {/* Toolbar */}
-      <div class="flex items-start gap-3 px-4 py-2 border-b border-base-300 bg-base-100">
-        <div class="flex flex-wrap items-center gap-3 min-w-0 flex-1">
+      <div class="flex items-start px-4 py-2 gap-3 compact:py-0.5 compact:gap-2 border-b border-base-300 bg-base-100">
+        <div class="flex flex-wrap items-center min-w-0 flex-1 gap-3 compact:gap-2">
           <label class="flex items-center gap-1.5 text-sm text-base-content/70 cursor-pointer select-none">
             <input
               type="checkbox"
@@ -299,7 +298,7 @@ export default function ActionsTab(props: ActionsTabProps) {
                   <button
                     onClick={() => toggleExpandedRepo("actions", repoGroup.repoFullName)}
                     aria-expanded={isExpanded()}
-                    class="flex-1 flex items-center gap-2 px-4 py-2.5 text-left text-sm font-semibold text-base-content"
+                    class="flex-1 flex items-center gap-2 px-4 py-2.5 compact:py-1.5 text-left text-sm font-semibold text-base-content"
                   >
                     <ChevronIcon size="md" rotated={!isExpanded()} />
                     {repoGroup.repoFullName}
@@ -356,7 +355,6 @@ export default function ActionsTab(props: ActionsTabProps) {
                               expanded={isWfExpanded()}
                               onToggle={() => toggleWorkflow(wfKey)}
                               onIgnoreRun={handleIgnore}
-                              density={config.viewDensity}
                               refreshTick={props.refreshTick}
                               hotPollingRunIds={props.hotPollingRunIds}
                               flashingRunIds={flashingRunIds()}
diff --git a/src/app/components/dashboard/DashboardPage.tsx b/src/app/components/dashboard/DashboardPage.tsx
index e2daa5a1..bfc1a1c6 100644
--- a/src/app/components/dashboard/DashboardPage.tsx
+++ b/src/app/components/dashboard/DashboardPage.tsx
@@ -98,6 +98,8 @@ function resetDashboardData(): void {
 const [hasFetchedFresh, setHasFetchedFresh] = createSignal(false);
 export function _resetHasFetchedFresh(value = false) { setHasFetchedFresh(value); }
 
+const [lastFetchHadErrors, setLastFetchHadErrors] = createSignal(false);
+
 // Clear dashboard data and stop polling on logout to prevent cross-user data leakage
 onAuthCleared(() => {
   resetDashboardData();
@@ -144,6 +146,17 @@ async function pollFetch(): Promise<DashboardData> {
     });
     // When notifications gate says nothing changed, keep existing data
     if (!data.skipped) {
+      const hasErrors = data.errors.length > 0;
+      setLastFetchHadErrors(hasErrors);
+
+      // When the fetch had errors and returned no data, keep stale dashboard
+      // visible rather than wiping it to empty. This prevents the summary strip,
+      // tab counts, and tracked items from vanishing during rate limiting.
+      if (hasErrors && data.issues.length === 0 && data.pullRequests.length === 0 && data.workflowRuns.length === 0) {
+        setDashboardData("loading", false);
+        return data;
+      }
+
       setHasFetchedFresh(true);
       const now = new Date();
 
@@ -254,6 +267,22 @@ export default function DashboardPage() {
   const [hotPollingPRIds, setHotPollingPRIds] = createSignal<ReadonlySet<number>>(new Set());
   const [hotPollingRunIds, setHotPollingRunIds] = createSignal<ReadonlySet<number>>(new Set());
 
+  if (import.meta.env.DEV) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).__debug = {
+      forceHotPoll: () => {
+        const allPrIds = new Set<number>(dashboardData.pullRequests.map(pr => pr.id));
+        setHotPollingPRIds(allPrIds);
+        console.info(`[debug] Shimmer ON for ${allPrIds.size} PRs. Call __debug.clearHotPoll() to stop.`);
+      },
+      clearHotPoll: () => {
+        setHotPollingPRIds(new Set<number>());
+        setHotPollingRunIds(new Set<number>());
+        console.info("[debug] Shimmer OFF");
+      },
+    };
+  }
+
   function resolveInitialTab(): TabId {
     const tab = config.rememberLastTab ? viewState.lastActiveTab : config.defaultTab;
     if (tab === "tracked" && !config.enableTracking) return "issues";
@@ -283,6 +312,9 @@ export default function DashboardPage() {
     const issues = dashboardData.issues;
     const prs = dashboardData.pullRequests;
     if (!config.enableTracking || viewState.trackedItems.length === 0 || !hasFetchedFresh()) return;
+    // Never prune when the last fetch had errors (rate limit, network failure, etc.)
+    // — the missing items are likely just unfetched, not closed/merged.
+    if (lastFetchHadErrors()) return;
 
     const polledRepos = new Set([
       ...config.selectedRepos.map((r) => r.fullName),
@@ -506,6 +538,8 @@ export default function DashboardPage() {
                   issues={dashboardData.issues}
                   pullRequests={dashboardData.pullRequests}
                   refreshTick={refreshTick()}
+                  userLogin={userLogin()}
+                  hotPollingPRIds={hotPollingPRIds()}
                 />
               </Match>
               <Match when={activeTab() === "actions"}>
diff --git a/src/app/components/dashboard/IgnoreBadge.tsx b/src/app/components/dashboard/IgnoreBadge.tsx
index cc5a44aa..48b16d06 100644
--- a/src/app/components/dashboard/IgnoreBadge.tsx
+++ b/src/app/components/dashboard/IgnoreBadge.tsx
@@ -47,16 +47,16 @@ export default function IgnoreBadge(props: IgnoreBadgeProps) {
         <Tooltip content={`${props.items.length} ignored item${props.items.length === 1 ? "" : "s"}`}>
           <button
             onClick={() => setOpen((v) => !v)}
-            class="btn btn-ghost btn-sm relative"
+            class="btn btn-ghost btn-sm compact:btn-xs relative"
             aria-haspopup="true"
             aria-expanded={open()}
             aria-label={`${props.items.length} ignored items`}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 compact:h-3.5 compact:w-3.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
               <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
               <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
             </svg>
-            <span class="badge badge-neutral badge-xs absolute -top-1 -right-1">{props.items.length}</span>
+            <span class="badge badge-neutral badge-xs absolute -top-1 -right-1 compact:text-[8px] compact:-top-0.5 compact:-right-0.5 compact:px-0.5 compact:min-w-3 compact:h-3">{props.items.length}</span>
           </button>
         </Tooltip>
 
diff --git a/src/app/components/dashboard/IssuesTab.tsx b/src/app/components/dashboard/IssuesTab.tsx
index a0c5f451..ef7e9a4e 100644
--- a/src/app/components/dashboard/IssuesTab.tsx
+++ b/src/app/components/dashboard/IssuesTab.tsx
@@ -255,8 +255,8 @@ export default function IssuesTab(props: IssuesTabProps) {
   return (
     <div class="flex flex-col h-full">
       {/* Filter chips + ignore badge toolbar */}
-      <div class="flex items-start gap-3 px-4 py-2 border-b border-base-300 bg-base-100">
-        <div class="flex flex-wrap items-center gap-3 min-w-0 flex-1">
+      <div class="flex items-start px-4 py-2 gap-3 compact:py-0.5 compact:gap-2 border-b border-base-300 bg-base-100">
+        <div class="flex flex-wrap items-center min-w-0 flex-1 gap-3 compact:gap-2">
           <FilterToolbar
             groups={filterGroups()}
             values={viewState.tabFilters.issues}
@@ -354,7 +354,7 @@ export default function IssuesTab(props: IssuesTabProps) {
                       <button
                         onClick={() => toggleExpandedRepo("issues", repoGroup.repoFullName)}
                         aria-expanded={isExpanded()}
-                        class="flex-1 flex items-center gap-2 px-4 py-2.5 text-left text-sm font-semibold text-base-content"
+                        class="flex-1 flex items-center gap-2 px-4 py-2.5 compact:py-1.5 text-left text-sm font-semibold text-base-content"
                       >
                         <ChevronIcon size="md" rotated={!isExpanded()} />
                         {repoGroup.repoFullName}
@@ -411,7 +411,6 @@ export default function IssuesTab(props: IssuesTabProps) {
                                 onIgnore={() => handleIgnore(issue)}
                                 onTrack={config.enableTracking ? () => handleTrack(issue) : undefined}
                                 isTracked={config.enableTracking ? trackedIssueIds().has(issue.id) : undefined}
-                                density={config.viewDensity}
                                 commentCount={issue.comments}
                                 surfacedByBadge={
                                   props.trackedUsers && props.trackedUsers.length > 0
diff --git a/src/app/components/dashboard/ItemRow.tsx b/src/app/components/dashboard/ItemRow.tsx
index 427409b8..7b1920cb 100644
--- a/src/app/components/dashboard/ItemRow.tsx
+++ b/src/app/components/dashboard/ItemRow.tsx
@@ -1,4 +1,5 @@
 import { createMemo, For, JSX, Show } from "solid-js";
+import { config } from "../../stores/config";
 import { isSafeGitHubUrl } from "../../lib/url";
 import { relativeTime, shortRelativeTime, formatCount } from "../../lib/format";
 import { expandEmoji } from "../../lib/emoji";
@@ -19,7 +20,6 @@ export interface ItemRowProps {
   onIgnore?: () => void;
   onTrack?: () => void;
   isTracked?: boolean;
-  density: "compact" | "comfortable";
   commentCount?: number;
   hideRepo?: boolean;
   surfacedByBadge?: JSX.Element;
@@ -28,7 +28,7 @@ export interface ItemRowProps {
 }
 
 export default function ItemRow(props: ItemRowProps) {
-  const isCompact = () => props.density === "compact";
+  const isCompact = createMemo(() => config.viewDensity === "compact");
   const safeUrl = () => isSafeGitHubUrl(props.url) ? props.url : undefined;
 
   // Static date info — recomputed only when createdAt/updatedAt change (not on tick)
@@ -58,14 +58,35 @@ export default function ItemRow(props: ItemRowProps) {
     return created !== "" && updated !== "" && created !== updated;
   });
 
+  const compactLabelTooltip = createMemo(() => {
+    const parts: string[] = [];
+    if (props.labels.length > 0) {
+      parts.push(`Labels: ${props.labels.map((l) => expandEmoji(l.name)).join(", ")}`);
+    }
+    if ((props.commentCount ?? 0) > 0) {
+      parts.push(`${props.commentCount} comment${props.commentCount === 1 ? "" : "s"}`);
+    }
+    return parts.join(" | ");
+  });
+  const hasCompactTooltip = createMemo(() => isCompact() && compactLabelTooltip() !== "");
+  const hasLabels = createMemo(() => props.labels.length > 0);
+  const repoShortName = createMemo(() => {
+    const slash = props.repo.indexOf("/");
+    return slash >= 0 ? props.repo.slice(slash + 1) : props.repo;
+  });
+
   return (
     <div
-      class={`group relative flex items-start gap-3
+      class={`group relative flex pl-6 pr-4 py-3 items-start gap-3 compact:pl-6 compact:pr-3 compact:py-1 compact:items-center compact:gap-2
         hover:bg-base-200
         transition-colors
-        ${isCompact() ? "px-4 py-2" : "px-4 py-3"}
         ${props.isFlashing ? "animate-flash" : props.isPolling ? "animate-shimmer" : ""}`}
     >
+      {/* Poll spinner — absolute so it never causes reflow */}
+      <Show when={props.isPolling}>
+        <span class="absolute left-1 top-1/2 -translate-y-1/2 loading loading-spinner loading-xs text-base-content/40" />
+      </Show>
+
       {/* Overlay link — covers entire row; interactive children use relative z-10 */}
       <Show when={safeUrl()}>
         {(url) => (
@@ -79,102 +100,168 @@ export default function ItemRow(props: ItemRowProps) {
         )}
       </Show>
 
-      {/* Repo badge */}
+      {/* Repo badge — compact: short name + tooltip; comfortable: full name, no tooltip */}
       <Show when={!props.hideRepo}>
-        <Tooltip content={props.repo} class="shrink-0 relative z-10">
-          <span
-            class={`shrink-0 inline-flex items-center rounded-full font-mono font-medium
-              bg-primary/10 text-primary
-              ${isCompact() ? "text-xs px-2 py-0.5" : "text-xs px-2.5 py-1"}`}
-          >
-            {props.repo}
-          </span>
-        </Tooltip>
+        <Show
+          when={isCompact()}
+          fallback={
+            <span
+              class="shrink-0 inline-flex items-center rounded-full font-mono font-medium
+                bg-primary/10 text-primary text-xs px-2.5 py-1"
+            >
+              {props.repo}
+            </span>
+          }
+        >
+          <Tooltip content={props.repo} class="shrink-0 relative z-10">
+            <span
+              class="shrink-0 inline-flex items-center rounded-full font-mono font-medium
+                bg-primary/10 text-primary text-xs px-2 py-0.5"
+            >
+              {repoShortName()}
+            </span>
+          </Tooltip>
+        </Show>
       </Show>
 
-      {/* Main content */}
-      <div class="flex-1 min-w-0">
-        <div class="flex flex-wrap items-baseline gap-x-2 gap-y-0.5 text-sm">
-          <span class="text-base-content/60 shrink-0">
-            #{props.number}
-          </span>
-          <span class="font-medium text-base-content truncate">
-            {props.title}
-          </span>
-        </div>
+      {/* ── COMPACT LAYOUT: everything on one line ── */}
+      <Show when={isCompact()}>
+        {/* Number */}
+        <span class="text-xs text-base-content/50 shrink-0">#{props.number}</span>
 
-        {/* Labels row */}
-        <Show when={props.labels.length > 0}>
-          <div class={`flex flex-wrap gap-1 ${isCompact() ? "mt-0.5" : "mt-1"}`}>
-            <For each={props.labels}>
-              {(label) => (
-                <span
-                  class={`inline-flex items-center rounded-full text-xs px-2 py-0.5 font-medium ${labelColorClass(label.color)}`}
-                >
-                  {expandEmoji(label.name)}
-                </span>
-              )}
-            </For>
-          </div>
-        </Show>
+        {/* Title — truncated, fills available space */}
+        <span class="font-medium text-sm truncate flex-1 min-w-0">
+          {props.title}
+        </span>
 
-        {/* Additional children slot — z-10 to sit above stretched link */}
+        {/* Children (badges) inline */}
         <Show when={props.children !== undefined}>
-          <div class={`relative z-10 ${isCompact() ? "mt-0.5" : "mt-1"}`}>{props.children}</div>
+          <div class="relative z-10 shrink-0 flex items-center gap-1">{props.children}</div>
         </Show>
-      </div>
 
-      {/* Author + time + comment count */}
-      <div class={`shrink-0 flex flex-col items-end gap-0.5 text-xs text-base-content/60 ${isCompact() ? "" : "pt-0.5"}`}>
-        <span>{props.author}</span>
+        {/* Label + comment count indicator via tooltip */}
+        <Show when={hasCompactTooltip()}>
+          <Tooltip content={compactLabelTooltip()} placement="top" focusable>
+            <span class="relative z-10 inline-flex items-center gap-0.5 text-xs text-base-content/40 cursor-default select-none">
+              <Show when={hasLabels()}>
+                <span class="inline-flex items-center gap-0.5">
+                  <svg class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                  </svg>
+                  {props.labels.length}
+                </span>
+              </Show>
+              <Show when={(props.commentCount ?? 0) > 0}>
+                <span class="inline-flex items-center gap-0.5">
+                  <svg class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7z" clip-rule="evenodd" />
+                  </svg>
+                  {formatCount(props.commentCount!)}
+                </span>
+              </Show>
+            </span>
+          </Tooltip>
+        </Show>
+
+        {/* surfacedByBadge */}
         <Show when={props.surfacedByBadge !== undefined}>
-          <div class="relative z-10">{props.surfacedByBadge}</div>
+          <div class="relative z-10 shrink-0">{props.surfacedByBadge}</div>
         </Show>
-        <span class="inline-flex items-center gap-1 whitespace-nowrap">
-          <Tooltip content={staticDateInfo().createdTitle} class="relative z-10">
-            <time
-              datetime={props.createdAt}
-              aria-label={dateDisplay().createdLabel}
-            >
-              {dateDisplay().created}
-            </time>
-          </Tooltip>
-          <Show when={shouldShowUpdated()}>
-            <span aria-hidden="true">{"\u00B7"}</span>
-            <Tooltip content={staticDateInfo().updatedTitle} class="relative z-10">
+
+        {/* Author + time — compact, inline */}
+        <span class="shrink-0 text-xs text-base-content/50 whitespace-nowrap">
+          {props.author}
+          {" · "}
+          <time datetime={props.updatedAt} title={staticDateInfo().updatedTitle} aria-label={dateDisplay().updatedLabel}>
+            {dateDisplay().updated || dateDisplay().created}
+          </time>
+        </span>
+
+      </Show>
+
+      {/* ── COMFORTABLE LAYOUT: multi-line original ── */}
+      <Show when={!isCompact()}>
+        {/* Main content */}
+        <div class="flex-1 min-w-0">
+          <div class="flex flex-wrap items-baseline gap-x-2 gap-y-0.5 text-sm">
+            <span class="text-base-content/60 shrink-0">
+              #{props.number}
+            </span>
+            <span class="font-medium text-base-content truncate">
+              {props.title}
+            </span>
+          </div>
+
+          {/* Labels row */}
+          <Show when={props.labels.length > 0}>
+            <div class="flex flex-wrap gap-1 mt-1">
+              <For each={props.labels}>
+                {(label) => (
+                  <span
+                    class={`inline-flex items-center rounded-full text-xs px-2 py-0.5 font-medium ${labelColorClass(label.color)}`}
+                  >
+                    {expandEmoji(label.name)}
+                  </span>
+                )}
+              </For>
+            </div>
+          </Show>
+
+          {/* Additional children slot — z-10 to sit above stretched link */}
+          <Show when={props.children !== undefined}>
+            <div class="relative z-10 mt-1">{props.children}</div>
+          </Show>
+        </div>
+
+        {/* Author + time + comment count */}
+        <div class="shrink-0 flex flex-col items-end gap-0.5 text-xs text-base-content/60 pt-0.5">
+          <span>{props.author}</span>
+          <Show when={props.surfacedByBadge !== undefined}>
+            <div class="relative z-10">{props.surfacedByBadge}</div>
+          </Show>
+          <span class="inline-flex items-center gap-1 whitespace-nowrap">
+            <Tooltip content={staticDateInfo().createdTitle} class="relative z-10">
               <time
-                datetime={props.updatedAt}
-                aria-label={dateDisplay().updatedLabel}
+                datetime={props.createdAt}
+                aria-label={dateDisplay().createdLabel}
               >
-                {dateDisplay().updated}
+                {dateDisplay().created}
               </time>
             </Tooltip>
+            <Show when={shouldShowUpdated()}>
+              <span aria-hidden="true">{"\u00B7"}</span>
+              <Tooltip content={staticDateInfo().updatedTitle} class="relative z-10">
+                <time
+                  datetime={props.updatedAt}
+                  aria-label={dateDisplay().updatedLabel}
+                >
+                  {dateDisplay().updated}
+                </time>
+              </Tooltip>
+            </Show>
+          </span>
+          <Show when={(props.commentCount ?? 0) > 0}>
+            <Tooltip content={`${props.commentCount} total ${props.commentCount === 1 ? "comment" : "comments"}`} focusable class="relative z-10">
+              <span class="flex items-center gap-0.5">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-3 w-3"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                {formatCount(props.commentCount!)}
+              </span>
+            </Tooltip>
           </Show>
-        </span>
-        <Show when={props.isPolling}>
-          <span class="loading loading-spinner loading-xs text-base-content/40" />
-        </Show>
-        <Show when={(props.commentCount ?? 0) > 0}>
-          <Tooltip content={`${props.commentCount} total ${props.commentCount === 1 ? "comment" : "comments"}`} focusable class="relative z-10">
-            <span class="flex items-center gap-0.5">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-3 w-3"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-              {formatCount(props.commentCount!)}
-            </span>
-          </Tooltip>
-        </Show>
-      </div>
+        </div>
+      </Show>
 
       {/* Pin button — visible on hover, always visible when tracked */}
       <Show when={props.onTrack !== undefined}>
@@ -219,7 +306,7 @@ export default function ItemRow(props: ItemRowProps) {
             {/* Eye-slash icon */}
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class={isCompact() ? "h-3.5 w-3.5" : "h-4 w-4"}
+              class="h-4 w-4 compact:h-3.5 compact:w-3.5"
               viewBox="0 0 20 20"
               fill="currentColor"
               aria-hidden="true"
diff --git a/src/app/components/dashboard/PullRequestsTab.tsx b/src/app/components/dashboard/PullRequestsTab.tsx
index 8f8aa050..83bb07a6 100644
--- a/src/app/components/dashboard/PullRequestsTab.tsx
+++ b/src/app/components/dashboard/PullRequestsTab.tsx
@@ -361,8 +361,8 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
   return (
     <div class="flex flex-col h-full">
       {/* Filter toolbar */}
-      <div class="flex items-start gap-3 px-4 py-2 border-b border-base-300 bg-base-100">
-        <div class="flex flex-wrap items-center gap-3 min-w-0 flex-1">
+      <div class="flex items-start px-4 py-2 gap-3 compact:py-0.5 compact:gap-2 border-b border-base-300 bg-base-100">
+        <div class="flex flex-wrap items-center min-w-0 flex-1 gap-3 compact:gap-2">
           <FilterToolbar
             groups={filterGroups()}
             values={viewState.tabFilters.pullRequests}
@@ -461,7 +461,7 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
                       <button
                         onClick={() => toggleExpandedRepo("pullRequests", repoGroup.repoFullName)}
                         aria-expanded={isExpanded()}
-                        class="flex-1 flex items-center gap-2 px-4 py-2.5 text-left text-sm font-semibold text-base-content"
+                        class="flex-1 flex items-center gap-2 px-4 py-2.5 compact:py-1.5 text-left text-sm font-semibold text-base-content"
                       >
                         <ChevronIcon size="md" rotated={!isExpanded()} />
                         {repoGroup.repoFullName}
@@ -570,7 +570,6 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
                                 onIgnore={() => handleIgnore(pr)}
                                 onTrack={config.enableTracking ? () => handleTrack(pr) : undefined}
                                 isTracked={config.enableTracking ? trackedPrIds().has(pr.id) : undefined}
-                                density={config.viewDensity}
                                 surfacedByBadge={
                                   props.trackedUsers && props.trackedUsers.length > 0
                                     ? <UserAvatarBadge
@@ -582,38 +581,70 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
                                 isPolling={props.hotPollingPRIds?.has(pr.id)}
                                 isFlashing={flashingPRIds().has(pr.id)}
                               >
-                                <div class="flex items-center gap-2 flex-wrap">
-                                  <Show when={pr.enriched !== false}>
-                                    <RoleBadge roles={prMeta().get(pr.id)?.roles ?? []} />
-                                  </Show>
-                                  <ReviewBadge decision={pr.reviewDecision} />
-                                  <Show when={pr.enriched !== false}>
-                                    <SizeBadge additions={pr.additions} deletions={pr.deletions} changedFiles={pr.changedFiles} category={prMeta().get(pr.id)?.sizeCategory} filesUrl={isSafeGitHubUrl(pr.htmlUrl) ? `${pr.htmlUrl}/files` : undefined} />
+                                <Show
+                                  when={config.viewDensity === "compact"}
+                                  fallback={
+                                    <div class="flex items-center gap-2 flex-wrap">
+                                      <Show when={pr.enriched !== false}>
+                                        <RoleBadge roles={prMeta().get(pr.id)?.roles ?? []} />
+                                      </Show>
+                                      <ReviewBadge decision={pr.reviewDecision} />
+                                      <Show when={pr.enriched !== false}>
+                                        <SizeBadge additions={pr.additions} deletions={pr.deletions} changedFiles={pr.changedFiles} category={prMeta().get(pr.id)?.sizeCategory} filesUrl={isSafeGitHubUrl(pr.htmlUrl) ? `${pr.htmlUrl}/files` : undefined} />
+                                        <StatusDot status={pr.checkStatus} href={isSafeGitHubUrl(pr.htmlUrl) ? `${pr.htmlUrl}/checks` : undefined} />
+                                        <Show when={pr.checkStatus === "conflict"}>
+                                          <span class="badge badge-warning badge-sm gap-1">
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                                            </svg>
+                                            Merge conflict
+                                          </span>
+                                        </Show>
+                                      </Show>
+                                      <Show when={pr.draft}>
+                                        <span class="badge badge-ghost badge-sm italic text-base-content/50">
+                                          Draft
+                                        </span>
+                                      </Show>
+                                      <Show when={pr.enriched !== false && pr.reviewerLogins.length > 0}>
+                                        <Tooltip content={pr.reviewerLogins.join(", ")} focusable>
+                                          <span class="text-xs text-base-content/60">
+                                            Reviewers: {pr.reviewerLogins.slice(0, 5).join(", ")}
+                                            {pr.reviewerLogins.length > 5 && ` +${pr.reviewerLogins.length - 5} more`}
+                                            {pr.totalReviewCount > pr.reviewerLogins.length && ` (${pr.totalReviewCount} total)`}
+                                          </span>
+                                        </Tooltip>
+                                      </Show>
+                                    </div>
+                                  }
+                                >
+                                  {/* Compact: key badges inline + hidden metadata in tooltip */}
+                                  <div class="flex items-center gap-1">
                                     <StatusDot status={pr.checkStatus} href={isSafeGitHubUrl(pr.htmlUrl) ? `${pr.htmlUrl}/checks` : undefined} />
+                                    <ReviewBadge decision={pr.reviewDecision} />
+                                    <Show when={pr.enriched !== false}>
+                                      <SizeBadge additions={pr.additions} deletions={pr.deletions} changedFiles={pr.changedFiles} category={prMeta().get(pr.id)?.sizeCategory} filesUrl={isSafeGitHubUrl(pr.htmlUrl) ? `${pr.htmlUrl}/files` : undefined} />
+                                    </Show>
                                     <Show when={pr.checkStatus === "conflict"}>
-                                      <span class="badge badge-warning badge-sm gap-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                      <Tooltip content="Merge conflict">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-warning" viewBox="0 0 20 20" fill="currentColor" aria-label="Merge conflict">
                                           <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                         </svg>
-                                        Merge conflict
-                                      </span>
+                                      </Tooltip>
+                                    </Show>
+                                    <Show when={pr.draft}>
+                                      <span class="badge badge-ghost badge-xs italic text-base-content/50">D</span>
+                                    </Show>
+                                    <Show when={pr.enriched !== false && (pr.reviewerLogins.length > 0 || (prMeta().get(pr.id)?.roles ?? []).length > 0)}>
+                                      <Tooltip content={[
+                                        (prMeta().get(pr.id)?.roles ?? []).length > 0 ? `Role: ${(prMeta().get(pr.id)?.roles ?? []).join(", ")}` : false,
+                                        pr.reviewerLogins.length > 0 ? `Reviewers: ${pr.reviewerLogins.join(", ")}` : false,
+                                      ].filter(Boolean).join(" | ")} placement="top">
+                                        <span class="text-base-content/40 text-xs cursor-default">···</span>
+                                      </Tooltip>
                                     </Show>
-                                  </Show>
-                                  <Show when={pr.draft}>
-                                    <span class="badge badge-ghost badge-sm italic text-base-content/50">
-                                      Draft
-                                    </span>
-                                  </Show>
-                                  <Show when={pr.enriched !== false && pr.reviewerLogins.length > 0}>
-                                    <Tooltip content={pr.reviewerLogins.join(", ")} focusable>
-                                      <span class="text-xs text-base-content/60">
-                                        Reviewers: {pr.reviewerLogins.slice(0, 5).join(", ")}
-                                        {pr.reviewerLogins.length > 5 && ` +${pr.reviewerLogins.length - 5} more`}
-                                        {pr.totalReviewCount > pr.reviewerLogins.length && ` (${pr.totalReviewCount} total)`}
-                                      </span>
-                                    </Tooltip>
-                                  </Show>
-                                </div>
+                                  </div>
+                                </Show>
                               </ItemRow>
                             </div>
                           )}
diff --git a/src/app/components/dashboard/TrackedTab.tsx b/src/app/components/dashboard/TrackedTab.tsx
index 0c58b7cb..cc1c22b9 100644
--- a/src/app/components/dashboard/TrackedTab.tsx
+++ b/src/app/components/dashboard/TrackedTab.tsx
@@ -3,7 +3,13 @@ import { config } from "../../stores/config";
 import { viewState, untrackItem, moveTrackedItem } from "../../stores/view";
 import type { TrackedItem } from "../../stores/view";
 import type { Issue, PullRequest } from "../../services/api";
+import { deriveInvolvementRoles, prSizeCategory } from "../../lib/format";
+import { isSafeGitHubUrl } from "../../lib/url";
 import ItemRow from "./ItemRow";
+import StatusDot from "../shared/StatusDot";
+import ReviewBadge from "../shared/ReviewBadge";
+import SizeBadge from "../shared/SizeBadge";
+import RoleBadge from "../shared/RoleBadge";
 import { Tooltip } from "../shared/Tooltip";
 
 function TypeBadge(props: { type: TrackedItem["type"] }) {
@@ -59,6 +65,8 @@ export interface TrackedTabProps {
   issues: Issue[];
   pullRequests: PullRequest[];
   refreshTick?: number;
+  userLogin: string;
+  hotPollingPRIds?: ReadonlySet<number>;
 }
 
 export default function TrackedTab(props: TrackedTabProps) {
@@ -98,30 +106,30 @@ export default function TrackedTab(props: TrackedTabProps) {
 
               return (
                 <div
-                  class="flex items-center gap-1"
+                  class="flex items-center gap-1 compact:gap-0"
                   ref={(el) => { itemRefs.set(itemKey, el); }}
                 >
                   {/* Reorder buttons */}
-                  <div class="flex flex-col shrink-0 pl-2">
+                  <div class="flex flex-col shrink-0 pl-2 compact:pl-1">
                     <button
-                      class="btn btn-ghost btn-xs"
+                      class="btn btn-ghost btn-xs compact:min-h-0 compact:h-6 compact:w-7 compact:px-0"
                       disabled={isFirst()}
                       aria-label={`Move up: ${item.title}`}
                       onClick={() => handleMove(item.id, item.type, "up")}
                     >
                       {/* Heroicons 20px solid: chevron-up */}
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3.5 w-3.5">
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4">
                         <path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z" clip-rule="evenodd" />
                       </svg>
                     </button>
                     <button
-                      class="btn btn-ghost btn-xs"
+                      class="btn btn-ghost btn-xs compact:min-h-0 compact:h-6 compact:w-7 compact:px-0"
                       disabled={isLast()}
                       aria-label={`Move down: ${item.title}`}
                       onClick={() => handleMove(item.id, item.type, "down")}
                     >
                       {/* Heroicons 20px solid: chevron-down */}
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3.5 w-3.5">
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4">
                         <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
                       </svg>
                     </button>
@@ -133,15 +141,15 @@ export default function TrackedTab(props: TrackedTabProps) {
                       when={liveData()}
                       fallback={
                         /* Fallback row when live data not found */
-                        <div class="flex items-center gap-3 px-4 py-3 hover:bg-base-200 transition-colors">
+                        <div class="flex items-center gap-3 px-4 py-3 compact:gap-2 compact:px-3 compact:py-1 hover:bg-base-200 transition-colors">
                           <div class="flex-1 min-w-0">
-                            <div class="flex items-center gap-2 flex-wrap">
-                              <span class="font-medium text-sm text-base-content truncate">
+                            <div class="flex items-center gap-2 compact:gap-1 flex-wrap">
+                              <span class="font-medium text-sm compact:text-xs text-base-content truncate">
                                 {item.title}
                               </span>
                               <TypeBadge type={item.type} />
                             </div>
-                            <div class="text-xs text-base-content/60 mt-0.5">
+                            <div class="text-xs text-base-content/60 mt-0.5 compact:mt-0">
                               {item.repoFullName}{" "}
                               <span class="text-base-content/40">(not in current data)</span>
                             </div>
@@ -159,25 +167,96 @@ export default function TrackedTab(props: TrackedTabProps) {
                         </div>
                       }
                     >
-                      {(live) => (
-                        <ItemRow
-                          hideRepo={false}
-                          repo={live().repoFullName}
-                          number={live().number}
-                          title={live().title}
-                          author={live().userLogin}
-                          createdAt={live().createdAt}
-                          updatedAt={live().updatedAt}
-                          refreshTick={props.refreshTick}
-                          url={live().htmlUrl}
-                          labels={live().labels}
-                          onTrack={() => untrackItem(item.id, item.type)}
-                          isTracked={true}
-                          density={config.viewDensity}
-                        >
-                          <TypeBadge type={item.type} />
-                        </ItemRow>
-                      )}
+                      {(live) => {
+                        const pr = createMemo(() => item.type === "pullRequest" ? live() as PullRequest : undefined);
+                        const commentCount = createMemo(() =>
+                          item.type === "pullRequest"
+                            ? (pr()!.enriched !== false ? pr()!.comments + pr()!.reviewThreads : undefined)
+                            : (live() as Issue).comments);
+
+                        return (
+                          <ItemRow
+                            hideRepo={false}
+                            repo={live().repoFullName}
+                            number={live().number}
+                            title={live().title}
+                            author={live().userLogin}
+                            createdAt={live().createdAt}
+                            updatedAt={live().updatedAt}
+                            refreshTick={props.refreshTick}
+                            url={live().htmlUrl}
+                            labels={live().labels}
+                            commentCount={commentCount()}
+                            onTrack={() => untrackItem(item.id, item.type)}
+                            isTracked={true}
+                            isPolling={item.type === "pullRequest" && props.hotPollingPRIds?.has(item.id)}
+                          >
+                            <Show
+                              when={pr()}
+                              fallback={
+                                <div class="flex items-center gap-1">
+                                  <TypeBadge type="issue" />
+                                  <RoleBadge roles={deriveInvolvementRoles(props.userLogin, live().userLogin, (live() as Issue).assigneeLogins, [])} />
+                                </div>
+                              }
+                            >
+                              {(prData) => {
+                                const roles = createMemo(() => deriveInvolvementRoles(props.userLogin, prData().userLogin, prData().assigneeLogins, prData().reviewerLogins));
+                                const sizeCategory = createMemo(() => prSizeCategory(prData().additions, prData().deletions));
+
+                                return (
+                                  <Show
+                                    when={config.viewDensity === "compact"}
+                                    fallback={
+                                      <div class="flex items-center gap-2 flex-wrap">
+                                        <TypeBadge type="pullRequest" />
+                                        <Show when={prData().enriched !== false}>
+                                          <RoleBadge roles={roles()} />
+                                        </Show>
+                                        <ReviewBadge decision={prData().reviewDecision} />
+                                        <Show when={prData().enriched !== false}>
+                                          <SizeBadge additions={prData().additions} deletions={prData().deletions} changedFiles={prData().changedFiles} category={sizeCategory()} filesUrl={isSafeGitHubUrl(prData().htmlUrl) ? `${prData().htmlUrl}/files` : undefined} />
+                                          <StatusDot status={prData().checkStatus} href={isSafeGitHubUrl(prData().htmlUrl) ? `${prData().htmlUrl}/checks` : undefined} />
+                                          <Show when={prData().checkStatus === "conflict"}>
+                                            <Tooltip content="Merge conflict">
+                                              <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-warning" viewBox="0 0 20 20" fill="currentColor" aria-label="Merge conflict">
+                                                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                                              </svg>
+                                            </Tooltip>
+                                          </Show>
+                                        </Show>
+                                        <Show when={prData().draft}>
+                                          <span class="badge badge-ghost badge-sm italic text-base-content/50">Draft</span>
+                                        </Show>
+                                      </div>
+                                    }
+                                  >
+                                    {/* Compact: key badges inline */}
+                                    <div class="flex items-center gap-1">
+                                      <TypeBadge type="pullRequest" />
+                                      <StatusDot status={prData().checkStatus} href={isSafeGitHubUrl(prData().htmlUrl) ? `${prData().htmlUrl}/checks` : undefined} />
+                                      <ReviewBadge decision={prData().reviewDecision} />
+                                      <Show when={prData().enriched !== false}>
+                                        <SizeBadge additions={prData().additions} deletions={prData().deletions} changedFiles={prData().changedFiles} category={sizeCategory()} filesUrl={isSafeGitHubUrl(prData().htmlUrl) ? `${prData().htmlUrl}/files` : undefined} />
+                                      </Show>
+                                      <Show when={prData().checkStatus === "conflict"}>
+                                        <Tooltip content="Merge conflict">
+                                          <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-warning" viewBox="0 0 20 20" fill="currentColor" aria-label="Merge conflict">
+                                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                                          </svg>
+                                        </Tooltip>
+                                      </Show>
+                                      <Show when={prData().draft}>
+                                        <span class="badge badge-ghost badge-xs italic text-base-content/50">D</span>
+                                      </Show>
+                                    </div>
+                                  </Show>
+                                );
+                              }}
+                            </Show>
+                          </ItemRow>
+                        );
+                      }}
                     </Show>
                   </div>
                 </div>
diff --git a/src/app/components/dashboard/WorkflowRunRow.tsx b/src/app/components/dashboard/WorkflowRunRow.tsx
index 496c95f6..b98858a3 100644
--- a/src/app/components/dashboard/WorkflowRunRow.tsx
+++ b/src/app/components/dashboard/WorkflowRunRow.tsx
@@ -1,6 +1,5 @@
 import { createMemo, Show } from "solid-js";
 import type { WorkflowRun } from "../../services/api";
-import type { Config } from "../../stores/config";
 import { isSafeGitHubUrl } from "../../lib/url";
 import { relativeTime, formatDuration } from "../../lib/format";
 import { Tooltip } from "../shared/Tooltip";
@@ -8,7 +7,6 @@ import { Tooltip } from "../shared/Tooltip";
 interface WorkflowRunRowProps {
   run: WorkflowRun;
   onIgnore: (run: WorkflowRun) => void;
-  density: Config["viewDensity"];
   refreshTick?: number;
   isPolling?: boolean;
   isFlashing?: boolean;
@@ -130,9 +128,6 @@ function durationLabel(run: WorkflowRun): string {
 }
 
 export default function WorkflowRunRow(props: WorkflowRunRowProps) {
-  const paddingClass = () =>
-    props.density === "compact" ? "py-1.5 px-3" : "py-2.5 px-4";
-
   const createdTitle = createMemo(() => `Created: ${new Date(props.run.createdAt).toLocaleString()}`);
 
   // Reading props.refreshTick registers it as a SolidJS reactive dependency,
@@ -145,7 +140,7 @@ export default function WorkflowRunRow(props: WorkflowRunRowProps) {
 
   return (
     <div
-      class={`flex items-center gap-3 ${paddingClass()} group ${props.run.conclusion === "failure" ? "bg-error/5 hover:bg-error/10" : "hover:bg-base-200"} ${props.isFlashing ? "animate-flash" : props.isPolling ? "animate-shimmer" : ""}`}
+      class={`flex items-center gap-3 py-2.5 px-4 compact:py-1 compact:px-2 group ${props.run.conclusion === "failure" ? "bg-error/5 hover:bg-error/10" : "hover:bg-base-200"} ${props.isFlashing ? "animate-flash" : props.isPolling ? "animate-shimmer" : ""}`}
     >
       <StatusIcon status={props.run.status} conclusion={props.run.conclusion} />
 
diff --git a/src/app/components/dashboard/WorkflowSummaryCard.tsx b/src/app/components/dashboard/WorkflowSummaryCard.tsx
index 59eaadb4..04f83d99 100644
--- a/src/app/components/dashboard/WorkflowSummaryCard.tsx
+++ b/src/app/components/dashboard/WorkflowSummaryCard.tsx
@@ -9,7 +9,6 @@ interface WorkflowSummaryCardProps {
   expanded: boolean;
   onToggle: () => void;
   onIgnoreRun: (run: WorkflowRun) => void;
-  density: "compact" | "comfortable";
   refreshTick?: number;
   hotPollingRunIds?: ReadonlySet<number>;
   flashingRunIds?: ReadonlySet<number>;
@@ -71,12 +70,12 @@ export default function WorkflowSummaryCard(props: WorkflowSummaryCardProps) {
       tabIndex={0}
       aria-expanded={props.expanded}
       aria-label={props.workflowName}
-      class={`rounded-lg border p-3 cursor-pointer transition-colors ${hoverClass()} ${borderLeftClass()} ${cardBgClass()}`}
+      class={`rounded-lg border cursor-pointer transition-colors p-3 compact:p-2 ${hoverClass()} ${borderLeftClass()} ${cardBgClass()}`}
       onClick={props.onToggle}
       onKeyDown={handleKeyDown}
     >
       {/* Card header */}
-      <div class="flex items-center gap-2 min-w-0">
+      <div class="flex items-center min-w-0 gap-2 compact:gap-1.5">
         <span class="truncate text-sm font-medium text-base-content flex-1 min-w-0">
           {props.workflowName}
         </span>
@@ -116,7 +115,6 @@ export default function WorkflowSummaryCard(props: WorkflowSummaryCardProps) {
               <WorkflowRunRow
                 run={run}
                 onIgnore={props.onIgnoreRun}
-                density={props.density}
                 refreshTick={props.refreshTick}
                 isPolling={props.hotPollingRunIds?.has(run.id)}
                 isFlashing={props.flashingRunIds?.has(run.id)}
diff --git a/src/app/components/layout/FilterBar.tsx b/src/app/components/layout/FilterBar.tsx
index 76450e85..3e436cf6 100644
--- a/src/app/components/layout/FilterBar.tsx
+++ b/src/app/components/layout/FilterBar.tsx
@@ -61,7 +61,7 @@ export default function FilterBar(props: FilterBarProps) {
   });
 
   return (
-    <div class="flex items-center gap-3 px-4 py-2 bg-base-100 border-b border-base-300 shadow-sm">
+    <div class="flex items-center gap-3 px-4 py-2 compact:py-1 bg-base-100 border-b border-base-300 shadow-sm">
       <Select<string>
         value={viewState.globalFilter.org ?? ""}
         onChange={handleOrgChange}
@@ -75,7 +75,7 @@ export default function FilterBar(props: FilterBarProps) {
         )}
       >
         <Select.Trigger
-          class="btn btn-sm btn-outline"
+          class="btn btn-outline btn-sm compact:btn-xs"
           aria-label="Filter by organization"
         >
           {viewState.globalFilter.org ?? "All orgs"}
@@ -100,7 +100,7 @@ export default function FilterBar(props: FilterBarProps) {
         )}
       >
         <Select.Trigger
-          class="btn btn-sm btn-outline"
+          class="btn btn-outline btn-sm compact:btn-xs"
           aria-label="Filter by repository"
         >
           {viewState.globalFilter.repo ?? "All repos"}
@@ -133,11 +133,11 @@ export default function FilterBar(props: FilterBarProps) {
         </span>
       </Show>
 
-      <Tooltip content={props.isRefreshing ? "Refreshing…" : updatedLabel() ? `Refresh — ${updatedLabel()!.toLowerCase()}` : "Refresh data"}>
+      <Tooltip content={props.isRefreshing ? "Refreshing\u2026" : updatedLabel() ? `Refresh \u2014 ${updatedLabel()!.toLowerCase()}` : "Refresh data"}>
         <button
           onClick={props.onRefresh}
           disabled={props.isRefreshing}
-          class="btn btn-ghost btn-sm"
+          class="btn btn-ghost btn-sm compact:btn-xs"
           aria-label="Refresh data"
         >
           <Show
diff --git a/src/app/components/layout/TabBar.tsx b/src/app/components/layout/TabBar.tsx
index 5d0caa16..c206480b 100644
--- a/src/app/components/layout/TabBar.tsx
+++ b/src/app/components/layout/TabBar.tsx
@@ -23,26 +23,26 @@ export default function TabBar(props: TabBarProps) {
       <div class="border-b border-base-300">
         <div class="max-w-6xl mx-auto w-full px-4">
           <Tabs.List class="tabs tabs-border">
-            <Tabs.Trigger value="issues" class="tab data-[selected]:tab-active">
+            <Tabs.Trigger value="issues" class="tab compact:tab-sm data-[selected]:tab-active">
               Issues
               <Show when={props.counts?.issues !== undefined}>
                 <span class="badge badge-sm badge-neutral ml-1">{props.counts?.issues}</span>
               </Show>
             </Tabs.Trigger>
-            <Tabs.Trigger value="pullRequests" class="tab data-[selected]:tab-active">
+            <Tabs.Trigger value="pullRequests" class="tab compact:tab-sm data-[selected]:tab-active">
               Pull Requests
               <Show when={props.counts?.pullRequests !== undefined}>
                 <span class="badge badge-sm badge-neutral ml-1">{props.counts?.pullRequests}</span>
               </Show>
             </Tabs.Trigger>
-            <Tabs.Trigger value="actions" class="tab data-[selected]:tab-active">
+            <Tabs.Trigger value="actions" class="tab compact:tab-sm data-[selected]:tab-active">
               Actions
               <Show when={props.counts?.actions !== undefined}>
                 <span class="badge badge-sm badge-neutral ml-1">{props.counts?.actions}</span>
               </Show>
             </Tabs.Trigger>
             <Show when={props.enableTracking}>
-              <Tabs.Trigger value="tracked" class="tab data-[selected]:tab-active">
+              <Tabs.Trigger value="tracked" class="tab compact:tab-sm data-[selected]:tab-active">
                 Tracked
                 <Show when={props.counts?.tracked !== undefined}>
                   <span class="badge badge-sm badge-neutral ml-1">{props.counts?.tracked}</span>
diff --git a/src/app/components/settings/DensityPicker.tsx b/src/app/components/settings/DensityPicker.tsx
new file mode 100644
index 00000000..081f420a
--- /dev/null
+++ b/src/app/components/settings/DensityPicker.tsx
@@ -0,0 +1,94 @@
+import { config, setConfig } from "../../stores/config";
+import type { Config } from "../../stores/config";
+
+type Density = Config["viewDensity"];
+
+/** Skeleton of a comfortable-mode item row: title line, labels row, badges row */
+function ComfortablePreviewRow() {
+  return (
+    <div class="flex items-start gap-1.5 px-2 py-1.5">
+      {/* Status dot */}
+      <div class="rounded-full w-1.5 h-1.5 bg-success shrink-0 mt-1" />
+      {/* Content column */}
+      <div class="flex-1 min-w-0 space-y-1">
+        {/* Title line: #number + title */}
+        <div class="flex items-center gap-1">
+          <div class="rounded bg-base-content/15 w-3 h-1.5 shrink-0" />
+          <div class="rounded bg-base-content/25 flex-1 h-2" />
+        </div>
+        {/* Labels row: colored pills */}
+        <div class="flex items-center gap-0.5">
+          <div class="rounded-full bg-error/30 w-5 h-1.5" />
+          <div class="rounded-full bg-info/30 w-7 h-1.5" />
+        </div>
+        {/* Badges row */}
+        <div class="flex items-center gap-0.5">
+          <div class="rounded bg-success/30 w-4 h-1.5" />
+          <div class="rounded bg-warning/30 w-3 h-1.5" />
+        </div>
+      </div>
+      {/* Right column: author + time */}
+      <div class="shrink-0 flex flex-col items-end gap-0.5">
+        <div class="rounded bg-base-content/10 w-5 h-1.5" />
+        <div class="rounded bg-base-content/10 w-4 h-1" />
+      </div>
+    </div>
+  );
+}
+
+/** Skeleton of a compact-mode item row: everything on one line */
+function CompactPreviewRow() {
+  return (
+    <div class="flex items-center gap-1 px-2 py-0.5">
+      {/* Status dot */}
+      <div class="rounded-full w-1.5 h-1.5 bg-success shrink-0" />
+      {/* #number */}
+      <div class="rounded bg-base-content/15 w-2 h-1.5 shrink-0" />
+      {/* Title */}
+      <div class="rounded bg-base-content/25 flex-1 h-1.5" />
+      {/* Inline badges */}
+      <div class="rounded bg-success/30 w-2.5 h-1.5 shrink-0" />
+      <div class="rounded bg-warning/30 w-2 h-1.5 shrink-0" />
+      {/* Label icon */}
+      <div class="rounded bg-base-content/10 w-1.5 h-1.5 shrink-0" />
+      {/* Author · time */}
+      <div class="rounded bg-base-content/10 w-6 h-1.5 shrink-0" />
+    </div>
+  );
+}
+
+function DensityCard(props: { density: Density; label: string; description: string }) {
+  const isActive = () => config.viewDensity === props.density;
+  const isCompact = props.density === "compact";
+  const Row = isCompact ? CompactPreviewRow : ComfortablePreviewRow;
+
+  return (
+    <button
+      class={`flex-1 rounded-lg border-2 p-2 cursor-pointer transition-colors text-left ${isActive() ? "border-primary ring-2 ring-primary/30" : "border-base-300 hover:border-base-content/20"}`}
+      onClick={() => setConfig("viewDensity", props.density)}
+      aria-label={`View density: ${props.label}`}
+      aria-pressed={isActive()}
+    >
+      <div class="bg-base-100 rounded overflow-hidden border border-base-300 mb-1.5">
+        <Row />
+        <div class="border-t border-base-200" />
+        <Row />
+        <div class="border-t border-base-200" />
+        <Row />
+      </div>
+      <div class="mt-1">
+        <span class="text-xs font-medium text-base-content">{props.label}</span>
+        <span class="text-[10px] text-base-content/50 ml-1">{props.description}</span>
+      </div>
+    </button>
+  );
+}
+
+export default function DensityPicker() {
+  return (
+    <div class="flex gap-3">
+      <DensityCard density="comfortable" label="Comfortable" description="more detail" />
+      <DensityCard density="compact" label="Compact" description="more items" />
+    </div>
+  );
+}
diff --git a/src/app/components/settings/SettingsPage.tsx b/src/app/components/settings/SettingsPage.tsx
index 8cbb95a7..bff0ef40 100644
--- a/src/app/components/settings/SettingsPage.tsx
+++ b/src/app/components/settings/SettingsPage.tsx
@@ -15,6 +15,7 @@ import RepoSelector from "../onboarding/RepoSelector";
 import Section from "./Section";
 import SettingRow from "./SettingRow";
 import ThemePicker from "./ThemePicker";
+import DensityPicker from "./DensityPicker";
 import TrackedUsersSection from "./TrackedUsersSection";
 import { InfoTooltip } from "../shared/Tooltip";
 import type { RepoRef } from "../../services/api";
@@ -210,10 +211,6 @@ export default function SettingsPage() {
     ...(config.enableTracking ? [{ value: "tracked" as const, label: "Tracked Items" }] : []),
   ]);
 
-  const densityOptions = [
-    { value: "comfortable" as const, label: "Comfortable" },
-    { value: "compact" as const, label: "Compact" },
-  ];
 
   const itemsPerPageOptions = [
     { value: 10, label: "10" },
@@ -541,22 +538,10 @@ export default function SettingsPage() {
             <p class="text-sm font-medium text-base-content mb-2">Theme</p>
             <ThemePicker />
           </div>
-          <SettingRow
-            label="View density"
-            description="Controls spacing between items in lists"
-          >
-            <select
-              value={config.viewDensity}
-              onChange={(e) => {
-                saveWithFeedback({ viewDensity: e.currentTarget.value as "comfortable" | "compact" });
-              }}
-              class="select select-sm"
-            >
-              {densityOptions.map((opt) => (
-                <option value={opt.value}>{opt.label}</option>
-              ))}
-            </select>
-          </SettingRow>
+          <div class="px-4 py-2 border-b border-base-300">
+            <p class="text-sm font-medium text-base-content mb-2">View density</p>
+            <DensityPicker />
+          </div>
           <SettingRow
             label="Items per page"
             description="Number of items to show in each tab"
diff --git a/src/app/components/shared/FilterPopover.tsx b/src/app/components/shared/FilterPopover.tsx
index a1c115c7..ac5c360b 100644
--- a/src/app/components/shared/FilterPopover.tsx
+++ b/src/app/components/shared/FilterPopover.tsx
@@ -29,7 +29,7 @@ export default function FilterPopover(props: FilterPopoverProps) {
         as="button"
         type="button"
         aria-label={`Filter by ${props.group.label}`}
-        class={`btn btn-sm ${isDefault() ? "btn-ghost" : "btn-primary"}`}
+        class={`btn btn-sm compact:btn-xs ${isDefault() ? "btn-ghost" : "btn-primary"}`}
       >
         <Show when={isDefault()} fallback={<>{props.group.label}: {activeLabel()}</>}>
           {props.group.label}
diff --git a/src/app/components/shared/FilterToolbar.tsx b/src/app/components/shared/FilterToolbar.tsx
index 6d28263a..c984d57e 100644
--- a/src/app/components/shared/FilterToolbar.tsx
+++ b/src/app/components/shared/FilterToolbar.tsx
@@ -27,7 +27,7 @@ export default function FilterToolbar(props: FilterToolbarProps) {
   );
 
   return (
-    <div class="flex items-center gap-2 flex-wrap">
+    <div class="flex items-center flex-wrap gap-2 compact:gap-1">
       <Show when={showScope()}>
         <ScopeToggle
           value={props.values["scope"] ?? scopeFilterGroup.defaultValue ?? "all"}
diff --git a/src/app/components/shared/ScopeToggle.tsx b/src/app/components/shared/ScopeToggle.tsx
index 13995156..2c31126b 100644
--- a/src/app/components/shared/ScopeToggle.tsx
+++ b/src/app/components/shared/ScopeToggle.tsx
@@ -11,13 +11,13 @@ export default function ScopeToggle(props: ScopeToggleProps) {
       <input
         type="checkbox"
         aria-label="Scope filter"
-        class="toggle toggle-sm toggle-primary"
+        class="toggle toggle-primary toggle-sm compact:toggle-xs"
         checked={checked()}
         onChange={(e) =>
           props.onChange("scope", e.currentTarget.checked ? "involves_me" : "all")
         }
       />
-      <span class="text-sm text-base-content/70">
+      <span class="text-base-content/70 text-sm compact:text-xs">
         {checked() ? "Involves me" : "All activity"}
       </span>
     </label>
diff --git a/src/app/components/shared/SortDropdown.tsx b/src/app/components/shared/SortDropdown.tsx
index 6ddc29b3..8685dc4b 100644
--- a/src/app/components/shared/SortDropdown.tsx
+++ b/src/app/components/shared/SortDropdown.tsx
@@ -61,7 +61,7 @@ export default function SortDropdown(props: SortDropdownProps) {
     >
       <Select.Trigger
         aria-label="Sort by"
-        class="btn btn-sm btn-outline w-auto min-w-[180px] justify-between"
+        class="btn btn-outline btn-sm compact:btn-xs w-auto min-w-[180px] justify-between"
       >
         <Select.Value<FlatOption>>{(state) => state.selectedOption()?.label ?? "Sort by"}</Select.Value>
         <Select.Icon class="ml-2">▾</Select.Icon>
diff --git a/src/app/index.css b/src/app/index.css
index fa3af66e..1823df6b 100644
--- a/src/app/index.css
+++ b/src/app/index.css
@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@custom-variant compact (&:is([data-density="compact"] *));
+
 @plugin "daisyui" {
   themes: corporate --default, cupcake, light, nord, dim, dracula, dark, forest;
   exclude: chat, mask, mockup;
@@ -25,9 +27,9 @@
 }
 
 @utility animate-shimmer {
-  background: linear-gradient(90deg, transparent 25%, oklch(from var(--color-base-content) l c h / 0.15) 50%, transparent 75%);
+  background: linear-gradient(90deg, transparent 30%, oklch(from var(--color-base-content) l c h / 0.06) 50%, transparent 70%);
   background-size: 200% 100%;
-  animation: shimmer 1.5s ease-in-out infinite;
+  animation: shimmer 2.5s linear infinite;
 }
 
 /* ── Value-change flash animation ────────────────────────────────────────── */
diff --git a/src/app/stores/config.ts b/src/app/stores/config.ts
index fabe933c..926724ca 100644
--- a/src/app/stores/config.ts
+++ b/src/app/stores/config.ts
@@ -1,6 +1,6 @@
 import { z } from "zod";
 import { createStore, produce } from "solid-js/store";
-import { createEffect } from "solid-js";
+import { createEffect, onCleanup } from "solid-js";
 import { pushNotification } from "../lib/errors";
 
 export const CONFIG_STORAGE_KEY = "github-tracker:config";
@@ -133,15 +133,26 @@ export function resetConfig(): void {
 
 export function initConfigPersistence(): void {
   let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+  let pendingJson: string | undefined;
   createEffect(() => {
     const snapshot = JSON.parse(JSON.stringify(config)) as Config;
+    const json = JSON.stringify(snapshot);
+    pendingJson = json;
     clearTimeout(debounceTimer);
     debounceTimer = setTimeout(() => {
+      pendingJson = undefined;
       try {
-        localStorage.setItem(CONFIG_STORAGE_KEY, JSON.stringify(snapshot));
+        localStorage.setItem(CONFIG_STORAGE_KEY, json);
       } catch {
         pushNotification("localStorage:config", "Config write failed — storage may be full", "warning");
       }
     }, 200);
+    onCleanup(() => {
+      clearTimeout(debounceTimer);
+      if (pendingJson !== undefined) {
+        try { localStorage.setItem(CONFIG_STORAGE_KEY, pendingJson); } catch { /* best-effort */ }
+        pendingJson = undefined;
+      }
+    });
   });
 }
diff --git a/src/app/stores/view.ts b/src/app/stores/view.ts
index 8a0372c5..61bfd082 100644
--- a/src/app/stores/view.ts
+++ b/src/app/stores/view.ts
@@ -397,10 +397,13 @@ export function pruneClosedTrackedItems(pruneKeys: Set<string>): void {
 
 export function initViewPersistence(): void {
   let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+  let pendingJson: string | undefined;
   createEffect(() => {
     const json = JSON.stringify(viewState); // synchronous read → tracked by SolidJS
+    pendingJson = json;
     clearTimeout(debounceTimer);
     debounceTimer = setTimeout(() => {
+      pendingJson = undefined;
       try {
         localStorage.setItem(VIEW_STORAGE_KEY, json);
       } catch {
@@ -409,6 +412,11 @@ export function initViewPersistence(): void {
     }, 200);
     onCleanup(() => {
       clearTimeout(debounceTimer);
+      // Flush pending write synchronously so HMR doesn't lose state
+      if (pendingJson !== undefined) {
+        try { localStorage.setItem(VIEW_STORAGE_KEY, pendingJson); } catch { /* best-effort */ }
+        pendingJson = undefined;
+      }
     });
   });
 }
diff --git a/tests/components/ItemRow.test.tsx b/tests/components/ItemRow.test.tsx
index a7071c57..daab24ea 100644
--- a/tests/components/ItemRow.test.tsx
+++ b/tests/components/ItemRow.test.tsx
@@ -3,6 +3,7 @@ import { render, screen, fireEvent } from "@solidjs/testing-library";
 import userEvent from "@testing-library/user-event";
 import { createSignal } from "solid-js";
 import ItemRow from "../../src/app/components/dashboard/ItemRow";
+import { setConfig } from "../../src/app/stores/config";
 
 const MOCK_NOW = new Date("2026-03-30T12:00:00Z").getTime();
 
@@ -16,7 +17,6 @@ const defaultProps = {
   url: "https://github.com/octocat/Hello-World/issues/42",
   labels: [{ name: "bug", color: "d73a4a" }],
   onIgnore: vi.fn(),
-  density: "comfortable" as const,
 };
 
 describe("ItemRow", () => {
@@ -112,20 +112,45 @@ describe("ItemRow", () => {
     expect(tooltipTrigger!.className).toContain("self-center");
   });
 
-  it("applies compact padding in compact density", () => {
+  it("outer row has both comfortable and compact variant classes", () => {
     const { container } = render(() => (
-      <ItemRow {...defaultProps} density="compact" />
-    ));
-    const row = container.querySelector(".group")!;
-    expect(row.className).toContain("py-2");
-  });
-
-  it("applies comfortable padding in comfortable density", () => {
-    const { container } = render(() => (
-      <ItemRow {...defaultProps} density="comfortable" />
+      <ItemRow {...defaultProps} />
     ));
     const row = container.querySelector(".group")!;
     expect(row.className).toContain("py-3");
+    expect(row.className).toContain("compact:py-1");
+  });
+
+  describe("compact mode", () => {
+    beforeEach(() => { setConfig("viewDensity", "compact"); });
+    afterEach(() => { setConfig("viewDensity", "comfortable"); });
+
+    it("renders compact layout with inline number, title, and author", () => {
+      render(() => <ItemRow {...defaultProps} hideRepo />);
+      screen.getByText("#42");
+      screen.getByText("Fix a bug");
+      screen.getByText(/octocat/);
+    });
+
+    it("shows label count indicator when labels are present", () => {
+      render(() => (
+        <ItemRow {...defaultProps} labels={[{ name: "bug", color: "d73a4a" }, { name: "help", color: "0075ca" }]} />
+      ));
+      screen.getByText("2");
+    });
+
+    it("shows comment count indicator when comments are present", () => {
+      render(() => (
+        <ItemRow {...defaultProps} commentCount={5} />
+      ));
+      screen.getByText("5");
+    });
+
+    it("renders single time element in compact mode", () => {
+      const { container } = render(() => <ItemRow {...defaultProps} />);
+      const timeEls = container.querySelectorAll("time");
+      expect(timeEls.length).toBe(1);
+    });
   });
 
   it("renders no labels section when labels array is empty", () => {
diff --git a/tests/components/WorkflowRunRow.test.tsx b/tests/components/WorkflowRunRow.test.tsx
index c139c951..a88f1872 100644
--- a/tests/components/WorkflowRunRow.test.tsx
+++ b/tests/components/WorkflowRunRow.test.tsx
@@ -14,7 +14,7 @@ describe("WorkflowRunRow", () => {
   it("renders run name", () => {
     const run = makeWorkflowRun({ name: "CI Build" });
     render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="comfortable" />
+      <WorkflowRunRow run={run} onIgnore={() => {}} />
     ));
     screen.getByText("CI Build");
   });
@@ -22,7 +22,7 @@ describe("WorkflowRunRow", () => {
   it("renders displayTitle as primary text", () => {
     const run = makeWorkflowRun({ displayTitle: "feat: my cool feature" });
     render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="comfortable" />
+      <WorkflowRunRow run={run} onIgnore={() => {}} />
     ));
     screen.getByText("feat: my cool feature");
   });
@@ -31,7 +31,7 @@ describe("WorkflowRunRow", () => {
     const createdAt = new Date(MOCK_NOW - 2 * 60 * 60 * 1000).toISOString();
     const run = makeWorkflowRun({ createdAt });
     const { container } = render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="comfortable" />
+      <WorkflowRunRow run={run} onIgnore={() => {}} />
     ));
     const timeEl = container.querySelector("time");
     expect(timeEl).not.toBeNull();
@@ -44,7 +44,7 @@ describe("WorkflowRunRow", () => {
     const createdAt = new Date(MOCK_NOW - 2 * 60 * 60 * 1000).toISOString();
     const run = makeWorkflowRun({ createdAt });
     const { container, unmount } = render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="comfortable" />
+      <WorkflowRunRow run={run} onIgnore={() => {}} />
     ));
     const timeTrigger = container.querySelector("time")?.closest("span.inline-flex");
     expect(timeTrigger).not.toBeNull();
@@ -66,7 +66,7 @@ describe("WorkflowRunRow", () => {
     const run = makeWorkflowRun({ createdAt });
     const [tick, setTick] = createSignal(0);
     const { container } = render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="comfortable" refreshTick={tick()} />
+      <WorkflowRunRow run={run} onIgnore={() => {}} refreshTick={tick()} />
     ));
     const timeEl = container.querySelector("time");
     expect(timeEl!.textContent).toMatch(/2 hours? ago/);
@@ -78,7 +78,7 @@ describe("WorkflowRunRow", () => {
   it("renders status indicator for success conclusion", () => {
     const run = makeWorkflowRun({ status: "completed", conclusion: "success" });
     render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="comfortable" />
+      <WorkflowRunRow run={run} onIgnore={() => {}} />
     ));
     screen.getByLabelText("Success");
   });
@@ -86,7 +86,7 @@ describe("WorkflowRunRow", () => {
   it("renders status indicator for failure conclusion", () => {
     const run = makeWorkflowRun({ status: "completed", conclusion: "failure" });
     render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="comfortable" />
+      <WorkflowRunRow run={run} onIgnore={() => {}} />
     ));
     screen.getByLabelText("Failure");
   });
@@ -94,7 +94,7 @@ describe("WorkflowRunRow", () => {
   it("renders status indicator for cancelled conclusion", () => {
     const run = makeWorkflowRun({ status: "completed", conclusion: "cancelled" });
     render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="comfortable" />
+      <WorkflowRunRow run={run} onIgnore={() => {}} />
     ));
     screen.getByLabelText("Cancelled");
   });
@@ -102,7 +102,7 @@ describe("WorkflowRunRow", () => {
   it("renders status indicator for in_progress status", () => {
     const run = makeWorkflowRun({ status: "in_progress", conclusion: null });
     render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="comfortable" />
+      <WorkflowRunRow run={run} onIgnore={() => {}} />
     ));
     screen.getByLabelText("In progress");
   });
@@ -110,7 +110,7 @@ describe("WorkflowRunRow", () => {
   it("renders status indicator for queued status", () => {
     const run = makeWorkflowRun({ status: "queued", conclusion: null });
     render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="comfortable" />
+      <WorkflowRunRow run={run} onIgnore={() => {}} />
     ));
     screen.getByLabelText("Queued");
   });
@@ -120,7 +120,7 @@ describe("WorkflowRunRow", () => {
     const onIgnore = vi.fn();
     const run = makeWorkflowRun({ name: "Test Run" });
     render(() => (
-      <WorkflowRunRow run={run} onIgnore={onIgnore} density="comfortable" />
+      <WorkflowRunRow run={run} onIgnore={onIgnore} />
     ));
     await user.click(screen.getByLabelText("Ignore run Test Run"));
     expect(onIgnore).toHaveBeenCalledWith(run);
@@ -131,7 +131,7 @@ describe("WorkflowRunRow", () => {
       htmlUrl: "https://github.com/owner/repo/actions/runs/1",
     });
     render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="comfortable" />
+      <WorkflowRunRow run={run} onIgnore={() => {}} />
     ));
     const link = screen.getByRole("link");
     expect(link.getAttribute("href")).toBe(
@@ -142,7 +142,7 @@ describe("WorkflowRunRow", () => {
   it("has no href for invalid URL", () => {
     const run = makeWorkflowRun({ htmlUrl: "javascript:alert(1)" });
     const { container } = render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="comfortable" />
+      <WorkflowRunRow run={run} onIgnore={() => {}} />
     ));
     // isSafeGitHubUrl returns false for non-github URLs; href prop becomes undefined
     // An <a> without href has no "link" ARIA role, but the element still exists
@@ -151,29 +151,21 @@ describe("WorkflowRunRow", () => {
     expect(anchor?.getAttribute("href")).toBeNull();
   });
 
-  it("applies compact padding class for compact density", () => {
-    const run = makeWorkflowRun({ name: "Compact Run" });
+  it("has both comfortable and compact classes (CSS-driven density)", () => {
+    const run = makeWorkflowRun({ name: "Density Run" });
     render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="compact" />
+      <WorkflowRunRow run={run} onIgnore={() => {}} />
     ));
-    const row = screen.getByText("Compact Run").closest("div[class]");
-    expect(row?.className).toContain("py-1.5");
-    expect(row?.className).toContain("px-3");
-  });
-
-  it("applies comfortable padding class for comfortable density", () => {
-    const run = makeWorkflowRun({ name: "Comfortable Run" });
-    render(() => (
-      <WorkflowRunRow run={run} onIgnore={() => {}} density="comfortable" />
-    ));
-    const row = screen.getByText("Comfortable Run").closest("div[class]");
+    const row = screen.getByText("Density Run").closest("div[class]");
     expect(row?.className).toContain("py-2.5");
     expect(row?.className).toContain("px-4");
+    expect(row?.className).toContain("compact:py-1");
+    expect(row?.className).toContain("compact:px-2");
   });
 
   it("applies shimmer class when isPolling is true", () => {
     const { container } = render(() => (
-      <WorkflowRunRow run={makeWorkflowRun()} onIgnore={() => {}} density="comfortable" isPolling={true} />
+      <WorkflowRunRow run={makeWorkflowRun()} onIgnore={() => {}} isPolling={true} />
     ));
     expect(container.firstElementChild?.classList.contains("animate-shimmer")).toBe(true);
     expect(container.querySelector(".loading-spinner")).toBeTruthy();
@@ -181,7 +173,7 @@ describe("WorkflowRunRow", () => {
 
   it("does not apply shimmer when isPolling is false", () => {
     const { container } = render(() => (
-      <WorkflowRunRow run={makeWorkflowRun()} onIgnore={() => {}} density="comfortable" isPolling={false} />
+      <WorkflowRunRow run={makeWorkflowRun()} onIgnore={() => {}} isPolling={false} />
     ));
     expect(container.firstElementChild?.classList.contains("animate-shimmer")).toBe(false);
     expect(container.querySelector(".loading-spinner")).toBeFalsy();
@@ -189,7 +181,7 @@ describe("WorkflowRunRow", () => {
 
   it("does not apply shimmer when isPolling is omitted", () => {
     const { container } = render(() => (
-      <WorkflowRunRow run={makeWorkflowRun()} onIgnore={() => {}} density="comfortable" />
+      <WorkflowRunRow run={makeWorkflowRun()} onIgnore={() => {}} />
     ));
     expect(container.firstElementChild?.classList.contains("animate-shimmer")).toBe(false);
     expect(container.querySelector(".loading-spinner")).toBeFalsy();
@@ -197,14 +189,14 @@ describe("WorkflowRunRow", () => {
 
   it("applies flash class when isFlashing is true", () => {
     const { container } = render(() => (
-      <WorkflowRunRow run={makeWorkflowRun()} onIgnore={() => {}} density="comfortable" isFlashing={true} />
+      <WorkflowRunRow run={makeWorkflowRun()} onIgnore={() => {}} isFlashing={true} />
     ));
     expect(container.firstElementChild?.classList.contains("animate-flash")).toBe(true);
   });
 
   it("flash takes precedence over shimmer", () => {
     const { container } = render(() => (
-      <WorkflowRunRow run={makeWorkflowRun()} onIgnore={() => {}} density="comfortable" isFlashing={true} isPolling={true} />
+      <WorkflowRunRow run={makeWorkflowRun()} onIgnore={() => {}} isFlashing={true} isPolling={true} />
     ));
     expect(container.firstElementChild?.classList.contains("animate-flash")).toBe(true);
     expect(container.firstElementChild?.classList.contains("animate-shimmer")).toBe(false);
diff --git a/tests/components/WorkflowSummaryCard.test.tsx b/tests/components/WorkflowSummaryCard.test.tsx
index b2331ec7..7345cb63 100644
--- a/tests/components/WorkflowSummaryCard.test.tsx
+++ b/tests/components/WorkflowSummaryCard.test.tsx
@@ -14,7 +14,7 @@ describe("WorkflowSummaryCard", () => {
         expanded={false}
         onToggle={() => {}}
         onIgnoreRun={() => {}}
-        density="comfortable"
+
       />
     ));
     screen.getByText("My Workflow");
@@ -34,7 +34,7 @@ describe("WorkflowSummaryCard", () => {
         expanded={false}
         onToggle={() => {}}
         onIgnoreRun={() => {}}
-        density="comfortable"
+
       />
     ));
     // 2 successes shown as success-colored count
@@ -58,7 +58,7 @@ describe("WorkflowSummaryCard", () => {
         expanded={false}
         onToggle={() => {}}
         onIgnoreRun={() => {}}
-        density="comfortable"
+
       />
     ));
     // Only success count visible, no error or warning elements
@@ -79,7 +79,7 @@ describe("WorkflowSummaryCard", () => {
         expanded={false}
         onToggle={() => {}}
         onIgnoreRun={() => {}}
-        density="comfortable"
+
       />
     ));
     expect(screen.queryByText("run-unique-title")).toBeNull();
@@ -97,7 +97,7 @@ describe("WorkflowSummaryCard", () => {
         expanded={true}
         onToggle={() => {}}
         onIgnoreRun={() => {}}
-        density="comfortable"
+
       />
     ));
     screen.getByText("run-alpha");
@@ -115,7 +115,7 @@ describe("WorkflowSummaryCard", () => {
         expanded={false}
         onToggle={onToggle}
         onIgnoreRun={() => {}}
-        density="comfortable"
+
       />
     ));
     const card = container.firstElementChild as HTMLElement;
@@ -132,7 +132,7 @@ describe("WorkflowSummaryCard", () => {
         expanded={false}
         onToggle={() => {}}
         onIgnoreRun={() => {}}
-        density="comfortable"
+
       />
     ));
     const card = container.firstElementChild as HTMLElement;
@@ -151,7 +151,7 @@ describe("WorkflowSummaryCard", () => {
         expanded={false}
         onToggle={() => {}}
         onIgnoreRun={() => {}}
-        density="comfortable"
+
       />
     ));
     const card = container.firstElementChild as HTMLElement;
@@ -169,7 +169,7 @@ describe("WorkflowSummaryCard", () => {
         expanded={false}
         onToggle={() => {}}
         onIgnoreRun={() => {}}
-        density="comfortable"
+
       />
     ));
     const card = container.firstElementChild as HTMLElement;
@@ -189,7 +189,7 @@ describe("WorkflowSummaryCard", () => {
         expanded={true}
         onToggle={() => {}}
         onIgnoreRun={() => {}}
-        density="comfortable"
+
         hotPollingRunIds={hotPollingRunIds}
       />
     ));
@@ -213,7 +213,7 @@ describe("WorkflowSummaryCard", () => {
         expanded={true}
         onToggle={() => {}}
         onIgnoreRun={() => {}}
-        density="comfortable"
+
         flashingRunIds={flashingRunIds}
       />
     ));
diff --git a/tests/components/dashboard/TrackedTab.test.tsx b/tests/components/dashboard/TrackedTab.test.tsx
index a3e92284..b779c5fa 100644
--- a/tests/components/dashboard/TrackedTab.test.tsx
+++ b/tests/components/dashboard/TrackedTab.test.tsx
@@ -43,7 +43,7 @@ beforeEach(() => {
 
 describe("TrackedTab — empty state", () => {
   it("renders empty state when no items tracked", () => {
-    render(() => <TrackedTab issues={[]} pullRequests={[]} />);
+    render(() => <TrackedTab issues={[]} pullRequests={[]} userLogin="testuser" />);
     expect(screen.getByText(/No tracked items/)).toBeTruthy();
   });
 });
@@ -54,7 +54,7 @@ describe("TrackedTab — type badges", () => {
     const tracked = makeTrackedItem({ id: 1, type: "issue", title: "My issue" });
     updateViewState({ trackedItems: [tracked] });
 
-    render(() => <TrackedTab issues={[issue]} pullRequests={[]} />);
+    render(() => <TrackedTab issues={[issue]} pullRequests={[]} userLogin="testuser" />);
 
     const badges = screen.getAllByText("Issue");
     expect(badges.length).toBeGreaterThan(0);
@@ -65,7 +65,7 @@ describe("TrackedTab — type badges", () => {
     const tracked = makeTrackedItem({ id: 2, type: "pullRequest", title: "My PR" });
     updateViewState({ trackedItems: [tracked] });
 
-    render(() => <TrackedTab issues={[]} pullRequests={[pr]} />);
+    render(() => <TrackedTab issues={[]} pullRequests={[pr]} userLogin="testuser" />);
 
     const badges = screen.getAllByText("PR");
     expect(badges.length).toBeGreaterThan(0);
@@ -86,7 +86,7 @@ describe("TrackedTab — ordering", () => {
       ],
     });
 
-    render(() => <TrackedTab issues={[issue1, issue2, issue3]} pullRequests={[]} />);
+    render(() => <TrackedTab issues={[issue1, issue2, issue3]} pullRequests={[]} userLogin="testuser" />);
 
     // The items should appear in tracked order: Zebra, Apple, Mango
     const zebra = screen.getByText("Zebra Issue");
@@ -109,7 +109,7 @@ describe("TrackedTab — fallback row", () => {
     updateViewState({ trackedItems: [tracked] });
 
     // Don't pass the issue with id 999 in props — simulating it's not in current data
-    render(() => <TrackedTab issues={[]} pullRequests={[]} />);
+    render(() => <TrackedTab issues={[]} pullRequests={[]} userLogin="testuser" />);
 
     expect(screen.getByText(/not in current data/)).toBeTruthy();
     expect(screen.getByText("Missing Issue")).toBeTruthy();
@@ -119,7 +119,7 @@ describe("TrackedTab — fallback row", () => {
     const tracked = makeTrackedItem({ id: 888, type: "issue", title: "Stale Item" });
     updateViewState({ trackedItems: [tracked] });
 
-    render(() => <TrackedTab issues={[]} pullRequests={[]} />);
+    render(() => <TrackedTab issues={[]} pullRequests={[]} userLogin="testuser" />);
 
     const unpinBtn = screen.getByLabelText("Unpin #888 Stale Item");
     fireEvent.click(unpinBtn);
@@ -140,7 +140,7 @@ describe("TrackedTab — move button disabled states", () => {
       ],
     });
 
-    render(() => <TrackedTab issues={[issue1, issue2]} pullRequests={[]} />);
+    render(() => <TrackedTab issues={[issue1, issue2]} pullRequests={[]} userLogin="testuser" />);
 
     const upButtons = screen.getAllByLabelText(/^Move up:/);
     expect((upButtons[0] as HTMLButtonElement).disabled).toBe(true);
@@ -158,7 +158,7 @@ describe("TrackedTab — move button disabled states", () => {
       ],
     });
 
-    render(() => <TrackedTab issues={[issue1, issue2]} pullRequests={[]} />);
+    render(() => <TrackedTab issues={[issue1, issue2]} pullRequests={[]} userLogin="testuser" />);
 
     const downButtons = screen.getAllByLabelText(/^Move down:/);
     expect((downButtons[0] as HTMLButtonElement).disabled).toBe(false);
@@ -178,7 +178,7 @@ describe("TrackedTab — reordering", () => {
       ],
     });
 
-    render(() => <TrackedTab issues={[issue1, issue2]} pullRequests={[]} />);
+    render(() => <TrackedTab issues={[issue1, issue2]} pullRequests={[]} userLogin="testuser" />);
 
     const upButtons = screen.getAllByLabelText(/^Move up:/);
     // Click move up on second item
@@ -200,7 +200,7 @@ describe("TrackedTab — reordering", () => {
       ],
     });
 
-    render(() => <TrackedTab issues={[issue1, issue2]} pullRequests={[]} />);
+    render(() => <TrackedTab issues={[issue1, issue2]} pullRequests={[]} userLogin="testuser" />);
 
     const downButtons = screen.getAllByLabelText(/^Move down:/);
     // Click move down on first item
@@ -224,7 +224,7 @@ describe("TrackedTab — mixed types", () => {
       ],
     });
 
-    render(() => <TrackedTab issues={[issue]} pullRequests={[pr]} />);
+    render(() => <TrackedTab issues={[issue]} pullRequests={[pr]} userLogin="testuser" />);
 
     expect(screen.getByText("Mixed Issue")).toBeTruthy();
     expect(screen.getByText("Mixed PR")).toBeTruthy();
@@ -242,7 +242,7 @@ describe("TrackedTab — pin button", () => {
     const tracked = makeTrackedItem({ id: 60, type: "issue", title: "Tracked Issue" });
     updateViewState({ trackedItems: [tracked] });
 
-    render(() => <TrackedTab issues={[issue]} pullRequests={[]} />);
+    render(() => <TrackedTab issues={[issue]} pullRequests={[]} userLogin="testuser" />);
 
     // Find the Unpin button (pin button in TrackedTab always has isTracked=true)
     const unpinBtn = screen.getByLabelText(`Unpin #${issue.number} ${issue.title}`);
@@ -258,7 +258,7 @@ describe("TrackedTab — no ignore action", () => {
     const tracked = makeTrackedItem({ id: 70, type: "issue", title: "Ignorable Issue" });
     updateViewState({ trackedItems: [tracked] });
 
-    render(() => <TrackedTab issues={[issue]} pullRequests={[]} />);
+    render(() => <TrackedTab issues={[issue]} pullRequests={[]} userLogin="testuser" />);
 
     // Ignore button should NOT be present — TrackedTab only allows untracking
     expect(screen.queryByLabelText(`Ignore #${issue.number} ${issue.title}`)).toBeNull();
diff --git a/tests/components/settings/SettingsPage.test.tsx b/tests/components/settings/SettingsPage.test.tsx
index 18d5e079..ed319d41 100644
--- a/tests/components/settings/SettingsPage.test.tsx
+++ b/tests/components/settings/SettingsPage.test.tsx
@@ -235,14 +235,14 @@ describe("SettingsPage — Appearance", () => {
 
   it("shows current view density value", () => {
     renderSettings();
-    screen.getByDisplayValue("Comfortable");
+    screen.getByRole("button", { name: /View density: Comfortable/i });
   });
 
   it("changing view density updates config", async () => {
     const user = userEvent.setup();
     renderSettings();
-    const densitySelect = screen.getByDisplayValue("Comfortable");
-    await user.selectOptions(densitySelect, "compact");
+    const compactBtn = screen.getByRole("button", { name: /View density: Compact/i });
+    await user.click(compactBtn);
     expect(config.viewDensity).toBe("compact");
   });
 
diff --git a/tests/setup.ts b/tests/setup.ts
index 90488474..960f7aba 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -1,3 +1,5 @@
+import { afterEach } from "vitest";
+
 // Global test setup: ensure localStorage is available before module imports.
 // auth.ts reads localStorage at module scope (to initialize the token signal from
 // persisted value). happy-dom establishes window globals lazily, so this shim
@@ -15,3 +17,29 @@ if (typeof localStorage === "undefined") {
     configurable: true,
   });
 }
+
+// Track all timer IDs created during tests so we can clear them on teardown.
+// Kobalte's tooltip/popover primitives set module-level timers via
+// window.setTimeout that can fire after happy-dom tears down, causing
+// "ReferenceError: window is not defined".
+const pendingTimers = new Set<ReturnType<typeof setTimeout>>();
+const originalSetTimeout = globalThis.setTimeout;
+const originalClearTimeout = globalThis.clearTimeout;
+
+globalThis.setTimeout = ((...args: Parameters<typeof setTimeout>) => {
+  const id = originalSetTimeout(...args);
+  pendingTimers.add(id);
+  return id;
+}) as typeof setTimeout;
+
+globalThis.clearTimeout = ((id?: ReturnType<typeof setTimeout>) => {
+  if (id !== undefined) pendingTimers.delete(id);
+  originalClearTimeout(id);
+}) as typeof clearTimeout;
+
+afterEach(() => {
+  for (const id of pendingTimers) {
+    originalClearTimeout(id);
+  }
+  pendingTimers.clear();
+});