From b216ac17047d871d77ad53c38188160233442b0c Mon Sep 17 00:00:00 2001
From: Aditya Mishra <adityamishra9922@gmail.com>
Date: Thu, 20 Nov 2025 01:20:40 +0530
Subject: [PATCH 1/3] Fix comment section auto-scroll glitch on initial load

---
 .../CommentSection/CommentSection.vue         | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/CommentSection/CommentSection.vue b/src/renderer/components/CommentSection/CommentSection.vue
index 1fc9e0f80ddad..5671ab737cdcd 100644
--- a/src/renderer/components/CommentSection/CommentSection.vue
+++ b/src/renderer/components/CommentSection/CommentSection.vue
@@ -3,6 +3,7 @@
     class="card"
   >
     <h3
+      ref="commentsTitle"
       v-if="commentData.length > 0 && !isLoading && showComments"
       class="commentsTitle"
     >
@@ -319,7 +320,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, ref, shallowRef } from 'vue'
+import { computed, nextTick, ref, shallowRef } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtCard from '../ft-card/ft-card.vue'
@@ -372,6 +373,7 @@ const props = defineProps({
 })
 
 const isLoading = ref(false)
+const commentsTitle = ref(null)
 const showComments = ref(false)
 const nextPageToken = shallowRef(null)
 
@@ -615,6 +617,13 @@ async function getCommentDataLocal(more = false) {
     nextPageToken.value = comments.has_continuation ? comments : null
     isLoading.value = false
     showComments.value = true
+
+    if (!more) {
+      nextTick(() => {
+        commentsTitle.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      })
+    }
+
   } catch (err) {
     // region No comment detection
     // No comment related info when video info requested earlier in parent component
@@ -716,10 +725,18 @@ async function getCommentDataInvidious() {
       return comment
     })
 
+    const isInitialLoad = commentData.value.length === 0
     commentData.value = commentData.value.concat(comments)
     nextPageToken.value = response.continuation
     isLoading.value = false
     showComments.value = true
+
+    if (isInitialLoad) {
+      nextTick(() => {
+        commentsTitle.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      })
+    }
+
   } catch (err) {
     // region No comment detection
     // No comment related info when video info requested earlier in parent component
@@ -799,10 +816,18 @@ function getPostCommentsInvidious() {
       return comment
     })
 
+    const isInitialLoad = commentData.value.length === 0
     commentData.value = commentData.value.concat(comments)
     nextPageToken.value = response?.continuation ?? continuation
     isLoading.value = false
     showComments.value = true
+
+    if (isInitialLoad) {
+      nextTick(() => {
+        commentsTitle.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      })
+    }
+
   }).catch((err) => {
     console.error(err)
     const errorMessage = t('Invidious API Error (Click to copy)')

From 6ca1a760896f1d2465038af5b0ab625277708cc4 Mon Sep 17 00:00:00 2001
From: Aditya Mishra <66531777+aditya0155@users.noreply.github.com>
Date: Thu, 20 Nov 2025 02:28:29 +0530
Subject: [PATCH 2/3] linting errors fix

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

diff --git a/src/renderer/components/CommentSection/CommentSection.vue b/src/renderer/components/CommentSection/CommentSection.vue
index 5671ab737cdcd..b8519a2c9e19c 100644
--- a/src/renderer/components/CommentSection/CommentSection.vue
+++ b/src/renderer/components/CommentSection/CommentSection.vue
@@ -3,8 +3,8 @@
     class="card"
   >
     <h3
-      ref="commentsTitle"
       v-if="commentData.length > 0 && !isLoading && showComments"
+      ref="commentsTitle"
       class="commentsTitle"
     >
       {{ $t("Comments.Comments") }}
@@ -320,7 +320,7 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { computed, nextTick, ref, shallowRef } from 'vue'
+import { computed, nextTick, ref, shallowRef, useTemplateRef } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtCard from '../ft-card/ft-card.vue'
@@ -373,7 +373,7 @@ const props = defineProps({
 })
 
 const isLoading = ref(false)
-const commentsTitle = ref(null)
+const commentsTitle = useTemplateRef('commentsTitle')
 const showComments = ref(false)
 const nextPageToken = shallowRef(null)
 
@@ -623,7 +623,6 @@ async function getCommentDataLocal(more = false) {
         commentsTitle.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
       })
     }
-
   } catch (err) {
     // region No comment detection
     // No comment related info when video info requested earlier in parent component
@@ -736,7 +735,6 @@ async function getCommentDataInvidious() {
         commentsTitle.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
       })
     }
-
   } catch (err) {
     // region No comment detection
     // No comment related info when video info requested earlier in parent component
@@ -827,7 +825,6 @@ function getPostCommentsInvidious() {
         commentsTitle.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
       })
     }
-
   }).catch((err) => {
     console.error(err)
     const errorMessage = t('Invidious API Error (Click to copy)')

From 66fc56e9adade1022952be2ba0a58864b86b2598 Mon Sep 17 00:00:00 2001
From: Aditya Mishra <66531777+aditya0155@users.noreply.github.com>
Date: Sat, 22 Nov 2025 06:20:04 +0530
Subject: [PATCH 3/3] Change scrollIntoView block option to 'center'

---
 src/renderer/components/CommentSection/CommentSection.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/CommentSection/CommentSection.vue b/src/renderer/components/CommentSection/CommentSection.vue
index b8519a2c9e19c..15e859d42eb7e 100644
--- a/src/renderer/components/CommentSection/CommentSection.vue
+++ b/src/renderer/components/CommentSection/CommentSection.vue
@@ -620,7 +620,7 @@ async function getCommentDataLocal(more = false) {
 
     if (!more) {
       nextTick(() => {
-        commentsTitle.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+        commentsTitle.value?.scrollIntoView({ behavior: 'smooth', block: 'center' })
       })
     }
   } catch (err) {
@@ -732,7 +732,7 @@ async function getCommentDataInvidious() {
 
     if (isInitialLoad) {
       nextTick(() => {
-        commentsTitle.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+        commentsTitle.value?.scrollIntoView({ behavior: 'smooth', block: 'center' })
       })
     }
   } catch (err) {