Disable volume dropdown scrolling on desktop

Make pill-scrollbar a global class
micro-nova · Jan 7, 2025 · 25c0309 · 25c0309
1 parent def1c5a
commit 25c0309
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 33 deletions.
diff --git a/web/src/App.scss b/web/src/App.scss
@@ -26,3 +26,33 @@
   height: 100vh;
   background-color: green;
 }
+
+
+.pill-scrollbar {
+  max-height: inherit;
+  overflow-y: auto;
+}
+
+.pill-scrollbar::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.pill-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.pill-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 999px;
+  border: 3px solid rgba(255, 255, 255, 0.5);
+}
+
+.pill-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.pill-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
+}
diff --git a/web/src/components/ModalCard/ModalCard.scss b/web/src/components/ModalCard/ModalCard.scss
@@ -47,33 +47,3 @@
 .modal-footer-button {
   @include general.button-hover;
 }
-
-
-.pill-scrollbar {
-  max-height: inherit;
-  overflow-y: auto;
-}
-
-.pill-scrollbar::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-.pill-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.pill-scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.5);
-  border-radius: 999px;
-  border: 3px solid rgba(255, 255, 255, 0.5);
-}
-
-.pill-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.7);
-}
-
-.pill-scrollbar {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
-}
diff --git a/web/src/pages/Player/Player.jsx b/web/src/pages/Player/Player.jsx
@@ -150,7 +150,7 @@ const Player = () => {
                         </IconButton>
                     </div>
 
-                    <div className={`player-volume-body ${expanded ? "expanded-volume-body" : ""}`}>
+                    <div className={`player-volume-body pill-scrollbar ${expanded ? "expanded-volume-body" : ""}`}>
                         <VolumeZones open={(expanded || alone)} sourceId={selectedSourceId} zones={zonesLeft} groups={usedGroups} groupsLeft={groupsLeft} />
                     </div>
                 </Card>

diff --git a/web/src/pages/Player/Player.scss b/web/src/pages/Player/Player.scss
@@ -61,8 +61,10 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  max-height: calc(85vh - 120px);
-  overflow-y: auto;
+  @media (max-width: 435px) {
+    max-height: calc(85vh - 120px);
+    overflow-y: auto;
+  }
 }
 
 .expanded-volume-body {