From 16386c85e445e7776a7b7856f34db012271dcbcf Mon Sep 17 00:00:00 2001 From: Cyperghost Date: Wed, 26 Jun 2024 10:44:31 +0200 Subject: [PATCH] Use media breakpoints to set the number of columns --- wcfsetup/install/files/style/ui/fileList.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) 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) { -- 2.20.1