From: Cyperghost <olaf_schmitz_1@t-online.de>
Date: Wed, 26 Jun 2024 08:44:31 +0000 (+0200)
Subject: Use media breakpoints to set the number of columns
X-Git-Tag: 6.1.0_Alpha_1~41^2~22
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=16386c85e445e7776a7b7856f34db012271dcbcf;p=GitHub%2FWoltLab%2FWCF.git

Use media breakpoints to set the number of columns
---

diff --git a/wcfsetup/install/files/style/ui/fileList.scss b/wcfsetup/install/files/style/ui/fileList.scss
index 77eb78d04f..791b8acbed 100644
--- a/wcfsetup/install/files/style/ui/fileList.scss
+++ b/wcfsetup/install/files/style/ui/fileList.scss
@@ -2,8 +2,15 @@
 	display: grid;
 	gap: 10px;
 	grid-auto-flow: row;
-	// TODO: use container queries to make this more dynamic?
-	grid-template-columns: repeat(3, 1fr);
+	@include screen-sm-down {
+		grid-template-columns: repeat(1, 1fr);
+	}
+	@include screen-md {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	@include screen-lg {
+		grid-template-columns: repeat(3, 1fr);
+	}
 }
 
 .fileList:not(:empty) {