fix 720p screens layout issue

~ add media queries
+ handle responsiveness on folder header

src/components/LeftSidebar/nowPlaying.vue

@@ -47,7 +47,7 @@ const showContextMenu = (e: Event) => {
   e.stopPropagation();
 
   const menus = trackContext(
-    queue.tracks[queue.current],
+    queue.tracklist[queue.current],
     useModalStore,
     useQueueStore
   );

src/components/RightSideBar/Home/Main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="r-home">
-    <UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
+    <UpNext :next="queue.tracklist[queue.next]" :playNext="queue.playNext" />
     <Recommendations />
   </div>
 </template>

src/components/RightSideBar/Main.vue

@@ -27,7 +27,7 @@ const tabs = useTabStore();
 
 <style lang="scss">
 .r-sidebar {
-
+  width: 100%;
 
   @include phone-only {
     display: none;
@@ -38,13 +38,14 @@ const tabs = useTabStore();
   }
 
   .grid {
-    height: 100%;
     display: flex;
     position: relative;
+    height: 100%;
 
     .r-content {
       grid-area: content;
-      width: 29rem;
+      // width: 29rem;
+      width: 100%;
 
       // @include tablet-landscape {
       //   display: none;

src/components/RightSideBar/Queue.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="up-next">
     <div class="r-grid">
-      <UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
+      <UpNext :next="queue.tracklist[queue.next]" :playNext="queue.playNext" />
       <div class="scrollable-r bg-black rounded">
         <QueueActions />
         <div
@@ -10,7 +10,7 @@
           @mouseleave="setMouseOver(false)"
         >
           <TrackItem
-            v-for="(t, index) in queue.tracks"
+            v-for="(t, index) in queue.tracklist"
             :key="t.trackid"
             :track="t"
             @playThis="queue.play(index)"

src/components/nav/NavBar.vue

@@ -81,14 +81,15 @@ watch(
 .topnav {
   display: grid;
   grid-template-columns: 1fr min-content max-content;
+  width: 100%;
 
   .left {
     display: grid;
     grid-template-columns: max-content 1fr;
+    width: min-content;
+    overflow: scroll;
 
     .info {
-      min-width: 15rem;
-
       .title {
         font-size: 1.5rem;
         font-weight: bold;

src/components/nav/Titles/Folder.vue

@@ -63,7 +63,10 @@ onUpdated(() => {
       margin-left: $smaller;
       overflow: auto;
       padding-right: $smaller;
-      color: rgba(255, 255, 255, 0.678);
+
+      @include for-desktop-down {
+        max-width: 9rem;
+      }
 
       .icon {
         height: 2rem;