go/sonr
go/sonr
1
1
Fork 0
mirror of https://github.com/onsonr/sonr.git synced 2025-03-10 13:07:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: Improve mobile layout responsiveness for Rows and Columns components

Browse Source
This commit is contained in:
Prad Nukala 2024-12-10 13:54:16 -05:00
parent 9d3264256a
commit 179add9e12
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pkg/common/styles/layout/container.templ
View File

@ -1,8 +1,8 @@
package layout 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() { 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... } { children... }
</div> </div>
} }
@ -19,9 +19,9 @@ templ Container() {
</div> </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() { 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... } { children... }
</div> </div>
} }