From f7b95adfd29470f3330646599ad5e666bf921b15 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Sat, 21 Mar 2026 12:45:31 -0500
Subject: [PATCH] fix(ui): tighten device detail page for control surface feel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Header: reduce padding, align items-center, dot+label status,
  truncating hostname, compact metadata, version prefixed with v
- Actions: ghost icon buttons for Edit/Delete, tighter gap, smaller icons
- InfoRow: py-2→py-1, text-sm→text-xs, label w-32→w-24, border-subtle
- Data panels: rounded-lg→rounded-sm, p-4→p-3, border-default
- StandardConfigSidebar: tighter rows py-1.5→py-[3px], w-48→w-44,
  accent-soft active bg, text-label section headers, 50ms transitions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../simple-config/StandardConfigSidebar.tsx   | 22 +++----
 .../tenants/$tenantId/devices/$deviceId.tsx   | 57 +++++++++++--------
 2 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/simple-config/StandardConfigSidebar.tsx b/frontend/src/components/simple-config/StandardConfigSidebar.tsx
index 5422347..09c61d0 100644
--- a/frontend/src/components/simple-config/StandardConfigSidebar.tsx
+++ b/frontend/src/components/simple-config/StandardConfigSidebar.tsx
@@ -133,17 +133,17 @@ export function StandardConfigSidebar({
   onSwitchToSimple,
 }: StandardConfigSidebarProps) {
   return (
-    <div className="w-48 flex-shrink-0 flex flex-col min-h-[400px]">
-      <nav className="space-y-3 overflow-y-auto flex-1">
+    <div className="w-44 flex-shrink-0 flex flex-col min-h-[400px]">
+      <nav className="space-y-2 overflow-y-auto flex-1">
         {STANDARD_GROUPS.map((group) => {
           const GroupIcon = group.icon
           return (
             <div key={group.label}>
-              <p className="flex items-center gap-1.5 text-xs font-medium text-text-muted uppercase tracking-wider mb-1 px-3">
+              <p className="flex items-center gap-1.5 text-[7px] text-text-label uppercase tracking-[2px] mb-1 pl-2">
                 <GroupIcon className="h-3 w-3" />
                 {group.label}
               </p>
-              <div className="space-y-0.5">
+              <div>
                 {group.items.map((item) => {
                   const isActive = activeTab === item.id
                   return (
@@ -152,10 +152,10 @@ export function StandardConfigSidebar({
                       onClick={() => onTabChange(item.id)}
                       data-testid={`tab-${item.id}`}
                       className={cn(
-                        'flex items-center w-full text-left pl-7 pr-3 py-1.5 rounded-r-lg text-sm transition-colors',
+                        'flex items-center w-full text-left pl-6 pr-2 py-[3px] text-xs border-l-2 transition-[border-color,color] duration-[50ms]',
                         isActive
-                          ? 'bg-accent/10 text-accent border-l-2 border-accent'
-                          : 'text-text-secondary hover:text-text-primary hover:bg-elevated/50 border-l-2 border-transparent',
+                          ? 'bg-accent-soft text-text-primary font-medium border-accent rounded-r-sm'
+                          : 'text-text-secondary hover:border-accent border-transparent',
                       )}
                     >
                       <span className="truncate">{item.label}</span>
@@ -169,13 +169,13 @@ export function StandardConfigSidebar({
       </nav>
 
       {onSwitchToSimple && (
-        <div className="mt-auto pt-4 border-t border-border/50">
+        <div className="mt-auto pt-2 border-t border-border-subtle">
           <button
             onClick={onSwitchToSimple}
-            className="flex items-center gap-2 w-full text-left px-3 py-2 text-xs text-text-muted hover:text-text-secondary transition-colors"
+            className="flex items-center gap-1.5 w-full text-left px-2 py-1.5 text-[10px] text-text-muted hover:text-text-secondary transition-[color] duration-[50ms]"
           >
-            <Sliders className="h-3.5 w-3.5" />
-            Switch to Simple mode
+            <Sliders className="h-3 w-3" />
+            Simple mode
           </button>
         </div>
       )}
diff --git a/frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx b/frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx
index 8e052fb..b638af7 100644
--- a/frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx
+++ b/frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx
@@ -306,9 +306,9 @@ function TlsModeSelector({
 
 function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div className="flex items-start gap-4 py-2 border-b border-border/50 last:border-0">
-      <span className="text-xs text-text-muted w-32 flex-shrink-0 pt-0.5">{label}</span>
-      <span className="text-sm text-text-primary flex-1">{value ?? '—'}</span>
+    <div className="flex items-center gap-3 py-1 border-b border-border-subtle last:border-0">
+      <span className="text-[10px] text-text-muted w-24 flex-shrink-0">{label}</span>
+      <span className="text-xs text-text-primary flex-1">{value ?? '—'}</span>
     </div>
   )
 }
@@ -449,11 +449,11 @@ function DeviceDetailPage() {
   return (
     <div className={cn('space-y-4', mode === 'simple' ? 'max-w-5xl' : 'max-w-3xl')} data-testid="device-detail">
       {/* Device workspace header */}
-      <div className="bg-sidebar border border-border-default rounded-sm p-2 px-3">
-        <div className="flex justify-between items-start">
-          <div>
+      <div className="bg-sidebar border border-border-default rounded-sm px-3 py-1.5">
+        <div className="flex justify-between items-center">
+          <div className="min-w-0">
             {/* Breadcrumb */}
-            <div className="mb-0.5">
+            <div className="mb-px">
               <Link
                 to="/tenants/$tenantId/devices"
                 params={{ tenantId }}
@@ -464,33 +464,40 @@ function DeviceDetailPage() {
               <span className="text-[8px] text-text-muted mx-1">&rsaquo;</span>
               <span className="text-[8px] text-text-secondary">{device.hostname}</span>
             </div>
-            {/* Device name + status */}
-            <div className="flex items-center gap-2">
+            {/* Device name + status dot + label */}
+            <div className="flex items-center gap-1.5">
               <div className={cn(
-                'w-1.5 h-1.5 rounded-full',
+                'w-1.5 h-1.5 rounded-full flex-shrink-0',
                 device.status === 'online' ? 'bg-online' :
                 device.status === 'degraded' ? 'bg-warning' : 'bg-offline'
               )} />
-              <h1 className="text-sm font-semibold text-text-primary" data-testid="device-hostname">
+              <h1 className="text-[13px] font-semibold text-text-primary truncate" data-testid="device-hostname">
                 {device.hostname}
               </h1>
+              <span className={cn(
+                'text-[9px] flex-shrink-0',
+                device.status === 'online' ? 'text-online' :
+                device.status === 'degraded' ? 'text-warning' : 'text-offline'
+              )}>
+                {device.status}
+              </span>
               <TlsSecurityBadge tlsMode={device.tls_mode} />
             </div>
-            {/* Metadata line */}
-            <div className="text-[9px] text-text-secondary mt-0.5 pl-3.5">
+            {/* Metadata */}
+            <div className="text-[9px] text-text-secondary mt-px pl-[9px]">
               {device.model ?? device.board_name ?? '\u2014'}
               {' \u00b7 '}
               <span className="font-mono text-[8px]">{device.ip_address}</span>
               {device.routeros_version && (
                 <>
-                  {' \u00b7 RouterOS '}
-                  <span className="font-mono text-[8px]">{device.routeros_version}</span>
+                  {' \u00b7 '}
+                  <span className="font-mono text-[8px]">v{device.routeros_version}</span>
                 </>
               )}
             </div>
           </div>
-          {/* Actions: right side */}
-          <div className="flex items-center gap-1.5 mt-3">
+          {/* Actions */}
+          <div className="flex items-center gap-1 flex-shrink-0 ml-3">
             <SimpleModeToggle mode={mode} onModeChange={toggleMode} />
             {user?.role !== 'viewer' && device.routeros_version !== null && (
               <>
@@ -502,13 +509,13 @@ function DeviceDetailPage() {
               <SSHTerminal tenantId={tenantId} deviceId={deviceId} deviceName={device.hostname} />
             )}
             {canWrite(user) && (
-              <Button variant="outline" size="sm" onClick={() => setEditOpen(true)} data-testid="button-edit-device">
-                <Pencil className="h-3.5 w-3.5" />
+              <Button variant="ghost" size="icon" className="h-6 w-6 text-text-muted" onClick={() => setEditOpen(true)} data-testid="button-edit-device">
+                <Pencil className="h-3 w-3" />
               </Button>
             )}
             {canDelete(user) && (
-              <Button variant="destructive" size="sm" onClick={handleDelete} data-testid="button-delete-device">
-                <Trash2 className="h-3.5 w-3.5" />
+              <Button variant="ghost" size="icon" className="h-6 w-6 text-text-muted" onClick={handleDelete} data-testid="button-delete-device">
+                <Trash2 className="h-3 w-3" />
               </Button>
             )}
           </div>
@@ -535,7 +542,7 @@ function DeviceDetailPage() {
         overviewContent={
           <>
             {/* Device info */}
-            <div className="rounded-lg border border-border bg-panel px-4 py-2">
+            <div className="rounded-sm border border-border-default bg-panel px-3 py-1.5">
               <InfoRow label="Model" value={device.model} />
               <InfoRow label="RouterOS" value={device.routeros_version} />
               <InfoRow label="Firmware" value={device.firmware_version || 'N/A'} />
@@ -588,7 +595,7 @@ function DeviceDetailPage() {
             </div>
 
             {/* Credentials (masked) */}
-            <div className="rounded-lg border border-border bg-panel px-4 py-3">
+            <div className="rounded-sm border border-border-default bg-panel px-3 py-2">
               <div className="flex items-center justify-between mb-3">
                 <h3 className="text-sm font-medium text-text-secondary">Credentials</h3>
                 <Button
@@ -625,7 +632,7 @@ function DeviceDetailPage() {
             </div>
 
             {/* Groups */}
-            <div className="rounded-lg border border-border bg-panel px-4 py-3 space-y-3">
+            <div className="rounded-sm border border-border-default bg-panel px-3 py-2 space-y-3">
               <div className="flex items-center gap-2">
                 <FolderOpen className="h-4 w-4 text-text-muted" />
                 <h3 className="text-sm font-medium text-text-secondary">Groups</h3>
@@ -671,7 +678,7 @@ function DeviceDetailPage() {
             </div>
 
             {/* Tags */}
-            <div className="rounded-lg border border-border bg-panel px-4 py-3 space-y-3">
+            <div className="rounded-sm border border-border-default bg-panel px-3 py-2 space-y-3">
               <div className="flex items-center gap-2">
                 <Tag className="h-4 w-4 text-text-muted" />
                 <h3 className="text-sm font-medium text-text-secondary">Tags</h3>