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.
This commit is contained in:
Anso
2026-04-19 12:36:59 -04:00
committed by GitHub
parent e721742560
commit 72a1ecd192
3 changed files with 12 additions and 12 deletions
+3 -3
View File
@@ -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>