From 5bc1449782b587e70bced0311905be5bfb1f3c75 Mon Sep 17 00:00:00 2001
From: Matt Pua <matt.p@posthog.com>
Date: Wed, 10 Jun 2026 12:52:00 -0400
Subject: [PATCH] fix(home): loosen header stat spacing and standardize
 view-toggle button size

The Home header status stats (running / in progress / needs attention)
were cramped together (gap-3), and the List/Board/Config view toggle used
size="xs" buttons, smaller than the size="sm" standard used across the rest
of packages/ui. Widen the inter-stat gap (gap-5) and dot-to-label gap (gap-2),
and bump the toggle buttons to size="sm" with proportionate 14px icons.

Generated-By: PostHog Code
Task-Id: 1df3c04a-f4b0-4796-81b3-a835f7fc7c73
---
 .../ui/src/features/home/components/HomeView.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/features/home/components/HomeView.tsx b/packages/ui/src/features/home/components/HomeView.tsx
index f2d6b719d..74f1c9a02 100644
--- a/packages/ui/src/features/home/components/HomeView.tsx
+++ b/packages/ui/src/features/home/components/HomeView.tsx
@@ -101,7 +101,7 @@ export function HomeView() {
               </Text>
             </Flex>
             {hasContent ? (
-              <Flex align="center" gap="3" className="text-[12px]">
+              <Flex align="center" gap="5" className="text-[12px]">
                 {needsAttention.length > 0 ? (
                   <Stat
                     color="var(--amber-9)"
@@ -229,27 +229,27 @@ function ViewModeToggle({ value, onChange }: ViewModeToggleProps) {
       title="Switch view (press v to cycle)"
     >
       <Button
-        size="xs"
+        size="sm"
         variant={value === "list" ? "primary" : "link-muted"}
         onClick={() => onChange("list")}
       >
-        <ListBullets size={12} />
+        <ListBullets size={14} />
         List
       </Button>
       <Button
-        size="xs"
+        size="sm"
         variant={value === "board" ? "primary" : "link-muted"}
         onClick={() => onChange("board")}
       >
-        <Kanban size={12} />
+        <Kanban size={14} />
         Board
       </Button>
       <Button
-        size="xs"
+        size="sm"
         variant={value === "config" ? "primary" : "link-muted"}
         onClick={() => onChange("config")}
       >
-        <Graph size={12} />
+        <Graph size={14} />
         Config
       </Button>
     </Flex>
@@ -266,7 +266,7 @@ function Stat({
   pulse?: boolean;
 }) {
   return (
-    <Flex align="center" gap="1.5">
+    <Flex align="center" gap="2">
       <span
         className={`inline-block h-2 w-2 rounded-full ${pulse ? "animate-pulse" : ""}`}
         style={{ backgroundColor: color }}