From c6a5e25d061eda6e8f057b6760d8369cac1d54ec Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Thu, 30 Apr 2026 15:29:35 +0100
Subject: [PATCH] fix(ImageUpload): restore :focus styling on alt-text input

The alt-text input was hard-coding border/bg via inline style="..." after
the phantom-Tailwind sweep, which can't carry pseudo-class rules.
Per CLAUDE.md, inputs focus to --candle. Moved to a scoped style block
with a real :focus rule.
---
 app/components/ImageUpload.vue | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/app/components/ImageUpload.vue b/app/components/ImageUpload.vue
index bd8a87e..7db4306 100644
--- a/app/components/ImageUpload.vue
+++ b/app/components/ImageUpload.vue
@@ -77,12 +77,7 @@
       <input
         :value="modelValue.alt || ''"
         placeholder="Describe this image..."
-        class="w-full px-3 py-2"
-        style="
-          background: var(--input-bg);
-          border: 1px solid var(--border);
-          color: var(--text);
-        "
+        class="w-full px-3 py-2 alt-text-input"
         @input="updateAltText($event.target.value)"
       >
     </div>
@@ -225,3 +220,16 @@ const updateAltText = (altText) => {
   });
 };
 </script>
+
+<style scoped>
+.alt-text-input {
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+
+.alt-text-input:focus {
+  outline: none;
+  border-color: var(--candle);
+}
+</style>