fix(ui): make docs surround nav more compact on mobile and revert submit button width

- Add responsive padding and gap to UContentSurround for mobile
- Add top margin to separate surround from content
- Revert full-width submit button on contact form (bad UX)

Author: wazolab

pages/[...slug].vue

@@ -103,7 +103,15 @@ definePageMeta({
       </ContentRenderer>
     </div>
 
-    <UContentSurround v-if="isDocsPage && surround" :surround="surround" />
+    <UContentSurround
+      v-if="isDocsPage && surround"
+      :surround="surround"
+      :ui="{
+        root: 'grid grid-cols-2 gap-4 sm:gap-8 mt-8 sm:mt-12',
+        link: 'px-4 py-4 sm:px-6 sm:py-8',
+        linkLeading: 'mb-2 sm:mb-4',
+      }"
+    />
 
     <template v-if="isDocsPage && page?.body?.toc?.links?.length" #toc>
       <UContentToc :links="page.body.toc.links" :title="t('docs.toc')" highlight />

pages/contact.vue

@@ -96,7 +96,7 @@ function onSubmit() {
           />
         </UFormField>
 
-        <UButton type="submit" size="lg" class="w-full sm:w-auto">
+        <UButton type="submit" size="lg">
           {{ t('contact.send') }}
         </UButton>
       </form>