From b3564389f9f3084d92b109a25df8e3ca91efc66f Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Wed, 28 Aug 2024 18:05:30 +0200
Subject: [PATCH] refactor(sticky-columns-layout): initial responsiveness and
 breakpoints

---
 src/layouts/StickySideColumns.module.scss | 34 +++++++++++++++++++----
 src/pages/create/style.module.scss        |  4 +--
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/layouts/StickySideColumns.module.scss b/src/layouts/StickySideColumns.module.scss
index 77daa03..4defd59 100644
--- a/src/layouts/StickySideColumns.module.scss
+++ b/src/layouts/StickySideColumns.module.scss
@@ -3,9 +3,26 @@
 
 .container {
   display: grid;
-  grid-template-columns: 0.75fr 1.5fr 0.75fr;
-  grid-gap: 30px;
-  flex-grow: 1;
+
+  @media only screen and (max-width: 767px) {
+    gap: 20px;
+    grid-auto-flow: column;
+    grid-auto-columns: 100%;
+
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+
+    scroll-snap-type: inline mandatory;
+
+    > * {
+      scroll-snap-align: start;
+    }
+  }
+
+  @media only screen and (min-width: 768px) {
+    grid-template-columns: 0.75fr 1.5fr 0.75fr;
+    gap: 30px;
+  }
 }
 
 .sidesWrap {
@@ -16,8 +33,10 @@
 }
 
 .sides {
-  position: sticky;
-  top: $header-height + $body-vertical-padding;
+  @media only screen and (min-width: 768px) {
+    position: sticky;
+    top: $header-height + $body-vertical-padding;
+  }
 }
 
 .files {
@@ -29,4 +48,9 @@
   padding: 10px;
   border: 10px solid $overlay-background-color;
   border-radius: 4px;
+
+  @media only screen and (max-width: 767px) {
+    max-height: calc(100svh - $header-height + $body-vertical-padding * 2);
+    overflow-y: auto;
+  }
 }
diff --git a/src/pages/create/style.module.scss b/src/pages/create/style.module.scss
index 0b7c8f7..0ea1c46 100644
--- a/src/pages/create/style.module.scss
+++ b/src/pages/create/style.module.scss
@@ -135,11 +135,11 @@
   grid-template-columns: 1fr;
 
   @container (min-width: 204px) {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(2, 1fr);
   }
 
   @container (min-width: 309px) {
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: repeat(3, 1fr);
   }
 
   gap: 15px;