refactor: remove absolute classes

components/smart/Anchor.vue

@@ -6,8 +6,8 @@
     class="inline-flex items-center justify-center focus:outline-none"
     :class="[
       color
-        ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
-        : 'hover:text-secondaryDark focus:text-secondaryDark',
+        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
+        : 'hover:text-secondaryDark focus-visible:text-secondaryDark',
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
     ]"

components/smart/ChangeLanguage.vue

@@ -1,8 +1,8 @@
 <template>
   <span class="inline-flex">
-    <span class="select-wrapper">
-      <tippy ref="language" interactive trigger="click" theme="popover" arrow>
-        <template #trigger>
+    <tippy ref="language" interactive trigger="click" theme="popover" arrow>
+      <template #trigger>
+        <span class="select-wrapper">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('settings.choose_language')"
@@ -13,18 +13,18 @@
               $i18n.locales.find(({ code }) => code == $i18n.locale).name
             }`"
           />
-        </template>
-        <NuxtLink
-          v-for="(locale, index) in $i18n.locales.filter(
-            ({ code }) => code !== $i18n.locale
-          )"
-          :key="`locale-${index}`"
-          :to="switchLocalePath(locale.code)"
-          @click="$refs.language.tippy().hide()"
-        >
-          <SmartItem :label="locale.name" />
-        </NuxtLink>
-      </tippy>
-    </span>
+        </span>
+      </template>
+      <NuxtLink
+        v-for="(locale, index) in $i18n.locales.filter(
+          ({ code }) => code !== $i18n.locale
+        )"
+        :key="`locale-${index}`"
+        :to="switchLocalePath(locale.code)"
+        @click="$refs.language.tippy().hide()"
+      >
+        <SmartItem :label="locale.name" />
+      </NuxtLink>
+    </tippy>
   </span>
 </template>

components/smart/EnvInput.vue

@@ -496,6 +496,8 @@ export default defineComponent({
   @apply overflow-x-auto;
   @apply overflow-y-hidden;
   @apply resize-none;
+  @apply focus:outline-none;
+  @apply transition;
 }
 
 .env-input::-webkit-scrollbar {

components/smart/FontSizePicker.vue

@@ -1,8 +1,8 @@
 <template>
   <span class="inline-flex">
-    <span class="select-wrapper">
-      <tippy ref="fontSize" interactive trigger="click" theme="popover" arrow>
-        <template #trigger>
+    <tippy ref="fontSize" interactive trigger="click" theme="popover" arrow>
+      <template #trigger>
+        <span class="select-wrapper">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('settings.change_font_size')"
@@ -11,20 +11,20 @@
             outline
             :label="getFontSizeName(fontSizes.find((size) => size == active))"
           />
-        </template>
-        <SmartItem
-          v-for="(size, index) in fontSizes"
-          :key="`size-${index}`"
-          :label="getFontSizeName(size)"
-          :info-icon="size === active ? 'done' : ''"
-          :active-info-icon="size === active"
-          @click.native="
-            setActiveFont(size)
-            $refs.fontSize.tippy().hide()
-          "
-        />
-      </tippy>
-    </span>
+        </span>
+      </template>
+      <SmartItem
+        v-for="(size, index) in fontSizes"
+        :key="`size-${index}`"
+        :label="getFontSizeName(size)"
+        :info-icon="size === active ? 'done' : ''"
+        :active-info-icon="size === active"
+        @click.native="
+          setActiveFont(size)
+          $refs.fontSize.tippy().hide()
+        "
+      />
+    </tippy>
   </span>
 </template>
 

components/smart/Item.vue

@@ -6,16 +6,14 @@
     class="
       rounded
       font-medium
+      flex-shrink-0
       py-2
       px-4
-      transition
       inline-flex
       items-center
-      hover:(bg-primaryDark
-      text-secondaryDark)
-      focus:(bg-primaryDark
-      outline-none
-      text-secondaryDark)
+      hover:bg-primaryDark hover:text-secondaryDark
+      focus:outline-none
+      focus-visible:bg-primaryDark focus-visible:text-secondaryDark
     "
     :class="[
       { 'opacity-75 cursor-not-allowed': disabled },
@@ -23,7 +21,7 @@
       { 'flex-1': label },
       { 'flex-row-reverse justify-end': reverse },
       {
-        'border border-divider hover:border-dividerDark focus:border-dividerDark':
+        'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
           outline,
       },
     ]"

components/smart/Tabs.vue

@@ -84,9 +84,9 @@ export default {
     @apply text-secondary;
     @apply font-semibold;
     @apply cursor-pointer;
-    @apply transition;
     @apply hover:text-secondaryDark;
-    @apply focus:(text-secondaryDark outline-none);
+    @apply focus:outline-none;
+    @apply focus-visible:text-secondaryDark;
 
     .tab-info {
       @apply inline-flex;