feat: enhance mobile responsiveness for management routes and table layout

This commit is contained in:
shuaiplus
2026-05-12 15:16:17 +08:00
parent 700910099b
commit 06431c4145
+72
View File
@@ -1236,3 +1236,75 @@ input[type='file'].input::file-selector-button {
grid-template-columns: 1fr auto 1fr;
}
}
/* Keep management routes mobile-first after the final polish layer overrides. */
@media (max-width: 1180px) {
.content,
.route-stage,
.stack,
.backup-grid {
min-width: 0;
max-width: 100%;
}
.route-stage {
overflow-x: hidden;
}
.backup-grid {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
padding: 0;
}
.backup-operations-sidebar,
.backup-destination-sidebar,
.backup-detail-panel {
width: 100%;
}
}
@media (max-width: 760px) {
.table,
.table tbody,
.table tr,
.table td {
display: block;
width: 100%;
}
.table thead {
display: none;
}
.table {
border-spacing: 0;
}
.table tr {
margin-bottom: 10px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
}
.table td {
padding: 10px 0;
border-bottom: 1px solid var(--line-soft);
overflow-wrap: anywhere;
}
.table td:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.table td::before {
display: block;
content: attr(data-label);
margin-bottom: 4px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
}