From 98ed976d2d5bfc18d13fffd7896ec8204fdd226f Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Tue, 13 Jan 2026 10:46:12 -0500
Subject: [PATCH] feat: Add Windows Start Menu style container to condensed
 overlay

- Wrapped overlay content in defined container box
- Added bg-background-card with backdrop-blur-xl for frosted glass effect
- Added rounded-2xl corners for modern appearance
- Added shadow-2xl for depth and elevation
- Added border-border-default for subtle definition
- Fixed width at 600px with maxHeight 500px
- Moved padding from motion.div to inner container
- Creates cohesive, contained menu experience like Windows Start Menu
---
 .../src/components/Layout/CondensedNavigation.tsx   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/ui/desktop/src/components/Layout/CondensedNavigation.tsx b/ui/desktop/src/components/Layout/CondensedNavigation.tsx
index 5bfc2797a1..16a9a99766 100644
--- a/ui/desktop/src/components/Layout/CondensedNavigation.tsx
+++ b/ui/desktop/src/components/Layout/CondensedNavigation.tsx
@@ -574,7 +574,7 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
                 stiffness: 400,
                 damping: 25,
               }}
-              className={`${isOverlayMode ? 'p-4 bg-transparent rounded-2xl' : ''} ${
+              className={`${isOverlayMode ? '' : ''} ${
                 !isOverlayMode && isVertical 
                   ? position === 'right' 
                     ? 'h-full pl-0.5' 
@@ -583,11 +583,15 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
                     ? 'pr-0.5 pb-0.5'
                     : !isOverlayMode ? 'pr-0.5' : ''
               }`}
-              style={{ width: isVertical || isOverlayMode ? (isOverlayMode ? '600px' : '240px') : undefined, height: isOverlayMode ? '500px' : undefined }}
             >
 {isOverlayMode ? (
-                // Overlay Mode: Two-column layout with navigation rows on left, widget tiles on right
-                <div className="flex flex-row gap-4 w-full h-full items-start">
+                // Overlay Mode: Windows Start Menu style container
+                <div 
+                  className="bg-background-card backdrop-blur-xl rounded-2xl shadow-2xl border border-border-default overflow-hidden"
+                  style={{ width: '600px', maxHeight: '500px' }}
+                >
+                  {/* Two-column layout with navigation rows on left, widget tiles on right */}
+                  <div className="flex flex-row gap-4 w-full h-full items-start p-4">
                   {/* Left Column: Navigation Rows */}
                   <div className="flex flex-col gap-[1px] w-80">
                     {navItems.filter(item => !item.isWidget).map((item, index) => {
@@ -732,6 +736,7 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
                       })}
                     </div>
                   </div>
+                  </div>
                 </div>
               ) : (
                 // Push Mode: Original single-column layout