fix(a11y): mobile and theme switcher (#2354)

src/client/theme-default/components/VPNavBar.vue

@@ -175,6 +175,12 @@ const classes = computed(() => ({
   }
 }
 
+@media (max-width: 768px) {
+  .content-body {
+    column-gap: 0.5rem;
+  }
+}
+
 .menu + .translations::before,
 .menu + .appearance::before,
 .menu + .social-links::before,

src/client/theme-default/components/VPNavBarSearchButton.vue

@@ -61,7 +61,7 @@ defineProps<{
   align-items: center;
   margin: 0;
   padding: 0;
-  width: 32px;
+  width: 48px;
   height: 55px;
   background: transparent;
   transition: border-color 0.25s;

src/client/theme-default/components/VPSwitchAppearance.vue

@@ -75,16 +75,15 @@ watch(checked, (newIsDark) => {
 </script>
 
 <template>
-  <label title="toggle dark mode">
+  <VPSwitch
-    <VPSwitch
+    title="toggle dark mode"
-      class="VPSwitchAppearance"
+    class="VPSwitchAppearance"
-      :aria-checked="checked"
+    :aria-checked="checked"
-      @click="toggle"
+    @click="toggle"
-    >
+  >
-      <VPIconSun class="sun" />
+    <VPIconSun class="sun" />
-      <VPIconMoon class="moon" />
+    <VPIconMoon class="moon" />
-    </VPSwitch>
+  </VPSwitch>
-  </label>
 </template>
 
 <style scoped>