fix 720p screens layout issue

~ add media queries
+ handle responsiveness on folder header

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)"