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 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
// 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>
}