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;
  }