hippogrief/pobsync
1
0
Fork 0
Code Issues 21 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

(ui) Harden dashboard responsive layout

Browse Source 
Rework the dashboard priority grid to avoid cramped four-column layouts,
prevent stretched empty panels, and make long host and snapshot text wrap
safely across dashboard cards.

Refs #38
This commit is contained in:
Peter van Arkel
2026-05-21 14:43:24 +02:00
parent 4c76ae9f52
commit 025cd0336c
3 changed files with 44 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/pobsync_backend/templates/pobsync_backend/base.html
View File

@@ -304,17 +304,22 @@
}
.inline-form { margin: 0; }
.dashboard-priority-grid {
align-items: start;
display: grid;
gap: 14px;
grid-template-columns: minmax(280px, 1.25fr) repeat(3, minmax(220px, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-bottom: 20px;
}
.priority-panel {
display: grid;
gap: 12px;
margin-bottom: 0;
min-width: 0;
}
.priority-panel > h2:first-child {
flex-wrap: wrap;
margin-bottom: 0;
}
.priority-panel > h2:first-child { margin-bottom: 0; }
.action-list,
.activity-list,
.schedule-list {
@@ -404,6 +409,14 @@
gap: 2px;
min-width: 0;
}
.action-row strong,
.action-row .muted,
.activity-row strong,
.activity-row .muted,
.schedule-row strong,
.schedule-row .muted {
overflow-wrap: anywhere;
}
.schedule-time {
justify-items: end;
text-align: right;
@@ -436,6 +449,10 @@
justify-content: space-between;
padding-top: 8px;
}
.storage-priority-facts strong {
text-align: right;
overflow-wrap: anywhere;
}
.host-control-grid {
display: grid;
gap: 14px;
@@ -623,7 +640,7 @@
.host-card-timeline {
display: grid;
gap: 16px 22px;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.host-card-stats {
align-content: start;
@@ -649,6 +666,10 @@
.host-card-item .value {
overflow-wrap: anywhere;
}
.host-card-item .value a {
overflow-wrap: anywhere;
word-break: break-word;
}
.host-card-stat {
display: grid;
gap: 3px;
@@ -778,6 +799,18 @@
.host-card-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.insight-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
.dashboard-priority-grid {
grid-template-columns: 1fr;
}
.schedule-row {
grid-template-columns: 1fr;
}
.schedule-time {
justify-items: start;
text-align: left;
}
}
</style>
</head>
<body>

8
src/pobsync_backend/templates/pobsync_backend/dashboard.html
View File

@@ -33,7 +33,7 @@
{% endif %}
<section class="dashboard-priority-grid" aria-label="Operator priorities">
<article class="panel priority-panel">
<article class="panel priority-panel dashboard-panel-required">
<h2>Required Action</h2>
{% if action_items %}
<div class="action-list">
@@ -70,7 +70,7 @@
{% endif %}
</article>
<article class="panel priority-panel">
<article class="panel priority-panel dashboard-panel-schedules">
<h2>Next Scheduled Work <a class="button-link secondary compact" href="{% url 'schedules_list' %}">View all</a></h2>
{% if next_schedule_rows %}
<div class="schedule-list">
@@ -96,7 +96,7 @@
{% endif %}
</article>
<article class="panel priority-panel">
<article class="panel priority-panel dashboard-panel-activity">
<h2>Recent Activity <a class="button-link secondary compact" href="{% url 'runs_list' %}">View all</a></h2>
{% if recent_runs %}
<div class="activity-list">
@@ -115,7 +115,7 @@
{% endif %}
</article>
<article class="panel priority-panel">
<article class="panel priority-panel dashboard-panel-storage">
<h2>Storage Pressure</h2>
{% if stats_summary.runs_sampled %}
<div class="storage-priority">

4
src/pobsync_backend/tests/test_views.py
View File

@@ -103,6 +103,10 @@ class ViewTests(TestCase):
self.assertEqual(response.status_code, 200)
self.assertContains(response, "Control panel")
self.assertContains(response, "Backup health, required action, storage pressure, and recent activity in one place.")
self.assertContains(response, "dashboard-panel-required")
self.assertContains(response, "dashboard-panel-schedules")
self.assertContains(response, "dashboard-panel-activity")
self.assertContains(response, "dashboard-panel-storage")
self.assertContains(response, "Dashboard")
self.assertContains(response, "web-01")
self.assertContains(response, "20260519-021500Z__ABCDEFGH")