From 72a1ecd19290e3895def4f8c6a4b5e7fbf28404e Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Sun, 19 Apr 2026 12:36:59 -0400
Subject: [PATCH] feat(ui): wire overlay popovers to density tokens (#695)

Swap hardcoded Tailwind padding on NodeSwitcher, UserProfileDropdown,
and NotificationPanel for var(--density-row-x) / --density-row-y /
--density-cell-y / --density-tile-y custom properties so the three
sidebar/header overlays now tighten when the Appearance setting is
switched to Compact, matching the reference pattern in ui/table.tsx.
---
 frontend/src/components/NodeSwitcher.tsx        |  6 +++---
 frontend/src/components/NotificationPanel.tsx   | 10 +++++-----
 frontend/src/components/UserProfileDropdown.tsx |  8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/NodeSwitcher.tsx b/frontend/src/components/NodeSwitcher.tsx
index d42f8aaf..bb2937a6 100644
--- a/frontend/src/components/NodeSwitcher.tsx
+++ b/frontend/src/components/NodeSwitcher.tsx
@@ -99,7 +99,7 @@ export function NodeSwitcher({ onManageNodes }: NodeSwitcherProps) {
                 <div className="relative overflow-hidden">
                     <div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-brand/[0.05] via-transparent to-transparent" />
                     <div className="absolute inset-y-0 left-0 w-[2px] bg-brand/60" />
-                    <div className="relative flex items-center justify-between px-5 py-3.5">
+                    <div className="relative flex items-center justify-between px-[var(--density-row-x)] py-[var(--density-tile-y)]">
                         <div className="flex items-baseline gap-2.5">
                             <span className="font-display text-xl italic leading-none text-stat-value">
                                 Connected
@@ -136,7 +136,7 @@ export function NodeSwitcher({ onManageNodes }: NodeSwitcherProps) {
                                 }}
                                 aria-current={isActive ? 'true' : undefined}
                                 className={cn(
-                                    'group relative flex w-full items-center gap-3 px-5 py-2.5 text-left transition-colors',
+                                    'group relative flex w-full items-center gap-3 px-[var(--density-row-x)] py-[var(--density-row-y)] text-left transition-colors',
                                     'hover:bg-accent focus-visible:bg-accent focus-visible:outline-none',
                                 )}
                             >
@@ -182,7 +182,7 @@ export function NodeSwitcher({ onManageNodes }: NodeSwitcherProps) {
                             setOpen(false);
                             onManageNodes();
                         }}
-                        className="flex w-full items-center gap-2.5 px-5 py-2.5 text-left text-sm text-stat-value transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
+                        className="flex w-full items-center gap-2.5 px-[var(--density-row-x)] py-[var(--density-row-y)] text-left text-sm text-stat-value transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
                     >
                         <Settings2 className="h-4 w-4 text-stat-icon" strokeWidth={1.5} />
                         <span className="flex-1 truncate">Manage nodes</span>
diff --git a/frontend/src/components/NotificationPanel.tsx b/frontend/src/components/NotificationPanel.tsx
index 045cf612..7a36ce28 100644
--- a/frontend/src/components/NotificationPanel.tsx
+++ b/frontend/src/components/NotificationPanel.tsx
@@ -169,7 +169,7 @@ export function NotificationPanel({
                 <div className="relative overflow-hidden">
                     <div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-brand/[0.05] via-transparent to-transparent" />
                     <div className="absolute inset-y-0 left-0 w-[2px] bg-brand/60" />
-                    <div className="relative flex items-center justify-between px-5 py-3.5">
+                    <div className="relative flex items-center justify-between px-[var(--density-row-x)] py-[var(--density-tile-y)]">
                         <div className="flex items-baseline gap-2.5">
                             <span className="font-display text-xl italic leading-none text-stat-value">
                                 Notifications
@@ -207,7 +207,7 @@ export function NotificationPanel({
                 </div>
 
                 {/* Filter segment */}
-                <div className="flex items-center justify-end border-t border-card-border/60 px-5 py-2.5">
+                <div className="flex items-center justify-end border-t border-card-border/60 px-[var(--density-row-x)] py-[var(--density-row-y)]">
                     <SegmentedControl
                         value={filter}
                         options={filterOptions}
@@ -223,7 +223,7 @@ export function NotificationPanel({
                     <div className="max-h-[480px] overflow-y-auto border-t border-card-border/60">
                         {groups.map((group) => (
                             <div key={group.label}>
-                                <div className="sticky top-0 z-10 border-b border-card-border/40 bg-popover/95 px-5 py-1.5 font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle backdrop-blur-[10px] backdrop-saturate-[1.15]">
+                                <div className="sticky top-0 z-10 border-b border-card-border/40 bg-popover/95 px-[var(--density-row-x)] py-[var(--density-cell-y)] font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle backdrop-blur-[10px] backdrop-saturate-[1.15]">
                                     {group.label}
                                 </div>
                                 {group.items.map((notif) => (
@@ -260,7 +260,7 @@ function NotificationRow({ notif, showNodeName, onDelete, onNavigate }: Notifica
     const isRoutable = Boolean(onNavigate && notif.stack_name);
 
     const surfaceClasses = cn(
-        'flex w-full items-start gap-3 px-5 py-3 text-left transition-colors',
+        'flex w-full items-start gap-3 px-[var(--density-row-x)] py-[var(--density-row-y)] text-left transition-colors',
         isRoutable && 'cursor-pointer hover:bg-accent/40 focus-visible:bg-accent/40 focus-visible:outline-none',
     );
 
@@ -352,7 +352,7 @@ function EmptyState({ filter, hasAny }: EmptyStateProps) {
     }
 
     return (
-        <div className="flex flex-col items-center gap-2 border-t border-card-border/60 px-5 py-12 text-center">
+        <div className="flex flex-col items-center gap-2 border-t border-card-border/60 px-[var(--density-row-x)] py-12 text-center">
             <BellOff className="h-8 w-8 text-stat-icon" strokeWidth={1.5} />
             <p className="text-sm text-stat-value">{title}</p>
             <p className="font-mono text-[11px] text-stat-subtitle">{subtitle}</p>
diff --git a/frontend/src/components/UserProfileDropdown.tsx b/frontend/src/components/UserProfileDropdown.tsx
index f435323e..a4bd24d4 100644
--- a/frontend/src/components/UserProfileDropdown.tsx
+++ b/frontend/src/components/UserProfileDropdown.tsx
@@ -96,7 +96,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
                 <div className="relative overflow-hidden">
                     <div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-brand/[0.05] via-transparent to-transparent" />
                     <div className="absolute inset-y-0 left-0 w-[2px] bg-brand/60" />
-                    <div className="relative flex items-center gap-3 px-5 py-4">
+                    <div className="relative flex items-center gap-3 px-[var(--density-row-x)] py-[var(--density-tile-y)]">
                         <div className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full border border-brand/25 bg-brand/10">
                             {initials ? (
                                 <span className="font-display text-lg leading-none text-brand">
@@ -157,7 +157,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
                 </div>
 
                 {/* Appearance */}
-                <div className="flex items-center justify-between gap-3 border-t border-card-border/60 px-5 py-3">
+                <div className="flex items-center justify-between gap-3 border-t border-card-border/60 px-[var(--density-row-x)] py-[var(--density-row-y)]">
                     <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
                         Appearance
                     </span>
@@ -175,7 +175,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
                     <button
                         type="button"
                         onClick={logout}
-                        className="flex w-full items-center gap-2.5 px-5 py-3 text-left text-sm text-destructive transition-colors hover:bg-destructive/5 focus-visible:bg-destructive/5 focus-visible:outline-none"
+                        className="flex w-full items-center gap-2.5 px-[var(--density-row-x)] py-[var(--density-row-y)] text-left text-sm text-destructive transition-colors hover:bg-destructive/5 focus-visible:bg-destructive/5 focus-visible:outline-none"
                     >
                         <LogOut className="h-4 w-4" strokeWidth={1.5} />
                         Log Out
@@ -209,7 +209,7 @@ function MenuRow({
 }: MenuRowProps) {
     const TrailingIcon = trailingIcon ?? (external ? ExternalLink : undefined);
     const classes = cn(
-        'flex w-full items-center gap-2.5 px-5 py-2.5 text-left text-sm text-stat-value transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none',
+        'flex w-full items-center gap-2.5 px-[var(--density-row-x)] py-[var(--density-row-y)] text-left text-sm text-stat-value transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none',
         disabled && 'pointer-events-none opacity-50',
     );