jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ImageUpload): restore :focus styling on alt-text input

Browse source 
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.
This commit is contained in:
Jennie Robinson Faber 2026-04-30 15:29:35 +01:00
parent 441a5f5608
commit c6a5e25d06
1 changed files with 14 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

20
app/components/ImageUpload.vue
View file

@ -77,12 +77,7 @@
<input <input
:value="modelValue.alt || ''" :value="modelValue.alt || ''"
placeholder="Describe this image..." placeholder="Describe this image..."
class="w-full px-3 py-2" class="w-full px-3 py-2 alt-text-input"
style="
background: var(--input-bg);
border: 1px solid var(--border);
color: var(--text);
"
@input="updateAltText($event.target.value)" @input="updateAltText($event.target.value)"
> >
</div> </div>
@ -225,3 +220,16 @@ const updateAltText = (altText) => {
}); });
}; };
</script> </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>