style: Reduce gap spacing to 2px for tighter tile layout

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.
This commit is contained in:
spencrmartin
2026-01-13 10:15:43 -05:00
parent b03dee1751
commit 5bee028762
@@ -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';