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,8 +75,8 @@ watch(checked, (newIsDark) => {
 </script>
 
 <template>
-  <label title="toggle dark mode">
   <VPSwitch
+    title="toggle dark mode"
     class="VPSwitchAppearance"
     :aria-checked="checked"
     @click="toggle"
@@ -84,7 +84,6 @@ watch(checked, (newIsDark) => {
     <VPIconSun class="sun" />
     <VPIconMoon class="moon" />
   </VPSwitch>
-  </label>
 </template>
 
 <style scoped>