From b82643d1a2d678786605a0ca3efd8642a51e43da Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Mon, 24 Feb 2025 11:10:11 +0100
Subject: [PATCH] fix(style): focus ring around selected pill input

---
 front/src/components/ui/Pills.vue | 9 +++------
 front/src/components/ui/pill.scss | 4 ++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/front/src/components/ui/Pills.vue b/front/src/components/ui/Pills.vue
index 8d12cb929..056013981 100644
--- a/front/src/components/ui/Pills.vue
+++ b/front/src/components/ui/Pills.vue
@@ -200,15 +200,12 @@ watch(model, () => {
 
       <!-- TODO: Add error state (or mitigation) if new label is already in `custom[]` -->
 
-      <Pill
+      <Pill solid no-underline
         v-if="model.custom"
         :key="componentKey"
         v-model="additionalValue"
-        outline
-        raised
-        no-underline
-        :class="$style.pill"
-        style="margin-right: 40px; height:32px;"
+        :key = "componentKey"
+        style="margin-right: 40px; height:32px; flex-grow: 1;"
       />
     </Layout>
   </Layout>
diff --git a/front/src/components/ui/pill.scss b/front/src/components/ui/pill.scss
index be319be7f..423da442c 100644
--- a/front/src/components/ui/pill.scss
+++ b/front/src/components/ui/pill.scss
@@ -23,8 +23,8 @@
       min-width: 28px;
       border-radius: inherit;
       &:focus-visible, &:focus {
-        outline: 2px solid var(--focus-ring-color);
-        outline-offset: 5px;
+        outline: 1px solid var(--focus-ring-color);
+        outline-offset: 2px;
       }
     }