feat: font size picker

components/smart/ChangeLanguage.vue

@@ -1,35 +1,36 @@
 <template>
   <span class="inline-flex">
-    <tippy
-      ref="language"
-      interactive
-      tabindex="-1"
-      trigger="click"
-      theme="popover"
-      arrow
-      :animate-fill="false"
-    >
-      <template #trigger>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('choose_language')"
-          class="font-medium focus:outline-none"
-          outline
-          :label="`${
-            $i18n.locales.find(({ code }) => code == $i18n.locale).name
-          }`"
-        />
-      </template>
-      <nuxt-link
-        v-for="(locale, index) in $i18n.locales.filter(
-          ({ code }) => code !== $i18n.locale
-        )"
-        :key="`locale-${index}`"
-        :to="switchLocalePath(locale.code)"
-        @click="$refs.language.tippy().hide()"
+    <span class="select-wrapper">
+      <tippy
+        ref="language"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
       >
-        <SmartItem :label="locale.name" />
-      </nuxt-link>
-    </tippy>
+        <template #trigger>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('settings.choose_language')"
+            class="pr-8"
+            outline
+            :label="`${
+              $i18n.locales.find(({ code }) => code == $i18n.locale).name
+            }`"
+          />
+        </template>
+        <nuxt-link
+          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" />
+        </nuxt-link>
+      </tippy>
+    </span>
   </span>
 </template>