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;
|
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.
|
||||||
|
|
|
||||||
|
|
@ -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',
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue