Merge pull request #46681 from nextcloud/artonge/fix/grid_view_preview_size

fix(files): Reduce preview size in grid view mode

Author: artonge

apps/files/src/components/FilesListVirtual.vue

@@ -688,16 +688,15 @@ export default defineComponent({
 tbody.files-list__tbody.files-list__tbody--grid {
 	--half-clickable-area: calc(var(--clickable-area) / 2);
 	--item-padding: 16px;
-	--icon-preview-size: 208px;
+	--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

apps/files/src/components/VirtualList.vue

@@ -131,13 +131,13 @@ export default Vue.extend({
 
 		itemHeight() {
 			// Align with css in FilesListVirtual
-			// 208px + 32px (name) + 16px (mtime) + 16px (padding) + 22px (grid gap)
-			return this.gridMode ? (208 + 32 + 16 + 16 + 22) : 55
+			// 166px + 32px (name) + 16px (mtime) + 16px (padding)
+			return this.gridMode ? (166 + 32 + 16 + 16) : 55
 		},
 		// Grid mode only
 		itemWidth() {
-			// 208px + 16px padding + 22px grid gap
-			return 208 + 16 + 22
+			// 166px + 16px padding
+			return 166 + 16
 		},
 
 		rowCount() {