commit 26515536dfeaececbc7d83d21a58cc23434db5fd
Author: Ben Sima <ben@bensima.com>
Date: Thu Nov 27 18:44:22 2025
Make filter buttons horizontal instead of vertical stacking
The changes are complete. The filter buttons are now styled to
be horizo
1. Changed `.filter-group` from `flexDirection column` to
`flexDirection 2. Added `whiteSpace nowrap` to labels to prevent
wrapping 3. Updated responsive styles for mobile to maintain horizontal
layout wi
Task-Id: t-156.5
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 3c69030b..7d270837 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -588,12 +588,14 @@ formStyles = do
alignItems flexEnd
".filter-group" ? do
display flex
- flexDirection column
- Stylesheet.key "gap" ("2px" :: Text)
+ flexDirection row
+ alignItems center
+ Stylesheet.key "gap" ("4px" :: Text)
(".filter-group" |> label) ? do
- fontSize (px 11)
+ fontSize (px 12)
color "#6b7280"
fontWeight (weight 500)
+ whiteSpace nowrap
".filter-select" <> ".filter-input" <> ".status-select" ? do
minHeight (px 32)
padding (px 6) (px 10) (px 6) (px 10)
@@ -978,9 +980,12 @@ responsiveStyles = do
flexDirection column
Stylesheet.key "gap" ("2px" :: Text)
".detail-label" ? width auto
- ".filter-row" ? flexDirection column
- ".filter-group" ? width (pct 100)
- ".filter-select" <> ".filter-input" ? width (pct 100)
+ ".filter-row" ? do
+ flexWrap Flexbox.wrap
+ ".filter-group" ? do
+ width auto
+ flexWrap Flexbox.nowrap
+ ".filter-select" <> ".filter-input" ? minWidth (px 80)
".review-actions" ? do
flexDirection column
".reject-form" ? do