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;
     }
   }
 }