From c48ffd0e50ce2f62570eb3e8148f33e368c3b047 Mon Sep 17 00:00:00 2001
From: Wolfgang <github@linux-dude.de>
Date: Thu, 26 Sep 2024 21:24:45 +0000
Subject: [PATCH] fix: scrolling when using keyboard navigation

feed-item-row height is actual 110.66px, but setting this fixed is not optimal and should be changed in the future.

Signed-off-by: Wolfgang <github@linux-dude.de>
---
 src/components/feed-display/FeedItemDisplayList.vue | 10 +++++-----
 src/components/feed-display/VirtualScroll.vue       |  9 ++-------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index 4bfd31177..d2fd722f5 100644
--- a/src/components/feed-display/FeedItemDisplayList.vue
+++ b/src/components/feed-display/FeedItemDisplayList.vue
@@ -235,7 +235,7 @@ export default Vue.extend({
 			return response.sort(this.sort)
 		},
 		// Trigger the click event programmatically to benefit from the item handling inside the FeedItemRow component
-		clickItem(item: FeedItem, alignToTop = false) {
+		clickItem(item: FeedItem) {
 			if (!item) {
 				return
 			}
@@ -249,8 +249,8 @@ export default Vue.extend({
 			if (element) {
 				element.click()
 				const virtualScroll = this.$refs.virtualScroll
-				// TODO: This is still jerky and even can derail the current item
-				// virtualScroll.showElement(element, alignToTop)
+				virtualScroll.showElement(element)
+
 			}
 		},
 		currentIndex(items: FeedItem[]): number {
@@ -266,7 +266,7 @@ export default Vue.extend({
 			// Jump to the previous item
 			if (currentIndex > 0) {
 				const previousItem = items[currentIndex - 1]
-				this.clickItem(previousItem, true)
+				this.clickItem(previousItem)
 			}
 		},
 		jumpToNextItem() {
@@ -275,7 +275,7 @@ export default Vue.extend({
 			// Jump to the first item, if none was selected, otherwise jump to the next item
 			if (currentIndex === -1 || (currentIndex < items.length - 1)) {
 				const nextItem = items[currentIndex + 1]
-				this.clickItem(nextItem, false)
+				this.clickItem(nextItem)
 			}
 		},
 	},
diff --git a/src/components/feed-display/VirtualScroll.vue b/src/components/feed-display/VirtualScroll.vue
index f8a8f2cc4..c15fb8f7f 100644
--- a/src/components/feed-display/VirtualScroll.vue
+++ b/src/components/feed-display/VirtualScroll.vue
@@ -10,7 +10,7 @@ import ItemSkeleton from './ItemSkeleton.vue'
 
 const GRID_ITEM_HEIGHT = 200 + 10
 // const GRID_ITEM_WIDTH = 250 + 10
-const LIST_ITEM_HEIGHT = 45 + 1
+const LIST_ITEM_HEIGHT = 110 + 1
 
 export default Vue.extend({
 	name: 'VirtualScroll',
@@ -47,9 +47,6 @@ export default Vue.extend({
 			this.$el.scrollTop = 0
 		},
 	},
-	created() {
-		this.elementToShowAlignToTop = false
-	},
 	mounted() {
 		this.onScroll()
 		window.addEventListener('resize', this.onScroll)
@@ -64,7 +61,6 @@ export default Vue.extend({
 		},
 		showElement(element, alignToTop) {
 			this.elementToShow = element
-			this.elementToShowAlignToTop = alignToTop
 		},
 	},
 	render(h) {
@@ -115,8 +111,7 @@ export default Vue.extend({
 		const scrollTop = this.scrollTop
 		this.$nextTick(() => {
 			if (this.elementToShow) {
-				// this.elementToShow.scrollIntoView(this.elementToShowAlignToTop)
-				this.elementToShow.scrollIntoView({ behavior: 'smooth', block: 'center' })
+				this.elementToShow.scrollIntoView({ behavior: 'auto', block: 'nearest' })
 				this.elementToShow = null
 			} else {
 				this.$el.scrollTop = scrollTop