Fix 4 HIGH overflow bugs: scrollable Docker tiles, tables, tabs, app rows
- Dashboard: overflow-x auto on card td cells for Docker container grid - Dashboard: text-overflow ellipsis on span.outer for long container names - Main: overflow-x auto on tabpanels (ZFS Master, Boot Device, etc.) - Docker/VM: overflow-x auto on .TableContainer wrapper - Apps: overflow-x auto on .ca_homeTemplates card rows - Apps: box-sizing border-box on .ca_appPopup to prevent card overflow - Consistent glass scrollbar styling (thin, translucent) on all Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
31
style.css
31
style.css
@@ -1075,6 +1075,9 @@ table.dashboard > tbody.sortable > tr > td {
|
||||
padding: 6px 6px !important;
|
||||
color: var(--glass-text) !important;
|
||||
background: transparent !important;
|
||||
overflow-x: auto !important;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
|
||||
scrollbar-width: thin !important;
|
||||
}
|
||||
|
||||
/* Header row of each card */
|
||||
@@ -1269,6 +1272,9 @@ table.dashboard span.outer {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-bottom: none !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* Folder showcase containers */
|
||||
@@ -1716,6 +1722,13 @@ a[href*="forums.unraid.net"] {
|
||||
DOCKER & VM LIST PAGES (advanced table view)
|
||||
============================================ */
|
||||
|
||||
/* Docker/VM page tables: allow horizontal scroll on wrapper */
|
||||
.TableContainer {
|
||||
overflow-x: auto !important;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
|
||||
scrollbar-width: thin !important;
|
||||
}
|
||||
|
||||
/* Table header bar on Docker/VM pages */
|
||||
#docker_list thead,
|
||||
#vm_list thead,
|
||||
@@ -2264,7 +2277,16 @@ a.caButton:hover {
|
||||
|
||||
/* --- Home templates horizontal scroll area --- */
|
||||
.ca_homeTemplates {
|
||||
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
|
||||
overflow-x: auto !important;
|
||||
overflow-y: hidden !important;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
|
||||
scrollbar-width: thin !important;
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
|
||||
/* App card box-sizing to prevent individual card overflow */
|
||||
.ca_appPopup {
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* --- Alternate view (app detail popup) --- */
|
||||
@@ -2834,6 +2856,13 @@ td.folder-storage {
|
||||
margin: 0 8px !important;
|
||||
}
|
||||
|
||||
/* Tabpanels (ZFS Master, Boot Device, etc.): allow horizontal scroll */
|
||||
[role="tabpanel"] {
|
||||
overflow-x: auto !important;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
|
||||
scrollbar-width: thin !important;
|
||||
}
|
||||
|
||||
/* Fix stacked panels: don't apply to tabpanel children
|
||||
which have their own panel structure */
|
||||
[role="tabpanel"] div.Panel + div.Panel {
|
||||
|
||||
Reference in New Issue
Block a user