convert $small padding -> $smaller padding

src/components/RightSideBar/Home/Main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="r-home rounded border">
+  <div class="r-home border">
    <NowPlaying />
    <Recommendations />
   </div>
@@ -10,7 +10,7 @@
   height: 100%;
   width: 31rem;
   background-color: $card-dark;
-  padding: $small;
+  padding: $smaller $small;
 }
 </style>
 

src/components/RightSideBar/Main.vue

@@ -13,7 +13,7 @@
           <UpNext />
         </div>
       </div>
-      <div class="tab-keys card-dark border">
+      <div class="tab-keys card-dark">
         <Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" />
       </div>
     </div>
@@ -26,6 +26,7 @@ import Search from "../Search.vue";
 import UpNext from "./Queue.vue";
 import Tabs from "./Tabs.vue";
 import Main from "./Home/Main.vue";
+import perks from "../../composables/perks";
 
 const DashBoard = Main;
 
@@ -40,22 +41,29 @@ const default_tab = tabs.home;
 const current_tab = ref(default_tab);
 
 function changeTab(tab) {
-  current_tab.value = tab;
+  new Promise((resolve) => {
+    current_tab.value = tab;
+    resolve();
+    setTimeout(() => {}, 300);
+  }).then(() => {
+    if (tab === tabs.queue) {
+      perks.focusCurrent();
+    }
+  });
 }
 </script>
 
 <style lang="scss">
 .r-sidebar {
-  width: 34.5em;
-  margin: $small 0 $small 0;
-  
-  @include phone-only {
-    display: none;
-  }
+  width: 34em;
 
-  @include tablet-landscape {
-    width: 3rem;
-  }
+  // @include phone-only {
+  //   display: none;
+  // }
+
+  // @include tablet-landscape {
+  //   width: 3rem;
+  // }
 
   .grid {
     height: 100%;
@@ -66,9 +74,9 @@ function changeTab(tab) {
       grid-area: content;
       width: 31rem;
 
-      @include tablet-landscape {
-        display: none;
-      }
+      // @include tablet-landscape {
+      //   display: none;
+      // }
 
       .r-search {
         height: 100%;
@@ -84,12 +92,14 @@ function changeTab(tab) {
     }
 
     .tab-keys {
+      width: 3rem;
       right: 0;
       height: 100%;
       position: absolute;
       grid-area: tabs;
-      padding: $small;
-      border-radius: $small 0 0 $small;
+      // padding: $small 0;
+      border-radius: 0;
+      overflow: hidden;
     }
   }
 }

src/components/RightSideBar/Queue.vue

@@ -71,7 +71,6 @@ export default {
 <style lang="scss">
 .up-next {
   background-color: $card-dark;
-  border-radius: 0.5rem;
   padding: $small;
   overflow: hidden;
   height: 100%;

src/components/RightSideBar/Tabs.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="r-tabs">
-    <button v-for="tab in props.tabs"
+    <div v-for="tab in props.tabs"
     @click="changeTab(tab)"
     :key="tab"
-      class="image t-item rounded"
+      class="image t-item"
       :class="{ active_tab: props.current_tab == tab }, `${tab}`"
-    ></button>
+    ></div>
     <div>
     </div>
   </div>
@@ -33,31 +33,40 @@ function changeTab(tab) {
   display: flex;
   flex-direction: column;
   gap: $small;
+  margin-top: $small;
+  margin-left: $small;
 
   .t-item {
-    width: 2rem;
-    height: 2rem;
+    float: right;
+    width: 100%;
+    height: 2.45rem;
     background-size: 1.5rem;
+    border-radius: 0;
+      border-radius: $small 0 0 $small;
+
+    &:hover {
+      background-color: rgba(128, 128, 128, 0.281);
+    }
   }
 
   .active_tab {
     border-right: solid;
-    border-radius: $small 0 0 $small;
+    background-color: rgba(17, 123, 223, 0.192);
   }
 
   .search {
     background-image: url("../../assets/icons/search.svg");
-    background-color: rgba(35, 35, 66, 0.247);
+    // background-color: rgba(35, 35, 66, 0.247);
   }
 
   .queue {
     background-image: url("../../assets/icons/queue.svg");
-    background-color: rgba(46, 25, 33, 0.445);
+    // background-color: rgba(46, 25, 33, 0.445);
   }
 
   .home {
     background-image: url("../../assets/icons/dashboard.svg");
-    background-color: rgba(148, 102, 50, 0.445);
+    // background-color: rgba(148, 102, 50, 0.445);
   }
 }
 </style>