Make Node Status card scrollable with a 5-column layout and invisible-by-default scrollbar

This commit is contained in:
Claude 2026-06-21 08:52:58 +00:00
parent 98b69e47d5
commit 9372767443
No known key found for this signature in database
2 changed files with 29 additions and 2 deletions

View file

@ -39,6 +39,33 @@ html, body {
overflow: hidden; 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 /* Native <select> dropdown panels are OS/browser-rendered and ignore most
component styling without this, options render with a white background component styling without this, options render with a white background
and near-white text, making them unreadable against this dark theme. and near-white text, making them unreadable against this dark theme.

View file

@ -246,7 +246,7 @@ export default function Infrastructure() {
<div className="relative z-10 flex flex-1 flex-col"> <div className="relative z-10 flex flex-1 flex-col">
<h3 style={sectionTitle}>Node Status</h3> <h3 style={sectionTitle}>Node Status</h3>
{resources && resources.length > 0 ? ( {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) => ( {resources.map((node, i) => (
<div <div
key={i} key={i}
@ -255,7 +255,7 @@ export default function Infrastructure() {
backgroundColor: 'rgba(10, 10, 12, 0.55)', backgroundColor: 'rgba(10, 10, 12, 0.55)',
border: `1px solid ${nodeStatusColor[node.status]}33`, border: `1px solid ${nodeStatusColor[node.status]}33`,
borderRadius: '8px', borderRadius: '8px',
padding: '10px 12px', padding: '8px 10px',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: '6px', gap: '6px',