From 179add9e122e4fee8d55494149189fa14f34d9ec Mon Sep 17 00:00:00 2001
From: "Prad Nukala (aider)" <prad@sonr.io>
Date: Tue, 10 Dec 2024 13:54:16 -0500
Subject: [PATCH] refactor: Improve mobile layout responsiveness for Rows and
 Columns components

---
 pkg/common/styles/layout/container.templ | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pkg/common/styles/layout/container.templ b/pkg/common/styles/layout/container.templ
index eabf3394a..98ddf9f05 100644
--- a/pkg/common/styles/layout/container.templ
+++ b/pkg/common/styles/layout/container.templ
@@ -1,8 +1,8 @@
 package layout
 
-// Columns is a component that renders a flex container with a gap of 3 and a max width of 100%
+// Columns is a component that renders a responsive flex container that stacks on mobile
 templ Columns() {
-	<div class="flex flex-col h-full w-full gap-3 md:gap-6 md:flex-row">
+	<div class="flex flex-col h-full w-full gap-4 md:gap-6 md:flex-row md:flex-wrap">
 		{ children... }
 	</div>
 }
@@ -19,9 +19,9 @@ templ Container() {
 	</div>
 }
 
-// Rows is a component that renders a flex container with a gap of 2 and a max width of 100%
+// Rows is a component that renders a responsive flex container that wraps on mobile
 templ Rows() {
-	<div class="flex flex-row w-full gap-2 md:gap-4">
+	<div class="flex flex-col w-full gap-3 sm:flex-row sm:flex-wrap sm:gap-4">
 		{ children... }
 	</div>
 }