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

1 files changed, 11 insertions, 6 deletions

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 3c69030..7d27083 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