Make Node Status card scrollable with a 5-column layout and invisible-by-default scrollbar
This commit is contained in:
parent
98b69e47d5
commit
9372767443
2 changed files with 29 additions and 2 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue