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 77eb78d04fb8fca1af94c8fad0f0bf6d2f048ae4..791b8acbedad3d7544889cf2ad9860f0d0eac9ef 100644 (file)
--- 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) {