From 6d63a5321fda57044433714b7a350a226b22a499 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 2 Apr 2023 18:19:12 +0200
Subject: [PATCH] client: make drive desgin more responsive

---
 packages/client/src/components/drive.file.vue   |  4 ++--
 packages/client/src/components/drive.folder.vue |  5 +++--
 packages/client/src/components/drive.vue        | 10 +++++++---
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/drive.file.vue b/packages/client/src/components/drive.file.vue
index 0091766a4..195e5432f 100644
--- a/packages/client/src/components/drive.file.vue
+++ b/packages/client/src/components/drive.file.vue
@@ -318,8 +318,8 @@ async function deleteFile(): Promise<void> {
 	}
 
 	> .thumbnail {
-		width: 110px;
-		height: 110px;
+		width: 8em;
+		height: 8em;
 		margin: auto;
 	}
 
diff --git a/packages/client/src/components/drive.folder.vue b/packages/client/src/components/drive.folder.vue
index bfc3ffaf6..40526afd8 100644
--- a/packages/client/src/components/drive.folder.vue
+++ b/packages/client/src/components/drive.folder.vue
@@ -259,8 +259,9 @@ function onContextmenu(ev: MouseEvent) {
 	}
 
 	> .thumbnail {
-		width: 110px;
-		height: 110px;
+		/* same style as drive.file.vue */
+		width: 8em;
+		height: 8em;
 		margin: auto;
 
 		/* same style as drive-file-thumbnail.vue */
diff --git a/packages/client/src/components/drive.vue b/packages/client/src/components/drive.vue
index ac67f09ba..014599b89 100644
--- a/packages/client/src/components/drive.vue
+++ b/packages/client/src/components/drive.vue
@@ -610,9 +610,13 @@ onBeforeUnmount(() => {
 		}
 
 		.contents {
-			display: grid;
-			grid-template-columns: repeat(5, 1fr);
-			gap: .5em;
+			display: flex;
+			flex: row wrap;
+
+			> * {
+				width: 8em;
+				margin: var(--margin);
+			}
 		}
 
 		.empty {