From 3a7fef59b0111dbeae353f4c61ac90d0c45206d6 Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Tue, 28 Apr 2026 12:24:14 +0200
Subject: [PATCH] fix(visual): dark-mode-safe borders + sidebar relative +
 ring-background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Code-review follow-up to PR10b-e:
- DetailHeaderStrip + KPITile: border-slate-200 → border-border so dark
  mode doesn't paint a bright halo around the gradient strip.
- Topbar avatar: ring-white → ring-background so the 2px ring tracks
  the surface (matches the sidebar footer pattern).
- KpiTileSkeleton stripe: bg-slate-100 → bg-muted for parity with
  shadcn skeleton tokens in dark mode.
- Sidebar <aside>: add `relative` so the absolute-positioned
  collapse-toggle button anchors to the sidebar itself rather than
  the nearest positioned ancestor.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/dashboard/kpi-cards.tsx        | 4 ++--
 src/components/layout/sidebar.tsx             | 2 +-
 src/components/layout/topbar.tsx              | 2 +-
 src/components/shared/detail-header-strip.tsx | 2 +-
 src/components/ui/kpi-tile.tsx                | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/dashboard/kpi-cards.tsx b/src/components/dashboard/kpi-cards.tsx
index ade422a..f3a5d59 100644
--- a/src/components/dashboard/kpi-cards.tsx
+++ b/src/components/dashboard/kpi-cards.tsx
@@ -28,8 +28,8 @@ function formatPercent(value: number): string {
 
 function KpiTileSkeleton() {
   return (
-    <div className="relative overflow-hidden rounded-xl border border-slate-200 bg-card p-5 shadow-sm">
-      <div className="absolute inset-x-0 top-0 h-1 bg-slate-100" aria-hidden />
+    <div className="relative overflow-hidden rounded-xl border border-border bg-card p-5 shadow-sm">
+      <div className="absolute inset-x-0 top-0 h-1 bg-muted" aria-hidden />
       <Skeleton className="h-3 w-24" />
       <Skeleton className="mt-3 h-7 w-32" />
       <Skeleton className="mt-2 h-3 w-12" />
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index 279eaec..e1b482b 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -338,7 +338,7 @@ export function Sidebar({ portRoles, isSuperAdmin = false, user }: SidebarProps)
       {/* Desktop sidebar */}
       <aside
         className={cn(
-          'hidden md:flex flex-col h-screen border-r border-[#474e66] transition-all duration-200 ease-in-out shrink-0',
+          'relative hidden md:flex flex-col h-screen border-r border-[#474e66] transition-all duration-200 ease-in-out shrink-0',
           sidebarCollapsed ? 'w-sidebar-collapsed' : 'w-sidebar',
         )}
         style={{ backgroundColor: '#1e2844' }}
diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx
index fefae42..8529547 100644
--- a/src/components/layout/topbar.tsx
+++ b/src/components/layout/topbar.tsx
@@ -96,7 +96,7 @@ export function Topbar({ ports, user }: TopbarProps) {
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" size="icon" className="rounded-full">
-              <Avatar className="w-7 h-7 shadow-sm ring-2 ring-white">
+              <Avatar className="w-7 h-7 shadow-sm ring-2 ring-background">
                 <AvatarImage src={undefined} />
                 <AvatarFallback className="bg-brand text-white text-xs font-semibold">
                   {(user?.name ?? 'U').slice(0, 1).toUpperCase()}
diff --git a/src/components/shared/detail-header-strip.tsx b/src/components/shared/detail-header-strip.tsx
index 2056471..03cba18 100644
--- a/src/components/shared/detail-header-strip.tsx
+++ b/src/components/shared/detail-header-strip.tsx
@@ -10,7 +10,7 @@ export function DetailHeaderStrip({ children, className }: DetailHeaderStripProp
   return (
     <div
       className={cn(
-        'rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs',
+        'rounded-xl border border-border bg-gradient-brand-soft px-5 py-4 shadow-xs',
         className,
       )}
     >
diff --git a/src/components/ui/kpi-tile.tsx b/src/components/ui/kpi-tile.tsx
index f54a038..0c242b5 100644
--- a/src/components/ui/kpi-tile.tsx
+++ b/src/components/ui/kpi-tile.tsx
@@ -44,7 +44,7 @@ export function KPITile({
   return (
     <div
       className={cn(
-        'group relative overflow-hidden rounded-xl border border-slate-200 bg-gradient-brand-soft p-5 shadow-sm transition-all duration-base ease-smooth hover:shadow-md',
+        'group relative overflow-hidden rounded-xl border border-border bg-gradient-brand-soft p-5 shadow-sm transition-all duration-base ease-smooth hover:shadow-md',
         className,
       )}
       {...props}