fix: mobile layout shifts

layouts/default.vue

@@ -25,7 +25,6 @@ colorModePreference.set('system');
 const { theme } = tailwindConfig;
 
 // TODO finalize theme
-// TODO somehow disable "mobile theme"
 const themeConfig: ThemeConfig = {
   shared: {
     common: {
@@ -47,5 +46,58 @@ const themeConfig: ThemeConfig = {
       primaryColorPressed: theme.colors.primary.action.dark,
     },
   },
+  // We don't want to have a mobile "theme" at all,
+  // since all it really does is introduce layout shift after loading the page
+  // might solve this with a feature later as mentioned here https://github.com/becem-gharbi/nuxt-naiveui/issues/21
+  mobile: {
+    common: {
+      fontSize: '14px',
+      heightMedium: '34px',
+      fontSizeMedium: '14px',
+    },
+    Form: {
+      labelFontSizeTopMedium: '14px',
+    },
+    Input: {
+      heightMedium: '34px',
+      fontSizeMedium: '14px',
+    },
+    Button: {
+      heightMedium: '34px',
+      fontSizeMedium: '14px',
+    },
+    Card: {
+      fontSizeMedium: '14px',
+    },
+    Avatar: {
+      heightMedium: '34px',
+      fontSize: '14px',
+    },
+    ColorPicker: {
+      heightMedium: '34px',
+      fontSizeMedium: '14px',
+    },
+    Dropdown: {
+      optionHeightMedium: '34px',
+      fontSizeMedium: '14px',
+    },
+    Radio: {
+      buttonHeightMedium: '34px',
+      fontSizeMedium: '14px',
+    },
+    Skeleton: {
+      heightMedium: '34px',
+    },
+    Tag: {
+      heightMedium: '34px',
+      fontSizeMedium: '14px',
+    },
+    Result: {
+      fontSizeMedium: '14px',
+    },
+    Tabs: {
+      tabFontSizeMedium: '14px',
+    },
+  },
 };
 </script>