From 9a5ebb3c58eb4aae8b5f8116dced27cefb63cbf5 Mon Sep 17 00:00:00 2001
From: RicoUHD <190290209+RicoUHD@users.noreply.github.com>
Date: Thu, 9 Apr 2026 15:28:54 +0000
Subject: [PATCH 1/2] Fix grid jumping left horizontally on lazy load in Vue
 VirtualList

The virtual list calculation of column counts used to be out of sync with CSS grid in the case where browser scrollbars have inconsistent layouts. This was because `auto-fill` includes scrollbar dimensions, while JS mathematically excluded them relying on the outer container.

By syncing the inner width (clientWidth) without scrollbars in the ResizeObserver and dynamically pushing the calculated columnCount to inline style gridTemplateColumns on the container, the Javascript rendering completely matches the CSS layout engine rendering.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 apps/files/src/components/VirtualList.vue | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
index 2af11785b027d..b81ee2c0918d3 100644
--- a/apps/files/src/components/VirtualList.vue
+++ b/apps/files/src/components/VirtualList.vue
@@ -76,7 +76,6 @@ import type { PropType } from 'vue'
 
 import debounce from 'debounce'
 import { defineComponent } from 'vue'
-import { useFileListWidth } from '../composables/useFileListWidth.ts'
 import { logger } from '../utils/logger.ts'
 
 interface RecycledPoolItem {
@@ -131,11 +130,7 @@ export default defineComponent({
 	},
 
 	setup() {
-		const { width: fileListWidth } = useFileListWidth()
-
-		return {
-			fileListWidth,
-		}
+		return {}
 	},
 
 	data() {
@@ -145,6 +140,7 @@ export default defineComponent({
 			footerHeight: 0,
 			headerHeight: 0,
 			tableHeight: 0,
+			listWidth: 0,
 			resizeObserver: null as ResizeObserver | null,
 		}
 	},
@@ -197,10 +193,10 @@ export default defineComponent({
 		 * 1 for list view otherwise depending on the file list width.
 		 */
 		columnCount(): number {
-			if (!this.gridMode) {
+			if (!this.gridMode || this.listWidth === 0) {
 				return 1
 			}
-			return Math.floor(this.fileListWidth / this.itemWidth)
+			return Math.floor(this.listWidth / this.itemWidth)
 		},
 
 		/**
@@ -269,10 +265,16 @@ export default defineComponent({
 			// The number of (virtual) rows below the currently rendered ones.
 			const rowsBelow = Math.max(0, this.totalRowCount - rowsAbove - this.rowCount)
 
-			return {
+			const style: Record<string, string> = {
 				paddingBlock: `${rowsAbove * this.itemHeight}px ${rowsBelow * this.itemHeight}px`,
 				minHeight: `${this.totalRowCount * this.itemHeight}px`,
 			}
+
+			if (this.gridMode) {
+				style.gridTemplateColumns = `repeat(${this.columnCount}, var(--row-width))`
+			}
+
+			return style
 		},
 	},
 
@@ -430,11 +432,12 @@ export default defineComponent({
 		},
 
 		/**
-		 * Update the height variables.
+		 * Update the height and width variables.
 		 * To be called by resize observer and `onMount`
 		 */
 		updateHeightVariables(): void {
 			this.tableHeight = this.$el?.clientHeight ?? 0
+			this.listWidth = this.$el?.clientWidth ?? 0
 			this.beforeHeight = (this.$refs.before as HTMLElement)?.clientHeight ?? 0
 			this.footerHeight = (this.$refs.footer as HTMLElement)?.clientHeight ?? 0
 

From 6ce0d8fb8e2b1b38e780837b100a870196e34a39 Mon Sep 17 00:00:00 2001
From: Enrico Lehn <enrico.lehn@gmail.com>
Date: Thu, 9 Apr 2026 22:16:22 +0200
Subject: [PATCH 2/2] Change justify-content from space-around to start

Signed-off-by: Enrico Lehn <enrico.lehn@gmail.com>
---
 apps/files/src/components/FilesListVirtual.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index c1242c639ce6c..eef779ded763a 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -957,7 +957,7 @@ export default defineComponent({
 
 	align-content: center;
 	align-items: center;
-	justify-content: space-around;
+	justify-content: start;
 	justify-items: center;
 
 	tr {