feat(UI): Optimize default UI for small screens (#8436)

avelad · web-flow · commit f760dbd339f4 · 2025-04-09T17:58:42.000+02:00
Related to #8422 (comment)
diff --git a/ui/less/ad_controls.less b/ui/less/ad_controls.less
@@ -63,6 +63,7 @@
 
   &[disabled] {
     .disabled-button();
+    padding: 0;
   }
 }
 
diff --git a/ui/less/range_elements.less b/ui/less/range_elements.less
@@ -152,14 +152,31 @@
   }
 }
 
+@media (max-width: 474px) {
+  .shaka-volume-bar-container {
+    width: 50px;
+
+    &:hover {
+      width: 50px !important;
+    }
+  }
+
+  .shaka-mute-button:hover + .shaka-volume-bar-container {
+    width: 50px;
+    opacity: 1;
+  }
+}
+
 .shaka-mute-button + .shaka-volume-bar-container {
   width: 0;
   opacity: 0;
 }
 
-.shaka-mute-button:hover + .shaka-volume-bar-container {
-  width: 100px;
-  opacity: 1;
+@media (min-width: 475px) {
+  .shaka-mute-button:hover + .shaka-volume-bar-container {
+    width: 100px;
+    opacity: 1;
+  }
 }
 
 .shaka-range-element {
