fix slight misalignment and sizing issues of checkboxes and radio buttons

fix #613

Author: lovasoa

CHANGELOG.md

@@ -16,6 +16,7 @@
  - Fix an issue where the color name `blue` could not be used in the chart component.
  - Add new properties to the foldable component: `id`, `class`, and `expanded` (to control the state of the foldable item). The old behavior was having the first foldable item initially opened and the others closed. To keep the old behavior, you need to explicitly set `true as expanded` on the first foldable item.
  - **divider component**: Add new properties to the divider component: `link`, `bold`, `italics`, `underline`, `size`.
+ - **form component**: fix slight misalignment and sizing issues of checkboxes and radio buttons.
 
 ## 0.28.0 (2024-08-31)
 - Chart component: fix the labels of pie charts displaying too many decimal places.

sqlpage/templates/form.handlebars

@@ -15,8 +15,8 @@
         <div class="row">
             {{#each_row}}
             {{#if (or (eq type "radio") (eq type "checkbox"))}}
-                <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column my-1 col-md-{{default width 12}}">
-                    <label class="form-selectgroup-item flex-fill">
+                <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column mx-0 my-1 col-md-{{default width 12}}">
+                    <label class="form-selectgroup-item flex-fill mx-0">
                         <input type="{{type}}" {{#if id}}id="{{id}}" {{/if}}name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} {{#if checked}}checked{{/if}} class="form-selectgroup-input">
                         <div class="form-selectgroup-label d-flex align-items-center p-3">
                             <div class="me-3">