remove div nesting on right sidebar

+ rewrite vTooltip to handle updates to tooltip text

src/components/RightSideBar/Main.vue

@@ -2,20 +2,18 @@
   <div
     class="r-sidebar rounded border"
     :style="{
-      marginBottom: !settings.use_alt_np ? '-1rem' : '',
+      marginBottom: !settings.show_alt_np ? '-1rem' : '',
     }"
   >
-    <div class="grid">
-      <div class="r-content">
-        <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
-          <DashBoard />
-        </div>
-        <div class="r-search" v-if="tabs.current === tabs.tabs.search">
-          <Search />
-        </div>
-        <div class="r-queue" v-if="tabs.current === tabs.tabs.queue">
-          <Queue />
-        </div>
+    <div class="r-content">
+      <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
+        <DashBoard />
+      </div>
+      <div class="r-search" v-if="tabs.current === tabs.tabs.search">
+        <Search />
+      </div>
+      <div class="r-queue" v-if="tabs.current === tabs.tabs.queue">
+        <Queue />
       </div>
     </div>
   </div>
@@ -35,28 +33,25 @@ const settings = useSettingsStore();
 <style lang="scss">
 .r-sidebar {
   width: 100%;
+  overflow: hidden;
 
-  .grid {
-    display: flex;
-    position: relative;
+  .r-content {
+    width: 100%;
     height: 100%;
 
-    .r-content {
-      grid-area: content;
+    .r-search {
+      height: 100%;
+    }
+
+    .r-dash {
+      height: 100%;
+    }
+
+    .r-queue {
+      height: 100%;
       overflow: hidden;
-      width: 100%;
-
-      .r-search {
-        height: 100%;
-      }
-
-      .r-dash {
-        height: 100%;
-      }
-
-      .r-queue {
-        height: 100%;
-      }
+      display: grid;
+      grid-template-rows: max-content 1fr;
     }
   }
 }

src/components/RightSideBar/Queue.vue

@@ -1,20 +1,16 @@
 <template>
-  <div class="up-next">
-    <div class="r-grid">
-      <div class="scrollable-r rounded">
-        <QueueActions />
-        <div class="inner">
-          <TrackComponent
-            v-for="(t, index) in queue.tracklist"
-            :key="index"
-            :track="t"
-            :index="index + 1"
-            :isPlaying="queue.playing"
-            :isHighlighted="false"
-            :isCurrent="index === queue.currentindex"
-          />
-        </div>
-      </div>
+    <QueueActions />
+    <div class="scrollable-r">
+      <div class="inner">
+        <TrackComponent
+          v-for="(t, index) in queue.tracklist"
+          :key="index"
+          :track="t"
+          :index="index + 1"
+          :isPlaying="queue.playing"
+          :isHighlighted="false"
+          :isCurrent="index === queue.currentindex"
+        />
     </div>
   </div>
 </template>
@@ -58,32 +54,13 @@ onUpdated(() => {
 </script>
 
 <style lang="scss">
-.up-next {
-  overflow: hidden;
+.scrollable-r {
   height: 100%;
+  overflow: auto;
 
-  .heading {
-    position: relative;
-    margin: 0.5rem 0 1rem 0;
-  }
-
-  .r-grid {
-    position: relative;
-    height: 100%;
-
-    .scrollable-r {
-      height: 100%;
-      overflow: hidden;
-      display: grid;
-      grid-template-rows: max-content 1fr;
-
-      .inner {
-        overflow: scroll;
-        overflow-x: hidden;
-        scrollbar-color: grey transparent;
-        margin: 1rem 0;
-      }
-    }
+  .inner {
+    scrollbar-color: grey transparent;
+    margin: 1rem 0;
   }
 }
 </style>