From dd4e565008177752ab841c04ca812c248cddb2c8 Mon Sep 17 00:00:00 2001
From: billybonks <sebastienstettler@gmail.com>
Date: Wed, 21 Feb 2024 08:33:52 +0800
Subject: [PATCH] feat: improve styling of pill groups

1. add default spacing
2. increase size to use all space on mobile
---
 babybuddy/static_src/scss/forms.scss      | 14 ++++++++++++++
 core/templates/core/pill_radio.html       |  2 +-
 core/templates/forms/layouts/choices.html |  2 +-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/babybuddy/static_src/scss/forms.scss b/babybuddy/static_src/scss/forms.scss
index 0af94158..6060c550 100644
--- a/babybuddy/static_src/scss/forms.scss
+++ b/babybuddy/static_src/scss/forms.scss
@@ -33,6 +33,20 @@
     z-index: 1030;
 }
 
+.pill-container {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 10px;
+    row-gap: 10px;
+}
+
+// Only grow pill buttons on when using a mobile
+@include media-breakpoint-down(sm) {
+    .pill-container>label {
+            flex-grow: 1;
+        }
+}
+
 // Tweak padding on form field help blocks.
 .help-block {
     ul {
diff --git a/core/templates/core/pill_radio.html b/core/templates/core/pill_radio.html
index bfdd1293..d375236e 100644
--- a/core/templates/core/pill_radio.html
+++ b/core/templates/core/pill_radio.html
@@ -1,5 +1,5 @@
 {% with id=widget.attrs.id %}
-    <div {% if id %}id="{{ id }}"{% endif %} class="radio-container">
+    <div {% if id %}id="{{ id }}"{% endif %} class="pill-container">
         {% for group, options, index in widget.optgroups %}
             {% for option in options %}
                 {% if option.value != '' %}
diff --git a/core/templates/forms/layouts/choices.html b/core/templates/forms/layouts/choices.html
index 8b74202f..9f6748c7 100644
--- a/core/templates/forms/layouts/choices.html
+++ b/core/templates/forms/layouts/choices.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 <div class="row mb-3">
     <label for="id_child" class="col-sm-2 col-form-label">{% trans fieldset.layout_attrs.label %}</label>
-    <div class="col-sm-10 overflow-auto">
+    <div class="col-sm-10 overflow-auto pill-container">
         {% for field in fieldset.fields %}
             {% include "babybuddy/form_field_no_label.html" %}
         {% endfor %}