From f9be8037c4a876992ce23da4410a7663bfd0aad0 Mon Sep 17 00:00:00 2001
From: aj <122498260+wakeupaj@users.noreply.github.com>
Date: Wed, 18 Sep 2024 01:31:59 -0400
Subject: [PATCH] :sparkles: feat: add responsive playbar styles (#3)

* attempted to fix responsivity of now playing bar.

* :sparkles: feat: add responsive styles to playbar

* feat: change max width to relative unit

---------

Co-authored-by: Sanooj Es <sanoojes6371@gmail.com>
---
 src/user.css | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/user.css b/src/user.css
index 7872207..842de09 100644
--- 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;
-}
\ No newline at end of file
+}