diff --git a/src/layouts/components/AppSetting/index.vue b/src/layouts/components/AppSetting/index.vue
index dc4f6001..af0c8c86 100755
--- a/src/layouts/components/AppSetting/index.vue
+++ b/src/layouts/components/AppSetting/index.vue
@@ -300,7 +300,7 @@ function handleCopy() {
 
 <style lang="scss" scoped>
 .divider {
-  --at-apply: flex items-center justify-between gap-4 my-4 text-nowrap text-sm font-500;
+  --at-apply: flex items-center justify-between gap-4 my-4 whitespace-nowrap text-sm font-500;
 
   &::before,
   &::after {
diff --git a/src/layouts/ui-kit/HTabList.vue b/src/layouts/ui-kit/HTabList.vue
index 2b12ac55..8c491b0e 100644
--- a/src/layouts/ui-kit/HTabList.vue
+++ b/src/layouts/ui-kit/HTabList.vue
@@ -37,7 +37,7 @@ function handleChange(index: number) {
     <TabList class="inline-flex items-center justify-center p-1 rounded-md bg-stone-1 dark:bg-stone-9 ring-1 ring-stone-2 dark:ring-stone-8 select-none">
       <Tab v-for="(option, index) in options" :key="index" v-slot="{ selected }" as="template">
         <button
-          class="w-full px-2 py-1.5 border-size-0 text-sm rounded-md truncate text-dark dark:text-white bg-inherit focus:outline-none ring-inset ring-stone-2 dark:ring-stone-8 focus:ring-2" :class="{
+          class="inline-flex w-full px-2 py-1.5 border-size-0 text-sm rounded-md truncate text-dark dark:text-white bg-inherit focus:outline-none ring-inset ring-stone-2 dark:ring-stone-8 focus:ring-2" :class="{
             'cursor-default bg-white dark:bg-dark-9': selected,
             'cursor-pointer opacity-50 transition hover:(opacity-100)': !selected,
           }"