Improve dashboard layout at high zoom factor

Related issue: uBlockOrigin/uBlock-issues#3211
gorhill · Apr 16, 2024 · 6152f52 · 6152f52
1 parent 2481e4a
commit 6152f52
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/src/css/1p-filters.css b/src/css/1p-filters.css
@@ -10,6 +10,7 @@ body {
     height: 100%;
     justify-content: stretch;
     overflow: hidden;
+    overflow-y: auto;
     width: 100%;
     }
 .body {
@@ -26,6 +27,7 @@ html:not(.mobile) [data-i18n="1pTrustWarning"] {
     flex-grow: 1;
     }
 #userFilters {
+    min-height: 8em;
     text-align: left;
     word-wrap: normal;
     }
diff --git a/src/css/codemirror.css b/src/css/codemirror.css
@@ -222,7 +222,7 @@ html:not(.mobile) .cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
     }
 .cm-search-widget-input input {
     flex-grow: 1;
-    max-width: 16em;
+    max-width: min(16em, 40svw);
     }
 .cm-search-widget-count {
     align-items: center;
@@ -238,7 +238,7 @@ html:not(.mobile) .cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
     visibility: hidden;
     }
 .cm-search-widget .sourceURL[href=""] {
-    visibility: hidden;
+    display: none;
     }
 :root.mobile .cm-search-widget .sourceURL[href=""] {
     display: none;

diff --git a/src/css/dashboard.css b/src/css/dashboard.css
@@ -27,7 +27,8 @@ body.notReady {
     }
 #dashboard-nav > span {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    overflow-x: auto;
     }
 .tabButton {
     background-color: transparent;
@@ -112,10 +113,6 @@ body.noDashboard #dashboard-nav {
     border-bottom-color: var(--dashboard-tab-hover-border);
     }
 
-:root.mobile #dashboard-nav > span {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    }
 :root.mobile #dashboard-nav .logo {
     display: none;
     }