🔷 some refactors

src/components/RightSideBar/Queue.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="up-next">
     <div class="r-grid">
-      <PlayingFrom :from="queue.from" />
       <UpNext :next="queue.next" :playNext="queue.playNext" />
       <div class="scrollable-r border rounded">
         <TrackItem
@@ -13,6 +12,7 @@
           :isPlaying="queue.playing"
         />
       </div>
+      <PlayingFrom :from="queue.from" />
     </div>
   </div>
 </template>
@@ -33,7 +33,7 @@ function playThis(track: Track) {
 
 <style lang="scss">
 .up-next {
-  padding: $small $small $small 0;
+  padding: $small $small 0 0;
   overflow: hidden;
   height: 100%;
 
@@ -46,13 +46,13 @@ function playThis(track: Track) {
     position: relative;
     height: 100%;
     display: grid;
-    grid-template-rows: max-content max-content 1fr;
+    grid-template-rows: max-content 1fr max-content;
+    gap: $small;
 
     .scrollable-r {
       height: 100%;
       padding: $small;
       overflow: auto;
-      // background-color: $card-dark;
       scrollbar-color: grey transparent;
     }
   }

src/components/RightSideBar/queue/playingFrom.vue

@@ -103,7 +103,6 @@ function goTo() {
   background: linear-gradient(-200deg, $gray4 40%, $red, $gray4);
   background-size: 120%;
   padding: 0.75rem;
-  margin-bottom: $small;
   cursor: pointer;
   position: relative;
   transition: all .2s ease;
@@ -115,7 +114,7 @@ function goTo() {
   .abs {
     position: absolute;
     right: $small;
-    top: $small;
+    bottom: $small;
     font-size: .9rem;
     background-color: $gray;
     padding: $smaller;

src/components/RightSideBar/queue/upNext.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main-item border" @click="playNext">
-    <div class="h">#Up_Next</div>
+    <div class="h">Up Next</div>
     <div class="itemx  shadow">
       <div
         class="album-art image"
@@ -34,7 +34,6 @@ const props = defineProps<{
 <style lang="scss">
 .main-item {
   border-radius: 0.5rem;
-  margin-bottom: 0.5rem;
   position: relative;
 
   &:hover {
@@ -49,7 +48,7 @@ const props = defineProps<{
   .h {
     position: absolute;
     right: $small;
-    top: $small;
+    bottom: $small;
     font-size: 0.9rem;
     background-color: $accent;
     padding: $smaller;