From 6fe4294a41dc699afe39de7385dffd95f29eee19 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Tue, 13 Jan 2026 10:55:17 -0500
Subject: [PATCH] feat: Scale widget tiles to match menu container height

- Set widget grid container maxHeight to 500px
- Calculate individual widget tile height: calc((500px - 12px) / 2)
- Each tile now takes half the container height minus gap
- Widget tiles: 160px x 244px (perfectly aligned with 320px menu)
- Maintains 2x2 grid layout with 12px gap (gap-3)
- Creates cohesive visual alignment between menu and widgets
---
 ui/desktop/src/components/Layout/CondensedNavigation.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/desktop/src/components/Layout/CondensedNavigation.tsx b/ui/desktop/src/components/Layout/CondensedNavigation.tsx
index d3c5b8ea23..90b8aaa56e 100644
--- a/ui/desktop/src/components/Layout/CondensedNavigation.tsx
+++ b/ui/desktop/src/components/Layout/CondensedNavigation.tsx
@@ -685,8 +685,11 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
                   </div>
                   </div>
 
-                  {/* Widget Tiles: 2x2 Grid */}
-                  <div className="grid grid-cols-2 gap-3">
+                  {/* Widget Tiles: 2x2 Grid - Height matches menu container */}
+                  <div 
+                    className="grid grid-cols-2 gap-3"
+                    style={{ maxHeight: '500px' }}
+                  >
                     {navItems.filter(item => item.isWidget).map((item, index) => {
                       const isDragging = draggedItem === item.id;
                       const isDragOver = dragOverItem === item.id;
@@ -718,7 +721,7 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
                           style={{
                             opacity: isDragging ? 0.5 : 1,
                             width: '160px',
-                            height: '140px',
+                            height: 'calc((500px - 12px) / 2)', // (maxHeight - gap) / 2 rows
                           }}
                         >
                           <div className="w-full h-full bg-background-card backdrop-blur-xl rounded-2xl shadow-2xl border border-border-default overflow-hidden relative group">