docs: fix homepage ButtonGroup mobile rounded border (#71)

Author: maximepvrt

docs/pages/index.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useScriptsRegistry } from '~/composables/useScriptsRegistry'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
 const registry = useScriptsRegistry()
+const breakpoints = useBreakpoints(breakpointsTailwind)
 
 useSeoMeta({
   title: 'Third-Party Scripts Meets Nuxt DX.',
@@ -91,6 +93,8 @@ const features = [
   },
 ]
 
+const btnGroupOrientation = computed(() => breakpoints.smaller('sm').value ? 'vertical' : 'horizontal')
+
 const benchmarks = {
   googleMaps: {
     logo: registry.find(s => s.import.name === 'useScriptGoogleMaps').logo,
@@ -211,7 +215,7 @@ function timesFaster(nuxt: number, iframe: number) {
       </ul>
     </ULandingSection>
 
-    <div class="py-6 sm:py-20 gap-20 mb-12 flex flex-col xl:flex-row items-center max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <UContainer class="py-6 sm:py-20 gap-20 mb-12 flex flex-col xl:flex-row items-center">
       <div class="max-w-lg">
         <h2 class="text-xl xl:text-4xl font-bold flex items-center gap-4 mb-4">
           <UIcon name="i-ph-speedometer-duotone" class="h-12 w-12 shrink-0 text-primary" />
@@ -226,7 +230,7 @@ function timesFaster(nuxt: number, iframe: number) {
         <p class="text-gray-500 dark:text-gray-400">
           <span class="opacity-50 text-sm">*Benchmarks are from pagespeed.web.dev Mobile report running with variability, they are not accurate.</span>
         </p>
-        <UButtonGroup class="mt-10 flex flex-col sm:flex-row">
+        <UButtonGroup class="mt-10 flex" :orientation="btnGroupOrientation">
           <UButton :variant="webVital === 'fcp' ? 'solid' : 'soft'" :active="webVital === 'fcp'" @click="webVital = 'fcp'">
             First Contentful Paint
           </UButton>
@@ -272,7 +276,7 @@ function timesFaster(nuxt: number, iframe: number) {
           </div>
         </div>
       </div>
-    </div>
+    </UContainer>
   </div>
 </template>