diff --git a/admin/modals/category/category_add.php b/admin/modals/category/category_add.php
index 19ef50b05..b174d94ee 100644
--- a/admin/modals/category/category_add.php
+++ b/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>
 
diff --git a/admin/modals/category/category_edit.php b/admin/modals/category/category_edit.php
index 32b965643..96bf08f22 100644
--- a/admin/modals/category/category_edit.php
+++ b/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>
 
diff --git a/admin/modals/tag/tag_add.php b/admin/modals/tag/tag_add.php
index 3364cb26e..4d8913bdb 100644
--- a/admin/modals/tag/tag_add.php
+++ b/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>
 
diff --git a/admin/modals/tag/tag_edit.php b/admin/modals/tag/tag_edit.php
index fd08e0579..22c74ffac 100644
--- a/admin/modals/tag/tag_edit.php
+++ b/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>
 
diff --git a/admin/modals/ticket_status/ticket_status_add.php b/admin/modals/ticket_status/ticket_status_add.php
index 7d0f4746e..9f22cdbb8 100644
--- a/admin/modals/ticket_status/ticket_status_add.php
+++ b/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>
 
diff --git a/admin/modals/ticket_status/ticket_status_edit.php b/admin/modals/ticket_status/ticket_status_edit.php
index e93c94e4b..3170b72bb 100644
--- a/admin/modals/ticket_status/ticket_status_edit.php
+++ b/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>
 
diff --git a/agent/modals/calendar/calendar_add.php b/agent/modals/calendar/calendar_add.php
index fc143c8fa..7ea4d6e11 100644
--- a/agent/modals/calendar/calendar_add.php
+++ b/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>
 
diff --git a/agent/modals/calendar/calendar_edit.php b/agent/modals/calendar/calendar_edit.php
index 9a332405b..b2b09e6c2 100644
--- a/agent/modals/calendar/calendar_edit.php
+++ b/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>
 
diff --git a/css/itflow_custom.css b/css/itflow_custom.css
index 1fef24586..234c01847 100644
--- a/css/itflow_custom.css
+++ b/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