From ad61b155b88a22cdbc4b58e2c2f9884272fb9248 Mon Sep 17 00:00:00 2001
From: Tagaishi <Tagaishi@hotmail.ch>
Date: Fri, 1 Sep 2023 17:16:37 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Large=20screen=20gridstack=20max?=
 =?UTF-8?q?=20value=20to=2032=20and=20sidebar=20gridstack=20over=2013=20bu?=
 =?UTF-8?q?g=20fix=20(#1339)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 Large screen gridstack max value to 32

* 🐛 Fix sidebar bug
---
 .../Customization/Layout/GridstackConfiguration.tsx         | 2 +-
 src/styles/global.scss                                      | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Settings/Customization/Layout/GridstackConfiguration.tsx b/src/components/Settings/Customization/Layout/GridstackConfiguration.tsx
index 31a70ce53..2bf967905 100644
--- a/src/components/Settings/Customization/Layout/GridstackConfiguration.tsx
+++ b/src/components/Settings/Customization/Layout/GridstackConfiguration.tsx
@@ -78,7 +78,7 @@ export const GridstackConfiguration = () => {
           pixels: GridstackBreakpoints.large,
         })}
       >
-        <Slider min={5} max={20} mt="xs" {...form.getInputProps('columnCountLarge')} />
+        <Slider min={5} max={32} mt="xs" {...form.getInputProps('columnCountLarge')} />
       </Input.Wrapper>
       {form.isDirty() && (
         <Alert variant="light" color="yellow" title="Unsaved changes" my="md">
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 13a8c5dda..d9783f5f9 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -18,7 +18,7 @@
 }
 
 // Styling for grid-stack main area
-@for $i from 1 to 21 {
+@for $i from 1 to 96 {
 	.grid-stack>.grid-stack-item[gs-w="#{$i}"]  { width: calc(100% / #{var(--gridstack-column-count)} * #{$i}) }
 	.grid-stack>.grid-stack-item[gs-min-w="#{$i}"]  { min-width: calc(100% / #{var(--gridstack-column-count)} * #{$i}) }
 	.grid-stack>.grid-stack-item[gs-max-w="#{$i}"]  { max-width: calc(100% / #{var(--gridstack-column-count)} * #{$i}) }
@@ -30,7 +30,7 @@
   .grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height:  calc(#{$i}px * #{var(--gridstack-widget-width)}) }
 }
 
-@for $i from 1 to 21 {
+@for $i from 1 to 96 {
 	.grid-stack>.grid-stack-item[gs-x="#{$i}"]  { left: calc(100% / #{var(--gridstack-column-count)} * #{$i}) }
 }
 
@@ -44,7 +44,7 @@
 }
 
 // Styling for sidebar grid-stack elements
-@for $i from 1 to 3 {
+@for $i from 1 to 96 {
   .grid-stack.grid-stack-sidebar>.grid-stack-item[gs-w="#{$i}"]  { width: 128px * $i }
 	.grid-stack.grid-stack-sidebar>.grid-stack-item[gs-min-w="#{$i}"]  { min-width: 128px * $i }
 	.grid-stack.grid-stack-sidebar>.grid-stack-item[gs-max-w="#{$i}"]  { max-width: 128px * $i }