From 5bee028762ccb3499b4914ac7e85cd2ca123137d Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Tue, 13 Jan 2026 10:15:43 -0500
Subject: [PATCH] style: Reduce gap spacing to 2px for tighter tile layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed gap from gap-3 (12px) to gap-0.5 (2px) for a more compact,
cohesive tile appearance in overlay mode.

Benefits:
- Tiles feel more grouped together as a unified grid
- More screen space for tiles (less wasted on gaps)
- Cleaner, more modern appearance
- Better visual cohesion

With 2px gaps at 1280px max-width:
- Container: 1280px
- Padding: 64px
- Available: 1216px
- Gaps: 2px × 5 = 10px (vs 60px before)
- Tile width: (1216 - 10) / 6 = ~201px per tile

Result: Larger tiles with minimal spacing for a sleek, unified look.
---
 ui/desktop/src/components/Layout/TopNavigation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/desktop/src/components/Layout/TopNavigation.tsx b/ui/desktop/src/components/Layout/TopNavigation.tsx
index db82a7bcb9..8457574bd5 100644
--- a/ui/desktop/src/components/Layout/TopNavigation.tsx
+++ b/ui/desktop/src/components/Layout/TopNavigation.tsx
@@ -465,7 +465,7 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({ isExpanded, setIsE
   const isVertical = position === 'left' || position === 'right';
   
   const gridClasses = isOverlayMode
-    ? 'grid gap-3 w-full max-w-7xl mx-auto px-4 sm:px-6 md:px-8 py-4 sm:py-6 md:py-8'
+    ? 'grid gap-0.5 w-full max-w-7xl mx-auto px-4 sm:px-6 md:px-8 py-4 sm:py-6 md:py-8'
     : isVertical
       ? 'grid grid-cols-1 gap-0.5 h-full overflow-y-auto'
       : 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 lg:grid-cols-6 xl:grid-cols-6 2xl:grid-cols-6 gap-0.5';