From 15c9444e7c58ea38cd8bec74a056e89db8dce7d6 Mon Sep 17 00:00:00 2001
From: Gerald <code@gera2ld.space>
Date: Sun, 5 May 2024 14:51:36 +0800
Subject: [PATCH] fix: set header bar to scrollable for small screen only
 (#2093)

---
 src/common/ui/style/style.css       |  2 +-
 src/options/views/tab-installed.vue | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/common/ui/style/style.css b/src/common/ui/style/style.css
index 776805a805..cad0a160e7 100644
--- 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
index 21f51a83bf..f37a7f23ad 100644
--- a/src/options/views/tab-installed.vue
+++ b/src/options/views/tab-installed.vue
@@ -804,8 +804,6 @@ $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;
     }
@@ -813,8 +811,13 @@ $iconSize: 2rem; // from .icon in ui/style.css
   .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;