Fix: Video description collapsible and no longer hijacks page scroll

src/renderer/components/WatchVideoDescription/WatchVideoDescription.css

@@ -1,6 +1,9 @@
 .videoDescription {
+  position: relative;
+  display: flex;
+  flex-direction: column;
   overflow-y: auto;
-  max-block-size: 300px;
+  max-block-size: 20lh;
 }
 
 .description {
@@ -9,3 +12,46 @@
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
+
+.descriptionStatus {
+  margin: 0;
+  text-decoration: underline;
+  cursor: pointer;
+  color: var(--title-color);
+}
+
+.videoDescription.short .descriptionStatus {
+  position: absolute;
+  inset-block-end: calc(1lh + 12px);
+  padding-block: 2px;
+  inset-inline-end: 16px;
+  padding-inline-start: 40px;
+  background: linear-gradient(270deg, var(--card-bg-color) 75%, transparent 100%);
+  text-decoration: none;
+}
+
+.videoDescription:not(.short) .descriptionStatus {
+  position: relative;
+  order: 0;
+  margin-block-start: 1em;
+}
+
+.videoDescription.short .description {
+  max-block-size: 4lh;
+  overflow: hidden;
+}
+
+.videoDescription:not(.short) .description {
+  order: 1;
+}
+
+.videoDescription .overlay {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  transition: background-color 200ms ease;
+}
+
+.videoDescription .overlay:hover {
+  background-color: var(--accent-color-opacity1);
+}

src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue

@@ -1,9 +1,40 @@
 <template>
   <FtCard
     v-if="shownDescription.length > 0"
-    class="videoDescription"
+    :class="{ videoDescription: true, short: !showFullDescription }"
   >
+    <template v-if="showControls">
+      <span
+        v-if="showFullDescription"
+        class="descriptionStatus"
+        role="button"
+        tabindex="0"
+        @click="collapseDescription"
+        @keydown.space.prevent="collapseDescription"
+        @keydown.enter.prevent="collapseDescription"
+      >
+        {{ $t("Description.Collapse Description") }}
+      </span>
+      <span
+        v-else
+        class="descriptionStatus"
+        role="button"
+        tabindex="0"
+        @keydown.space.prevent="expandDescription"
+        @keydown.enter.prevent="expandDescription"
+      >
+        {{ $t("Description.Expand Description") }}
+      </span>
+      <div
+        v-if="!showFullDescription"
+        class="overlay"
+        @click="expandDescription"
+        @keydown.space.prevent="expandDescription"
+        @keydown.enter.prevent="expandDescription"
+      />
+    </template>
     <FtTimestampCatcher
+      ref="descriptionContainer"
       class="description"
       :input-html="shownDescription"
       @timestamp-event="onTimestamp"
@@ -14,6 +45,7 @@
 <script setup>
 import autolinker from 'autolinker'
 
+import { onMounted, ref } from 'vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtTimestampCatcher from '../FtTimestampCatcher.vue'
 
@@ -31,6 +63,9 @@ const props = defineProps({
 const emit = defineEmits(['timestamp-event'])
 
 let shownDescription = ''
+const descriptionContainer = ref()
+const showFullDescription = ref(false)
+const showControls = ref(false)
 
 if (props.descriptionHtml !== '') {
   const parsed = parseDescriptionHtml(props.descriptionHtml)
@@ -58,6 +93,37 @@ function onTimestamp(timestamp) {
   emit('timestamp-event', timestamp)
 }
 
+/**
+ * Enables user to view entire contents of description
+ */
+function expandDescription() {
+  showFullDescription.value = true
+}
+
+/**
+ * Enables user to collapse contents of description
+ */
+function collapseDescription() {
+  showFullDescription.value = false
+}
+
+/**
+ * Returns true when description content does not overflow description container
+ * Useful for hiding description expansion/contraction controls
+ */
+function isShortDescription() {
+  const descriptionElem = descriptionContainer.value?.$el
+  return descriptionElem?.clientHeight >= descriptionElem?.scrollHeight
+}
+
+onMounted(() => {
+  // To verify whether or not the description is too short for displaying
+  // description controls, we need to check the description's dimensions.
+  // The only way to make this work is to check on mount.
+  showFullDescription.value = isShortDescription()
+  showControls.value = !showFullDescription.value
+})
+
 /**
  * @param {string} descriptionText
  * @returns {string}

static/locales/en-GB.yaml

@@ -992,6 +992,9 @@ Comments:
   There are no comments available for this post: There are no comments available for
     this post
 Up Next: 'Up Next'
+Description:
+  Expand Description: ...more
+  Collapse Description: Show less
 
 # Toast Messages
 Local API Error (Click to copy): 'Local API Error (Click to copy)'

static/locales/en-US.yaml

@@ -988,6 +988,9 @@ Comments:
   Hearted: Hearted
 
 Up Next: Up Next
+Description:
+  Expand Description: ...more
+  Collapse Description: Show less
 
 #Tooltips
 Tooltips: