refactor: better scrolling on the watch page

NUXT/pages/watch.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="background">
+  <div class="background" id="watch-body">
+    <div
+      class="player-container"
+      style="position: sticky; top: 0; z-index: 696969"
+    >
       <!--   Stock Player   -->
       <videoPlayer
-      style="position: sticky; top: 0; z-index: 696969"
         :vid-src="vidSrc"
         ref="player"
         v-if="useBetaPlayer !== 'true'"
@@ -10,7 +13,8 @@
 
       <!--   VueTube Player V1   -->
       <vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
-
+    </div>
+    <div class="content-container">
       <v-card v-if="loaded" class="ml-2 mr-2 background" flat>
         <v-card-title
           class="mt-2"
@@ -70,14 +74,15 @@
       color="background"
       style="z-index: 9999999"
     >
-        <v-sheet style="padding: 1em">
+      <v-sheet style="padding: 12px">
         <v-btn block @click="showMore = !showMore"
           ><v-icon>mdi-chevron-down</v-icon></v-btn
         ><br />
 
-          <div class="scroll-y">
-            {{ response.renderedData.description }}
-          </div>
+        <slim-video-description-renderer
+          class="scroll-y"
+          :render="video.renderedData.description"
+        />
       </v-sheet>
     </v-bottom-sheet> -->
         <!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
@@ -104,7 +109,9 @@
             <div class="channel-name" v-text="video.channelName" />
             <div
               class="caption background--text"
-            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+              :class="
+                $vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
+              "
               v-text="video.channelSubs"
             />
           </div>
@@ -153,6 +160,7 @@
       </div>
       <item-section-renderer v-else :render="recommends" />
     </div>
+  </div>
 </template>
 
 <script>
@@ -334,6 +342,18 @@ export default {
 </script>
 
 <style>
+#watch-body {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.content-container {
+  overflow-y: auto;
+  height: 100%;
+}
+
 .vertical-button span.v-btn__content {
   flex-direction: column;
   justify-content: space-around;