From 80979cc27b07cdf9ff68a523144ae905588e8f94 Mon Sep 17 00:00:00 2001 From: jelveh Date: Sat, 18 Jul 2026 14:42:51 -0700 Subject: [PATCH] fix: multiple Dashboard CSS defects (dead rules, contrast, responsive) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - The desktop rule that hides the row ⋮ button ended two selectors with a comma before an @media block, so the whole construct was invalid and discarded — the ⋮ showed on every list-view row on desktop instead of deferring to right-click. Verified: it's now hidden (display:none). - Native-drop dark-mode styles keyed off .window[data-color-scheme="dark"], an attribute never set anywhere; converted to @media (prefers-color-scheme: dark) like every other dark rule so they actually apply. - .myapps-tile-label set white-space:nowrap after a 2-line -webkit-line-clamp, defeating the clamp so long app names clipped mid-glyph on one line; removed it. - .dashboard-sidebar-separator was defined a second time with a contradicting box model (background line + full-width margin), rendering a doubled, edge-to-edge divider; removed the duplicate so the inset border rule stands. - Grid-view .item-icon had a hardcoded background:white and border-radius:2px overriding its own border-radius:8px (glaring white tiles in dark mode, square-ish corners); use var(--dashboard-background) and keep 8px. - .files-footer used hardcoded #666/#CCC on theme-variable backgrounds (dim in dark, near-invisible separator in light); use the text/muted vars. - Fixed the .ui-droppable-over typo (jQuery UI emits ui-droppable-hover). - The context-menu backdrop's "desktop transparent" rule used min-width:768px while every mobile rule uses max-width:768px, overlapping at exactly 768px (a common tablet width) — a non-dimming, invisible modal shield; bumped to 769px. - At 481-768px the fixed hamburger toggle sat on top of the Files directories column's first folder because .dashboard-content.files padding wins over the media-query padding; add top clearance to the directories column there. Verified light-mode desktop is unchanged (directories padding still 16px, ⋮ hidden, footer colors resolve). --- src/gui/src/css/dashboard.css | 56 ++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/src/gui/src/css/dashboard.css b/src/gui/src/css/dashboard.css index 171a6b660..11f9bd22a 100644 --- a/src/gui/src/css/dashboard.css +++ b/src/gui/src/css/dashboard.css @@ -952,7 +952,6 @@ input.myapps-search::-webkit-search-decoration { -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; - white-space: nowrap; } /* Uninstall confirmation modal */ @@ -1815,7 +1814,7 @@ body.myapps-reordering .myapps-tile { } .dashboard-section-files .row.folder.ui-droppable-hover, -.dashboard-section-files .row.folder.selected.ui-droppable-over { +.dashboard-section-files .row.folder.selected.ui-droppable-hover { color: var(--dashboard-text); background-color: rgba(59, 130, 246, 0.1); border: 2px dashed var(--select-color); @@ -1901,14 +1900,16 @@ body.myapps-reordering .myapps-tile { } /* Dark mode support for native file drop */ -.window[data-color-scheme="dark"] .dashboard-section-files .files.native-drop-active { - background-color: rgba(100, 180, 255, 0.12); - outline-color: #4da3ff; -} +@media (prefers-color-scheme: dark) { + .dashboard-section-files .files.native-drop-active { + background-color: rgba(100, 180, 255, 0.12); + outline-color: #4da3ff; + } -.window[data-color-scheme="dark"] .dashboard-section-files .directories li.native-drop-target, -.window[data-color-scheme="dark"] .dashboard-section-files .files .row.folder.native-drop-target { - background-color: rgba(100, 180, 255, 0.2); + .dashboard-section-files .directories li.native-drop-target, + .dashboard-section-files .files .row.folder.native-drop-target { + background-color: rgba(100, 180, 255, 0.2); + } } .dashboard-section-files .files-footer { @@ -1926,7 +1927,7 @@ body.myapps-reordering .myapps-tile { align-items: center; justify-content: center; gap: 8px; - color: #666; + color: var(--dashboard-text-secondary); z-index: 10; } @@ -1936,7 +1937,7 @@ body.myapps-reordering .myapps-tile { } .dashboard-section-files .files-footer-separator { - color: #CCC; + color: var(--dashboard-text-muted); } /* Floating Selection Actions Bar */ @@ -2179,11 +2180,9 @@ body.myapps-reordering .myapps-tile { display: flex; align-items: center; justify-content: center; - /* background: #fafafa; */ + background: var(--dashboard-background); border-radius: 8px; overflow: hidden; - background: white; - border-radius: 2px; } .dashboard-section-files .files-tab .files.files-grid-view .row .item-icon img { @@ -2242,11 +2241,9 @@ body.myapps-reordering .myapps-tile { /* Hide .item-more on desktop (non-touch devices) - use right-click context menu instead */ .dashboard-section-files .files-tab:not(.touch-device) .files.files-list-view .row .item-more, .dashboard-section-files .files-tab:not(.touch-device) .files.files-grid-view .row .item-more, -@media (hover: hover) { - .dashboard-section-files .files-tab:not(.touch-device) .files.files-grid-view .row:hover .item-more, - .dashboard-section-files .files-tab:not(.touch-device) .header .columns .item-more { - display: none !important; - } +.dashboard-section-files .files-tab:not(.touch-device) .files.files-grid-view .row:hover .item-more, +.dashboard-section-files .files-tab:not(.touch-device) .header .columns .item-more { + display: none !important; } .dashboard-section-files .files-tab .files.files-grid-view .row .item-name-editor { @@ -2444,12 +2441,6 @@ body.myapps-reordering .myapps-tile { transform: rotate(-45deg) translate(4px, -4px); } -.dashboard-sidebar-separator { - height: 1px; - background: var(--dashboard-border); - margin: 15px 0; -} - /* Responsive: tablet and below */ @media (max-width: 768px) { .dashboard-sidebar-header { @@ -2486,6 +2477,15 @@ body.myapps-reordering .myapps-tile { padding: 64px 16px 24px; } + /* The Files tab keeps its own `padding: 0 0 0 10px` (higher specificity) + so the rule above doesn't clear the fixed hamburger toggle for it. Push + the directories column down instead, so the toggle doesn't sit on top of + the first folder row (the column is hidden below 480px, so this only + affects the tablet range). */ + .dashboard-section-files .directories { + padding-top: 52px; + } + .myapps-search-wrap { padding-top: 60px; margin-bottom: 10px; @@ -3999,8 +3999,10 @@ body.myapps-reordering .myapps-tile { opacity: 0.8; } -/* Desktop - transparent backdrop */ -@media (min-width: 768px) { +/* Desktop - transparent backdrop. Use 769px so it doesn't overlap the mobile + rules (all keyed to max-width: 768px) at exactly 768px, where a touch tablet + would otherwise get a fully transparent, non-dimming modal backdrop. */ +@media (min-width: 769px) { .context-menu-modal-backdrop { background-color: transparent; }