Fix Color Class

admin/modals/category/category_add.php

@@ -48,7 +48,7 @@ $category_types_array = ['Expense', 'Income', 'Referral', 'Ticket'];
             <label>Color <strong class="text-danger">*</strong></label>
             <div class="input-group">
                     <span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
-                <input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" required>
+                <input type="color" class="form-control form-control-color" name="color" required>
             </div>
         </div>
 

admin/modals/category/category_edit.php

@@ -37,7 +37,7 @@ ob_start();
             <label>Color <strong class="text-danger">*</strong></label>
             <div class="input-group">
                     <span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
-                <input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" value="<?= $category_color ?>" required>
+                <input type="color" class="form-control form-control-color" name="color" value="<?= $category_color ?>" required>
             </div>
         </div>
 

admin/modals/tag/tag_add.php

@@ -67,7 +67,7 @@ ob_start();
             <label>Color <strong class="text-danger">*</strong></label>
             <div class="input-group">
                     <span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
-                <input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" required>
+                <input type="color" class="form-control form-control-color" name="color" required>
             </div>
         </div>
 

admin/modals/tag/tag_edit.php

@@ -50,7 +50,7 @@ ob_start();
             <label>Color <strong class="text-danger">*</strong></label>
             <div class="input-group">
                     <span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
-                <input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" value="<?= $tag_color ?>" required>
+                <input type="color" class="form-control form-control-color" name="color" value="<?= $tag_color ?>" required>
             </div>
         </div>
 

admin/modals/ticket_status/ticket_status_add.php

@@ -23,7 +23,7 @@ ob_start();
             <label>Color <strong class="text-danger">*</strong></label>
             <div class="input-group">
                     <span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
-                <input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" required>
+                <input type="color" class="form-control form-control-color" name="color" required>
             </div>
         </div>
 

admin/modals/ticket_status/ticket_status_edit.php

@@ -41,7 +41,7 @@ ob_start();
             <label>Color <strong class="text-danger">*</strong></label>
             <div class="input-group">
                     <span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
-                <input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" value="<?= $ticket_status_color ?>" required>
+                <input type="color" class="form-control form-control-color" name="color" value="<?= $ticket_status_color ?>" required>
             </div>
         </div>
 

agent/modals/calendar/calendar_add.php

@@ -27,7 +27,7 @@ ob_start();
             <label>Color <strong class="text-danger">*</strong></label>
             <div class="input-group">
                     <span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
-                <input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" required>
+                <input type="color" class="form-control form-control-color" name="color" required>
             </div>
         </div>
 

agent/modals/calendar/calendar_edit.php

@@ -35,7 +35,7 @@ ob_start();
             <label>Color <strong class="text-danger">*</strong></label>
             <div class="input-group">
                     <span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
-                <input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" value="<?= $calendar_color ?>" required>
+                <input type="color" class="form-control form-control-color" name="color" value="<?= $calendar_color ?>" required>
             </div>
         </div>
 

css/itflow_custom.css

@@ -1385,6 +1385,22 @@ select.select2[multiple]:not(.tomselected) {
     --lte-primary-color-rgb: 0, 0, 0;
 }
 
+/* --- Colour inputs ---------------------------------------------------------
+   Bootstrap sizes `.form-control-color` at width:3rem, but every colour input
+   in ITFlow sits inside an .input-group, and `.input-group > .form-control`
+   (0,2,0) sets `width: 1%; flex: 1 1 auto` - which outranks .form-control-color
+   (0,1,0) and collapses the swatch to a sliver. Matching that specificity is
+   the only way to win it back; the selector is strictly narrower than the one
+   it ties with, so nothing but a colour input is affected.
+
+   4rem rather than Bootstrap's 3rem: the swatch is the entire point of the
+   control, and .text-sm keeps the height at the 35px of its neighbours, so
+   there is only width available to read the colour by. */
+.input-group > .form-control-color {
+    flex: 0 0 auto;
+    width: 4rem;
+}
+
 /* --- intl-tel-input --------------------------------------------------------
    The library wraps the input in a .iti container, which inside an
    .input-group becomes the flex item instead of the input. Bootstrap sizes its