From ec5b2f7b64a9489fcc4c0d025a08991a75881a83 Mon Sep 17 00:00:00 2001
From: Sebastian Di Luzio <sebidiluzio@gmail.com>
Date: Mon, 11 Sep 2023 21:07:00 +0200
Subject: [PATCH] fix: mobile layout shifts

---
 layouts/default.vue | 54 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 53 insertions(+), 1 deletion(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index c1e6dda5..48184fad 100644
--- a/layouts/default.vue
+++ b/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>