From 9372767443a4ea82ff4394fec23bfb724dcb9117 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 21 Jun 2026 08:52:58 +0000
Subject: [PATCH] Make Node Status card scrollable with a 5-column layout and
 invisible-by-default scrollbar

---
 src/index.css                | 27 +++++++++++++++++++++++++++
 src/pages/Infrastructure.tsx |  4 ++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/index.css b/src/index.css
index c5711f9..6e9e00f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -39,6 +39,33 @@ html, body {
   overflow: hidden;
 }
 
+.scrollbar-ghost {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.scrollbar-ghost::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scrollbar-ghost::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollbar-ghost::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 6px;
+}
+
+.scrollbar-ghost:hover::-webkit-scrollbar-thumb,
+.scrollbar-ghost:hover {
+  scrollbar-color: rgba(200, 164, 52, 0.25) transparent;
+}
+
+.scrollbar-ghost:hover::-webkit-scrollbar-thumb {
+  background: rgba(200, 164, 52, 0.25);
+}
+
 /* Native <select> dropdown panels are OS/browser-rendered and ignore most
    component styling — without this, options render with a white background
    and near-white text, making them unreadable against this dark theme.
diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index 3731f0a..3b4401f 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -246,7 +246,7 @@ export default function Infrastructure() {
             <div className="relative z-10 flex flex-1 flex-col">
               <h3 style={sectionTitle}>Node Status</h3>
               {resources && resources.length > 0 ? (
-                <div className="grid flex-1 grid-cols-4 content-start gap-3" style={{ overflowY: 'auto' }}>
+                <div className="scrollbar-ghost grid min-h-0 flex-1 grid-cols-5 content-start gap-2" style={{ overflowY: 'auto' }}>
                   {resources.map((node, i) => (
                     <div
                       key={i}
@@ -255,7 +255,7 @@ export default function Infrastructure() {
                         backgroundColor: 'rgba(10, 10, 12, 0.55)',
                         border: `1px solid ${nodeStatusColor[node.status]}33`,
                         borderRadius: '8px',
-                        padding: '10px 12px',
+                        padding: '8px 10px',
                         display: 'flex',
                         flexDirection: 'column',
                         gap: '6px',