From 6152f5269e25c37aa0db7342a82fe8571046a908 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Tue, 16 Apr 2024 11:21:06 -0400
Subject: [PATCH] Improve dashboard layout at high zoom factor

Related issue:
https://github.com/uBlockOrigin/uBlock-issues/issues/3211
---
 src/css/1p-filters.css | 2 ++
 src/css/codemirror.css | 4 ++--
 src/css/dashboard.css  | 7 ++-----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/css/1p-filters.css b/src/css/1p-filters.css
index 9e087cb7ec1fc..6e449484da60b 100644
--- 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
index fce571b72483b..9036acc990182 100644
--- 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
index b75949e66a603..20b35e57cc416 100644
--- 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;
     }