add docstrings to python code

src/components/RightSideBar/Home/Main.vue

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

src/components/RightSideBar/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="r-sidebar">
     <div class="grid">
-      <div class="r-content rounded">
+      <div class="r-content">
         <div class="r-dash" v-show="current_tab == tabs.home">
           <DashBoard />
         </div>
@@ -63,7 +63,6 @@ function changeTab(tab) {
     .r-content {
       grid-area: content;
       width: 31rem;
-      overflow: hidden;
 
       // @include tablet-landscape {
       //   display: none;

src/components/RightSideBar/NowPlaying.vue

@@ -108,13 +108,13 @@ export default {
 
     #title {
       margin: 0;
-      width: 22rem;
+      width: 20rem;
       color: #fff;
     }
 
     #artist {
       font-size: small;
-      width: 22rem;
+      width: 20rem;
       color: $highlight-blue;
     }
 

src/components/RightSideBar/Queue.vue

@@ -20,16 +20,16 @@
         </div>
       </div>
         <div class="scrollable-r border rounded">
-          <TrackItem v-for="song in queue" :key="song.id" :track="song" />
+          <TrackItem v-for="song in queue" :key="song.track_id" :track="song" />
         </div>
     </div>
   </div>
 </template>
 
 <script>
-import { ref, toRefs } from "@vue/reactivity";
 import perks from "@/composables/perks.js";
 import audio from "@/composables/playAudio.js";
+import { ref, toRefs } from "@vue/reactivity";
 import { watch } from "@vue/runtime-core";
 import TrackItem from "../shared/TrackItem.vue";
 
@@ -120,10 +120,9 @@ export default {
 
   .r-grid {
     position: relative;
-    height: 100%;
+    height: calc(100% - 2rem);
     display: grid;
     grid-template-rows: min-content;
-    padding-bottom: 2.5rem;
 
     .scrollable-r {
       height: 100%;

src/components/Search/TracksGrid.vue

@@ -6,7 +6,7 @@
         <tbody>
           <TrackItem
             v-for="track in props.tracks"
-            :key="track.id"
+            :key="track.track_id"
             :track="track"
           />
         </tbody>

src/components/shared/SongItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <tr class="songlist-item" :class="{ current: current.id == song.id }">
+  <tr class="songlist-item" :class="{ current: current.track_id == song.track_id }">
     <td class="index">{{ index }}</td>
     <td class="flex" @click="emitUpdate(song)">
       <div
@@ -8,7 +8,7 @@
       >
         <div
           class="now-playing-track image"
-          v-if="current.id == song.id"
+          v-if="current.track_id == song.track_id"
           :class="{ active: is_playing, not_active: !is_playing }"
         ></div>
       </div>

src/components/shared/TrackItem.vue

@@ -3,7 +3,7 @@
     class="track-item h-1"
     @click="playThis(props.track)"
     :class="{
-      currentInQueue: current.id == props.track.id,
+      currentInQueue: current.track_id == props.track.track_id,
     }"
   >
     <div
@@ -14,7 +14,7 @@
     >
       <div
         class="now-playing-track image"
-        v-if="current.id == props.track.id"
+        v-if="current.track_id == props.track.track_id"
         :class="{ active: is_playing, not_active: !is_playing }"
       ></div>
     </div>