From df98b84a5d0f8f3a6d8def4648c8b54a5168e170 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 25 Sep 2023 13:48:30 +0100
Subject: [PATCH] refactor: replace set columns with repeat auto-fit and minmax

---
 frontend/src/styles/settings.scss        | 11 ++---------
 frontend/src/styles/z_media-queries.scss | 22 ----------------------
 2 files changed, 2 insertions(+), 31 deletions(-)

diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss
index f858b2861..91852da6a 100644
--- a/frontend/src/styles/settings.scss
+++ b/frontend/src/styles/settings.scss
@@ -212,8 +212,7 @@
 
     .buttons {
       display: grid;
-      grid-auto-flow: column;
-      grid-auto-columns: 1fr;
+      grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
       gap: 0.5rem;
       grid-area: buttons;
       &.vertical {
@@ -452,17 +451,11 @@
 
       .buttons {
         margin-left: 0;
-        grid-auto-flow: dense;
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
         gap: 0.5rem;
       }
     }
-
-    &.randomTheme .buttons,
-    &.highlightMode .buttons {
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-    }
   }
 }
 
diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss
index d2f8985db..3e0fa7807 100644
--- a/frontend/src/styles/z_media-queries.scss
+++ b/frontend/src/styles/z_media-queries.scss
@@ -60,9 +60,6 @@
   #quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchControlsWrapper {
     grid-template-columns: 1fr 1fr max-content;
   }
-  // .pageSettings .section.themes .buttons {
-  //   grid-template-columns: 1fr 1fr 1fr;
-  // }
   #customTextPopupWrapper #customTextPopup .buttonsTop {
     grid-template-columns: 1fr 1fr;
   }
@@ -79,12 +76,6 @@
       font-size: 0.75rem;
     }
   }
-  .pageSettings .section.fullWidth .buttons {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-  // .pageSettings .section.themes .buttons {
-  //   grid-template-columns: 1fr 1fr;
-  // }
   #quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchControlsWrapper {
     grid-template-columns: 1fr;
   }
@@ -676,13 +667,6 @@
       }
     }
   }
-
-  .pageSettings .section.fullWidth .buttons {
-    grid-template-columns: 1fr 1fr;
-  }
-  // .pageSettings .section.themes .buttons {
-  //   grid-template-columns: 1fr;
-  // }
 }
 
 //600px
@@ -855,12 +839,6 @@
   }
 
   .pageSettings {
-    .section.fullWidth .buttons {
-      grid-template-columns: 1fr;
-    }
-    .section .buttons {
-      grid-auto-flow: row;
-    }
     .section.customBackgroundFilter .groups .group {
       grid-template-columns: auto 1fr;
       .title {