admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): make status module grid auto-fit for denser responsive layout

Browse Source 
replace the fixed large-breakpoint column split with an auto-fit grid so
memory, network, and disk modules display side by side at typical widths
and collapse to one column only on very narrow containers.

tighten module spacing and card chrome (gap, padding, radius) to increase
information density, and add container-query refinements to keep usage and
process blocks full width while improving narrow-width behavior for memory,
network, and disk sublayouts.
This commit is contained in:
yinjianm
2026-04-16 03:46:20 +08:00
parent d28a00b3ae
commit 5118e75efe
2 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/StatusMonitor.vue
+28 -23
View File
@@ -848,15 +848,17 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
.monitor-module-grid {
display: grid;
gap: 12px;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.monitor-module {
display: grid;
gap: 12px;
gap: 10px;
min-width: 0;
border-radius: 20px;
padding: 14px;
border-radius: 18px;
padding: 12px;
container-type: inline-size;
}
.monitor-module__heading {
@@ -1474,34 +1476,21 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
}
}
@container (min-width: 760px) {
.monitor-module-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@container (min-width: 420px) {
.monitor-module--usage,
.monitor-module--process {
grid-column: 1 / -1;
}
}
@container (max-width: 440px) {
.monitor-chip {
max-width: 100%;
}
.monitor-chip__value,
.usage-lane__helper,
.disk-summary-table__row span {
white-space: normal;
}
.cpu-module__hero {
@container (max-width: 250px) {
.module-split--memory,
.network-module__hero,
.disk-compact-top {
grid-template-columns: 1fr;
}
.network-module__hero,
.disk-compact-top {
.memory-stat-stack {
grid-template-columns: 1fr;
}
@@ -1524,6 +1513,22 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
}
}
@container (max-width: 440px) {
.monitor-chip {
max-width: 100%;
}
.monitor-chip__value,
.usage-lane__helper,
.disk-summary-table__row span {
white-space: normal;
}
.cpu-module__hero {
grid-template-columns: 1fr;
}
}
@container (max-width: 360px) {
.process-summary-strip {
grid-template-columns: 1fr;