From 671fe0101353dd002e6e45e7f7ac277b61feaf66 Mon Sep 17 00:00:00 2001
From: Nick Sabia <nms00010101@outlook.com>
Date: Sat, 7 Sep 2024 18:16:33 -0500
Subject: [PATCH 01/13] fix: description no longer hijacks scroll focus

introduced a button in video descriptions shwon as 'Click to View Description'
which allows the user to see the full description and scroll within
the description card.
---
 .../WatchVideoDescription.css                 | 15 +++++++++++++
 .../WatchVideoDescription.vue                 | 22 ++++++++++++++++++-
 static/locales/en-US.yaml                     |  2 ++
 static/locales/en_GB.yaml                     |  2 ++
 4 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
index c7b2a437e55d8..fcbe034110f0b 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
@@ -9,3 +9,18 @@
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
+
+.getDescriptionTitle {
+  margin: 0;
+  padding-block: 8px;
+  text-align: center;
+  text-decoration: underline;
+  cursor: pointer;
+  color: var(--title-color);
+}
+
+.short {
+  block-size: 230px;
+  overflow: hidden;
+  mask-image: linear-gradient(180deg, rgb(2 0 36 / 100%) 80%, rgb(255 255 255 / 0%) 100%);
+}
diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index 37a12ea6eafca..705bb8a34727e 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -4,16 +4,28 @@
     class="videoDescription"
   >
     <FtTimestampCatcher
-      class="description"
+      :class="{ description: true, short: !showFullDescription }"
       :input-html="shownDescription"
       @timestamp-event="onTimestamp"
     />
+    <h4
+      v-if="!showFullDescription"
+      class="getDescriptionTitle"
+      role="button"
+      tabindex="0"
+      @click="expandDescription"
+      @keydown.space.prevent="expandDescription"
+      @keydown.enter.prevent="expandDescription"
+    >
+      {{ $t("Description.Click to View Description") }}
+    </h4>
   </FtCard>
 </template>
 
 <script setup>
 import autolinker from 'autolinker'
 
+import { ref } from 'vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtTimestampCatcher from '../ft-timestamp-catcher/ft-timestamp-catcher.vue'
 
@@ -31,6 +43,7 @@ const props = defineProps({
 const emit = defineEmits(['timestamp-event'])
 
 let shownDescription = ''
+const showFullDescription = ref(false)
 
 if (props.descriptionHtml !== '') {
   const parsed = parseDescriptionHtml(props.descriptionHtml)
@@ -58,6 +71,13 @@ function onTimestamp(timestamp) {
   emit('timestamp-event', timestamp)
 }
 
+/**
+ * Enables user to scroll entire contents of description
+ */
+function expandDescription() {
+  showFullDescription.value = true
+}
+
 /**
  * @param {string} descriptionText
  */
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 4d8d6f80ccaaf..4c7c9f4ad5494 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -995,6 +995,8 @@ Comments:
   Subscribed: Subscribed
   Hearted: Hearted
 Up Next: Up Next
+Description:
+  Click to View Description: Click to View Description
 
 #Tooltips
 Tooltips:
diff --git a/static/locales/en_GB.yaml b/static/locales/en_GB.yaml
index 14537d979b4e0..7a0c8641eff71 100644
--- a/static/locales/en_GB.yaml
+++ b/static/locales/en_GB.yaml
@@ -1059,6 +1059,8 @@ Comments:
   View {replyCount} replies: View {replyCount} replies
   Subscribed: Subscribed
 Up Next: 'Up Next'
+Description:
+  Click to View Description: Click to View Description
 
 # Toast Messages
 Local API Error (Click to copy): 'Local API Error (Click to copy)'

From 8bba22fbea4dd048f2a5a7e6b60ca847b7377549 Mon Sep 17 00:00:00 2001
From: Nick Sabia <nms00010101@outlook.com>
Date: Sat, 7 Sep 2024 20:04:18 -0500
Subject: [PATCH 02/13] fix: 'Click to View Description' button only shown for
 long descriptions

description length is based on computed css height of description
container
---
 .../WatchVideoDescription.vue                 | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index 705bb8a34727e..fbd079284e75f 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -4,6 +4,7 @@
     class="videoDescription"
   >
     <FtTimestampCatcher
+      ref="descriptionContainer"
       :class="{ description: true, short: !showFullDescription }"
       :input-html="shownDescription"
       @timestamp-event="onTimestamp"
@@ -25,7 +26,7 @@
 <script setup>
 import autolinker from 'autolinker'
 
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtTimestampCatcher from '../ft-timestamp-catcher/ft-timestamp-catcher.vue'
 
@@ -43,7 +44,8 @@ const props = defineProps({
 const emit = defineEmits(['timestamp-event'])
 
 let shownDescription = ''
-const showFullDescription = ref(false)
+const descriptionContainer = ref()
+const showFullDescription = ref(true)
 
 if (props.descriptionHtml !== '') {
   const parsed = parseDescriptionHtml(props.descriptionHtml)
@@ -78,6 +80,23 @@ function expandDescription() {
   showFullDescription.value = true
 }
 
+/**
+ * Returns true when description content does not overflow description container
+ * Useful for hiding the 'Click to View Description' button for short descriptions
+ */
+function isShortDescription() {
+  const videoDescriptionMaxHeight = 300
+  const computedDescriptionHeight = descriptionContainer.value.$el.getBoundingClientRect().height
+  return computedDescriptionHeight < videoDescriptionMaxHeight
+}
+
+onMounted(() => {
+  // To verify whether or not the description is too short for the
+  // 'Click to View Description' button, we need to check the description's
+  // computed CSS height. The only way to make this work is to check on mount.
+  showFullDescription.value = isShortDescription()
+})
+
 /**
  * @param {string} descriptionText
  */

From 219f827ba5c42d5f2ba5153b80a35c133de38f1e Mon Sep 17 00:00:00 2001
From: Nick Sabia <nms00010101@outlook.com>
Date: Mon, 16 Sep 2024 12:36:57 -0500
Subject: [PATCH 03/13] Adjusted locale

---
 .../components/WatchVideoDescription/WatchVideoDescription.vue | 2 +-
 static/locales/en-US.yaml                                      | 3 ++-
 static/locales/en_GB.yaml                                      | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index fbd079284e75f..acd2a41b3017d 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -18,7 +18,7 @@
       @keydown.space.prevent="expandDescription"
       @keydown.enter.prevent="expandDescription"
     >
-      {{ $t("Description.Click to View Description") }}
+      {{ $t("Description.Expand Description") }}
     </h4>
   </FtCard>
 </template>
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 4ccc735f37c58..c7d04615dfa19 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -1002,7 +1002,8 @@ Comments:
 
 Up Next: Up Next
 Description:
-  Click to View Description: Click to View Description
+  Expand Description: ...more
+  Collapse Description: Show less
 
 #Tooltips
 Tooltips:
diff --git a/static/locales/en_GB.yaml b/static/locales/en_GB.yaml
index 7a0c8641eff71..f7c661ad4ff12 100644
--- a/static/locales/en_GB.yaml
+++ b/static/locales/en_GB.yaml
@@ -1060,7 +1060,8 @@ Comments:
   Subscribed: Subscribed
 Up Next: 'Up Next'
 Description:
-  Click to View Description: Click to View Description
+  Expand Description: ...more
+  Collapse Description: Show less
 
 # Toast Messages
 Local API Error (Click to copy): 'Local API Error (Click to copy)'

From df87654638cbed15486a1d93bb0964719aebc2eb Mon Sep 17 00:00:00 2001
From: Nick Sabia <nms00010101@outlook.com>
Date: Mon, 16 Sep 2024 15:24:35 -0500
Subject: [PATCH 04/13] adjusted styling to closer match YT description
 styling; made isShortDescription simpler and less fragile

---
 .../WatchVideoDescription.css                 | 21 ++++--
 .../WatchVideoDescription.vue                 | 64 +++++++++++++------
 2 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
index fcbe034110f0b..571814e1d93df 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
@@ -1,6 +1,7 @@
 .videoDescription {
+  position: relative;
   overflow-y: auto;
-  max-block-size: 300px;
+  max-block-size: 20lh;
 }
 
 .description {
@@ -10,7 +11,7 @@
   overflow-wrap: anywhere;
 }
 
-.getDescriptionTitle {
+.descriptionStatus {
   margin: 0;
   padding-block: 8px;
   text-align: center;
@@ -19,8 +20,18 @@
   color: var(--title-color);
 }
 
-.short {
-  block-size: 230px;
+.videoDescription.short .description {
+  max-block-size: 4lh;
   overflow: hidden;
-  mask-image: linear-gradient(180deg, rgb(2 0 36 / 100%) 80%, rgb(255 255 255 / 0%) 100%);
+}
+
+.videoDescription .overlay {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  transition: background-color 200ms ease;
+}
+
+.videoDescription .overlay:hover {
+  background-color: var(--accent-color-opacity1);
 }
diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index acd2a41b3017d..b602a5c7da628 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -1,25 +1,43 @@
 <template>
   <FtCard
     v-if="shownDescription.length > 0"
-    class="videoDescription"
+    :class="{ videoDescription: true, short: !showFullDescription }"
   >
-    <FtTimestampCatcher
-      ref="descriptionContainer"
-      :class="{ description: true, short: !showFullDescription }"
-      :input-html="shownDescription"
-      @timestamp-event="onTimestamp"
-    />
-    <h4
-      v-if="!showFullDescription"
-      class="getDescriptionTitle"
+    <div
+      v-if="!showFullDescription && showControls"
+      class="overlay"
       role="button"
       tabindex="0"
       @click="expandDescription"
       @keydown.space.prevent="expandDescription"
       @keydown.enter.prevent="expandDescription"
-    >
-      {{ $t("Description.Expand Description") }}
-    </h4>
+    />
+    <FtTimestampCatcher
+      ref="descriptionContainer"
+      class="description"
+      :input-html="shownDescription"
+      @timestamp-event="onTimestamp"
+    />
+    <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"
+        tabindex="0"
+      >
+        {{ $t("Description.Expand Description") }}
+      </span>
+    </template>
   </FtCard>
 </template>
 
@@ -45,7 +63,8 @@ const emit = defineEmits(['timestamp-event'])
 
 let shownDescription = ''
 const descriptionContainer = ref()
-const showFullDescription = ref(true)
+const showFullDescription = ref(false)
+const showControls = ref(false)
 
 if (props.descriptionHtml !== '') {
   const parsed = parseDescriptionHtml(props.descriptionHtml)
@@ -74,20 +93,26 @@ function onTimestamp(timestamp) {
 }
 
 /**
- * Enables user to scroll entire contents of description
+ * 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 the 'Click to View Description' button for short descriptions
+ * Useful for hiding description expansion/contraction controls
  */
 function isShortDescription() {
-  const videoDescriptionMaxHeight = 300
-  const computedDescriptionHeight = descriptionContainer.value.$el.getBoundingClientRect().height
-  return computedDescriptionHeight < videoDescriptionMaxHeight
+  const descriptionElem = descriptionContainer.value.$el
+  return descriptionElem.clientHeight >= descriptionElem.scrollHeight
 }
 
 onMounted(() => {
@@ -95,6 +120,7 @@ onMounted(() => {
   // 'Click to View Description' button, we need to check the description's
   // computed CSS height. The only way to make this work is to check on mount.
   showFullDescription.value = isShortDescription()
+  showControls.value = !showFullDescription.value
 })
 
 /**

From f2e428767b4b1a68e2acfa5b74e0e80b5270600f Mon Sep 17 00:00:00 2001
From: Nick Sabia <nms00010101@outlook.com>
Date: Mon, 16 Sep 2024 15:29:10 -0500
Subject: [PATCH 05/13] updated comment within onMounted

---
 .../WatchVideoDescription/WatchVideoDescription.vue         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index b602a5c7da628..5e92f55abd3a7 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -116,9 +116,9 @@ function isShortDescription() {
 }
 
 onMounted(() => {
-  // To verify whether or not the description is too short for the
-  // 'Click to View Description' button, we need to check the description's
-  // computed CSS height. The only way to make this work is to check on mount.
+  // 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
 })

From a3bf36f6270ac98d00146510ecc6ea60df718566 Mon Sep 17 00:00:00 2001
From: Nick Sabia <nms00010101@outlook.com>
Date: Mon, 16 Sep 2024 15:59:26 -0500
Subject: [PATCH 06/13] ...more button is now inline with description text

---
 .../WatchVideoDescription.css                  | 10 +++++++++-
 .../WatchVideoDescription.vue                  | 18 +++++++++---------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
index 571814e1d93df..37981e18dd674 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
@@ -13,13 +13,21 @@
 
 .descriptionStatus {
   margin: 0;
-  padding-block: 8px;
   text-align: center;
   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%);
+}
+
 .videoDescription.short .description {
   max-block-size: 4lh;
   overflow: hidden;
diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index 5e92f55abd3a7..824d3ec4a9736 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -3,15 +3,6 @@
     v-if="shownDescription.length > 0"
     :class="{ videoDescription: true, short: !showFullDescription }"
   >
-    <div
-      v-if="!showFullDescription && showControls"
-      class="overlay"
-      role="button"
-      tabindex="0"
-      @click="expandDescription"
-      @keydown.space.prevent="expandDescription"
-      @keydown.enter.prevent="expandDescription"
-    />
     <FtTimestampCatcher
       ref="descriptionContainer"
       class="description"
@@ -37,6 +28,15 @@
       >
         {{ $t("Description.Expand Description") }}
       </span>
+      <div
+        v-if="!showFullDescription"
+        class="overlay"
+        role="button"
+        tabindex="0"
+        @click="expandDescription"
+        @keydown.space.prevent="expandDescription"
+        @keydown.enter.prevent="expandDescription"
+      />
     </template>
   </FtCard>
 </template>

From 85e025d43e7f66fbfa073e1c2399ed3648e64b84 Mon Sep 17 00:00:00 2001
From: Nick Sabia <nms00010101@outlook.com>
Date: Mon, 23 Sep 2024 15:55:38 -0500
Subject: [PATCH 07/13] removed underline from description status

---
 .../components/WatchVideoDescription/WatchVideoDescription.css   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
index 37981e18dd674..25217ee6f7c11 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
@@ -26,6 +26,7 @@
   inset-inline-end: 16px;
   padding-inline-start: 40px;
   background: linear-gradient(270deg, var(--card-bg-color) 75%, transparent 100%);
+  text-decoration: none;
 }
 
 .videoDescription.short .description {

From 5c900f929b2ec4ddaf8bc462d031a492275566d4 Mon Sep 17 00:00:00 2001
From: Nick Sabia <nms00010101@outlook.com>
Date: Wed, 16 Oct 2024 22:01:50 -0500
Subject: [PATCH 08/13] more... button is now accessible by tab; description
 overlay now ignored when tabbing

---
 .../WatchVideoDescription/WatchVideoDescription.vue          | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index 824d3ec4a9736..26ebb0133bf09 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -13,7 +13,6 @@
       <span
         v-if="showFullDescription"
         class="descriptionStatus"
-        role="button"
         tabindex="0"
         @click="collapseDescription"
         @keydown.space.prevent="collapseDescription"
@@ -25,14 +24,14 @@
         v-else
         class="descriptionStatus"
         tabindex="0"
+        @keydown.space.prevent="expandDescription"
+        @keydown.enter.prevent="expandDescription"
       >
         {{ $t("Description.Expand Description") }}
       </span>
       <div
         v-if="!showFullDescription"
         class="overlay"
-        role="button"
-        tabindex="0"
         @click="expandDescription"
         @keydown.space.prevent="expandDescription"
         @keydown.enter.prevent="expandDescription"

From 823d53ccfe1f3561135fefe111e0b5df52b0837b Mon Sep 17 00:00:00 2001
From: Nick Sabia <nms00010101@outlook.com>
Date: Thu, 17 Oct 2024 18:23:49 -0500
Subject: [PATCH 09/13] readded role=button attributes

---
 .../components/WatchVideoDescription/WatchVideoDescription.vue  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index 26ebb0133bf09..5b149a5d7e92c 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -13,6 +13,7 @@
       <span
         v-if="showFullDescription"
         class="descriptionStatus"
+        role="button"
         tabindex="0"
         @click="collapseDescription"
         @keydown.space.prevent="collapseDescription"
@@ -23,6 +24,7 @@
       <span
         v-else
         class="descriptionStatus"
+        role="button"
         tabindex="0"
         @keydown.space.prevent="expandDescription"
         @keydown.enter.prevent="expandDescription"

From 861c4b95221f4d22889f5018c11b3ed6a1b7277b Mon Sep 17 00:00:00 2001
From: Nick Sabia <nms00010101@outlook.com>
Date: Mon, 28 Oct 2024 21:29:08 -0500
Subject: [PATCH 10/13] show more and show less buttons are now tabbed to first
 before description links

---
 .../WatchVideoDescription/WatchVideoDescription.css  | 12 +++++++++++-
 .../WatchVideoDescription/WatchVideoDescription.vue  | 12 ++++++------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
index 25217ee6f7c11..c42d6ac46ca7e 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
@@ -1,5 +1,7 @@
 .videoDescription {
   position: relative;
+  display: flex;
+  flex-direction: column;
   overflow-y: auto;
   max-block-size: 20lh;
 }
@@ -13,7 +15,6 @@
 
 .descriptionStatus {
   margin: 0;
-  text-align: center;
   text-decoration: underline;
   cursor: pointer;
   color: var(--title-color);
@@ -29,11 +30,20 @@
   text-decoration: none;
 }
 
+.videoDescription:not(.short) .descriptionStatus {
+  position: relative;
+  order: 0;
+}
+
 .videoDescription.short .description {
   max-block-size: 4lh;
   overflow: hidden;
 }
 
+.videoDescription:not(.short) .description {
+  order: 1;
+}
+
 .videoDescription .overlay {
   position: absolute;
   cursor: pointer;
diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index 5b149a5d7e92c..e6639c70ba6bd 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -3,12 +3,6 @@
     v-if="shownDescription.length > 0"
     :class="{ videoDescription: true, short: !showFullDescription }"
   >
-    <FtTimestampCatcher
-      ref="descriptionContainer"
-      class="description"
-      :input-html="shownDescription"
-      @timestamp-event="onTimestamp"
-    />
     <template v-if="showControls">
       <span
         v-if="showFullDescription"
@@ -39,6 +33,12 @@
         @keydown.enter.prevent="expandDescription"
       />
     </template>
+    <FtTimestampCatcher
+      ref="descriptionContainer"
+      class="description"
+      :input-html="shownDescription"
+      @timestamp-event="onTimestamp"
+    />
   </FtCard>
 </template>
 

From 8a033a979145ddb65e8edd5091f316537b3142bf Mon Sep 17 00:00:00 2001
From: Nick Sabia <nms00010101@outlook.com>
Date: Tue, 29 Oct 2024 19:54:40 -0500
Subject: [PATCH 11/13] changed visual ordering of 'show less' button

---
 .../components/WatchVideoDescription/WatchVideoDescription.css  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
index c42d6ac46ca7e..c41921bf20866 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
@@ -1,7 +1,7 @@
 .videoDescription {
   position: relative;
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
   overflow-y: auto;
   max-block-size: 20lh;
 }

From 2acb8c7b75013c703e93de4d6f07c1797d83001a Mon Sep 17 00:00:00 2001
From: Nick Sabia <nms00010101@outlook.com>
Date: Wed, 30 Oct 2024 17:32:51 -0500
Subject: [PATCH 12/13] reverted previous change; added top margin to show less
 button

---
 .../components/WatchVideoDescription/WatchVideoDescription.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
index c41921bf20866..2c66d8e46eb08 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
@@ -1,7 +1,7 @@
 .videoDescription {
   position: relative;
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
   overflow-y: auto;
   max-block-size: 20lh;
 }
@@ -33,6 +33,7 @@
 .videoDescription:not(.short) .descriptionStatus {
   position: relative;
   order: 0;
+  margin-block-start: 1em;
 }
 
 .videoDescription.short .description {

From 1f47f6010eb2680bbfa87cf7866defdfbe449ab8 Mon Sep 17 00:00:00 2001
From: Nick Sabia <nms00010101@outlook.com>
Date: Sun, 1 Dec 2024 15:11:47 -0600
Subject: [PATCH 13/13] fixed null reference error for videos with no
 description

---
 .../WatchVideoDescription/WatchVideoDescription.vue           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index e6639c70ba6bd..4c2fff59dacef 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -112,8 +112,8 @@ function collapseDescription() {
  * Useful for hiding description expansion/contraction controls
  */
 function isShortDescription() {
-  const descriptionElem = descriptionContainer.value.$el
-  return descriptionElem.clientHeight >= descriptionElem.scrollHeight
+  const descriptionElem = descriptionContainer.value?.$el
+  return descriptionElem?.clientHeight >= descriptionElem?.scrollHeight
 }
 
 onMounted(() => {