fix(style): focus ring around selected pill input

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>

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;
       }
     }