fix: set header bar to scrollable for small screen only (violentmonke…

…y#2093)
Xia0xia0Xia0 · May 5, 2024 · 15c9444 · 15c9444
1 parent e1903c0
commit 15c9444
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/common/ui/style/style.css b/src/common/ui/style/style.css
@@ -512,7 +512,7 @@ input[type].has-error {
   }
 }
 
-@media (max-width: 500px) { /* This value is also used in other files */
+@media (max-width: 550px) { /* This value is also used in other files */
   .hidden-sm {
     display: none !important;
   }

diff --git a/src/options/views/tab-installed.vue b/src/options/views/tab-installed.vue
@@ -804,17 +804,20 @@ $iconSize: 2rem; // from .icon in ui/style.css
     align-items: center;
     line-height: 1;
     border-bottom: 1px solid var(--fill-5);
-    overflow-x: auto;
-    overflow-y: hidden;
     .btn-ghost, select {
       height: $iconSize;
     }
   }
   .vl-dropdown-menu {
     white-space: nowrap;
   }
-  @media (max-width: 500px) { // same size as `hidden-sm` in @/common/ui/style/style.css
-    .vl-dropdown-right .vl-dropdown-menu {
+  @media (max-width: 550px) { // same size as `hidden-sm` in @/common/ui/style/style.css
+    /* The header bar must be set to scrollable and the dropdown fixed simultaneously. */
+    header {
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+    .vl-dropdown-menu {
       position: fixed;
       top: auto;
       left: 0;