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;