Focus-visible handling on tag pills

Author: webstackdev

src/components/Layout/Markdown/Tags/index.astro

@@ -62,7 +62,7 @@ const resolveTagMeta = (rawTag: string) => {
               "inline-block rounded-full transition-colors px-3 py-1 ml-2",
               "uppercase text-content-inverse text-xs no-underline",
               "bg-warning-offset hover:bg-warning",
-              "focus-visible:px-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-spotlight",
+              "relative focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight",
             ]}
           >
             {label}