✨ feat: add responsive playbar styles (#3)

* attempted to fix responsivity of now playing bar. * ✨ feat: add responsive styles to playbar * feat: change max width to relative unit --------- Co-authored-by: Sanooj Es <[email protected]>
sanoojes · Sep 18, 2024 · f9be803 · f9be803
1 parent 06a5acd
commit f9be803
Showing 1 changed file with 20 additions and 4 deletions.
diff --git a/src/user.css b/src/user.css
@@ -694,19 +694,35 @@ footer.main-nowPlayingBar-container {
   flex-direction: row;
 }
 
+@media (max-width: 70rem) {
+  .player-controls {
+    flex-direction: column;
+  }
+
+  .player-controls__buttons {
+    padding-left: 0;
+    margin-bottom: 0.5rem;
+  }
+
+  .main-nowPlayingBar-right,
+  .main-nowPlayingBar-left {
+    min-width: 25vw;
+  }
+}
+
 .main-trackInfo-container {
   flex-grow: 1;
   flex-basis: 0;
 }
 
 .main-nowPlayingBar-center {
-  max-width: none;
+  max-width: 55vw;
   flex-grow: 1;
 }
 
 .main-nowPlayingBar-right {
-  min-width: 15vw;
-  width: 20vw;
+  min-width: fit-content;
+  width: 25vw;
 }
 
 .main-nowPlayingBar-left {
@@ -1121,4 +1137,4 @@ button.main-playPauseButton-button {
 
 .eYvk_xcxVNMwCBkfY3O0 button:first-child {
   order: 3;
-}
+}