From 79d29229ae9f8aa2f122b8dd2896763780fc3c9c Mon Sep 17 00:00:00 2001
From: eikek <eike.kettner@posteo.de>
Date: Mon, 21 Feb 2022 22:52:39 +0100
Subject: [PATCH] Add more breakpoints and increase card column count

Refs: #1401
---
 modules/webapp/src/main/elm/Comp/ItemCardList.elm |  4 +++-
 modules/webapp/tailwind.config.js                 | 11 +++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/modules/webapp/src/main/elm/Comp/ItemCardList.elm b/modules/webapp/src/main/elm/Comp/ItemCardList.elm
index 7899ac7c..f9f2967b 100644
--- a/modules/webapp/src/main/elm/Comp/ItemCardList.elm
+++ b/modules/webapp/src/main/elm/Comp/ItemCardList.elm
@@ -208,7 +208,9 @@ itemContainerCss : ViewConfig -> String
 itemContainerCss cfg =
     case cfg.arrange of
         Data.ItemArrange.Cards ->
-            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-2"
+            "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 "
+                ++ "xl:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 4xl:grid-cols-6 "
+                ++ "5xl:grid-cols-8 6xl:grid-cols-10 gap-2"
 
         Data.ItemArrange.List ->
             "flex flex-col divide-y"
diff --git a/modules/webapp/tailwind.config.js b/modules/webapp/tailwind.config.js
index 5b8acf26..3e25d8b8 100644
--- a/modules/webapp/tailwind.config.js
+++ b/modules/webapp/tailwind.config.js
@@ -8,6 +8,17 @@ module.exports = {
                "./src/main/styles/keep.txt",
                "../restserver/src/main/templates/*.html"
              ],
+    theme: {
+        extend: {
+            screens: {
+                '3xl': '1792px',
+                '4xl': '2048px',
+                '5xl': '2560px',
+                '6xl': '3072px',
+                '7xl': '3584px'
+            }
+        }
+    },
     variants: {
         extend: {
             backgroundOpacity: ['dark']