From f74e16b8aa6c54538a594428ad97e5c71ae5a682 Mon Sep 17 00:00:00 2001
From: James Wampler <james@wamp.dev>
Date: Wed, 1 Jul 2026 13:25:45 -0700
Subject: [PATCH] Fix tag color picker copy and native picker positioning

Dialog/button titles said "colour" instead of "Color", and the
hidden native color input had no positioned ancestor so the browser
picker opened at the top-left of the viewport instead of near the
dialog.
---
 .../src/components/features/TagsChipInput.vue | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/admin/src/components/features/TagsChipInput.vue b/src/admin/src/components/features/TagsChipInput.vue
index 5eb5438..ea99d18 100755
--- a/src/admin/src/components/features/TagsChipInput.vue
+++ b/src/admin/src/components/features/TagsChipInput.vue
@@ -55,18 +55,10 @@
           type="button"
           style="width:36px;height:36px;border:none;padding:0;cursor:pointer;border-radius:4px"
           :style="{ background: newTagColor }"
-          title="Tag colour"
+          title="Tag Color"
           data-testid="tag-color-swatch"
           @click="showColorDialog = true"
         />
-        <input
-          ref="customColorInputRef"
-          v-model="newTagColor"
-          type="color"
-          style="position:absolute;width:0;height:0;opacity:0;pointer-events:none"
-          data-testid="custom-color-input"
-          @input="showColorDialog = false"
-        />
         <v-btn
           icon="ri-add-line"
           size="small"
@@ -80,10 +72,10 @@
       </div>
     </template>
 
-    <!-- Colour picker dialog -->
+    <!-- Color picker dialog -->
     <v-dialog v-model="showColorDialog" max-width="260" data-testid="color-dialog">
       <v-card rounded="lg">
-        <v-card-title class="pa-4 pb-2 text-body-1">Tag colour</v-card-title>
+        <v-card-title class="pa-4 pb-2 text-body-1">Tag Color</v-card-title>
         <v-card-text class="pa-4 pt-0">
           <div class="d-flex flex-wrap ga-2">
             <button
@@ -96,16 +88,26 @@
               :data-testid="`preset-color-${color}`"
               @click="onSelectPresetColor(color)"
             />
-            <button
-              type="button"
-              class="d-flex align-center justify-center"
-              style="width:32px;height:32px;border:1px solid rgba(0,0,0,0.2);padding:0;cursor:pointer;border-radius:4px;background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red)"
-              title="Custom colour"
-              data-testid="custom-color-trigger"
-              @click="customColorInputRef?.click()"
-            >
-              <v-icon size="16" color="white">ri-palette-line</v-icon>
-            </button>
+            <div style="position:relative;width:32px;height:32px">
+              <button
+                type="button"
+                class="d-flex align-center justify-center"
+                style="width:32px;height:32px;border:1px solid rgba(0,0,0,0.2);padding:0;cursor:pointer;border-radius:4px;background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red)"
+                title="Custom Color"
+                data-testid="custom-color-trigger"
+                @click="customColorInputRef?.click()"
+              >
+                <v-icon size="16" color="white">ri-palette-line</v-icon>
+              </button>
+              <input
+                ref="customColorInputRef"
+                v-model="newTagColor"
+                type="color"
+                style="position:absolute;inset:0;width:32px;height:32px;opacity:0;pointer-events:none"
+                data-testid="custom-color-input"
+                @input="showColorDialog = false"
+              />
+            </div>
           </div>
         </v-card-text>
       </v-card>