fix(files): Grid view virtual scrolling computations

Signed-off-by: Louis Chemineau <louis@chmn.me>
nextcloud · Jul 22, 2024 · 0d6190e · 0d6190e
1 parent 27c0bef
commit 0d6190e
Show file tree

Hide file tree

Showing 23 changed files with 6 additions and 5,829 deletions.
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
@@ -691,13 +691,12 @@ tbody.files-list__tbody.files-list__tbody--grid {
 	--icon-preview-size: 166px;
 	--name-height: 32px;
 	--mtime-height: 16px;
-	--row-width: calc(var(--icon-preview-size));
-	--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height));
+	--row-width: calc(var(--icon-preview-size) + var(--item-padding) * 2);
+	--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height) + var(--item-padding) * 2);
 	--checkbox-padding: 0px;
 
 	display: grid;
 	grid-template-columns: repeat(auto-fill, var(--row-width));
-	gap: 22px;
 
 	align-content: center;
 	align-items: center;
@@ -714,7 +713,6 @@ tbody.files-list__tbody.files-list__tbody--grid {
 		border: none;
 		border-radius: var(--border-radius-large);
 		padding: var(--item-padding);
-		box-sizing: content-box;
 	}
 
 	// Checkbox in the top left

diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
@@ -131,13 +131,13 @@ export default Vue.extend({
 
 		itemHeight() {
 			// Align with css in FilesListVirtual
-			// 166px + 32px (name) + 16px (mtime) + 16px (padding) + 22px (grid gap)
-			return this.gridMode ? (166 + 32 + 16 + 16 + 22) : 55
+			// 166px + 32px (name) + 16px (mtime) + 16px (padding)
+			return this.gridMode ? (166 + 32 + 16 + 16) : 55
 		},
 		// Grid mode only
 		itemWidth() {
-			// 166px + 16px padding + 22px grid gap
-			return 166 + 16 + 22
+			// 166px + 16px padding
+			return 166 + 16
 		},
 
 		rowCount() {

diff --git a/dist/1521-1521.js.license b/dist/1521-1521.js.license