fix(ui): responsive mobile fixes for footer, steps, cards, contact form, and docs layout (#125)

Closes #118, closes #121, closes #122, closes #123, closes #124

Author: wazolab

components/AppFooter.vue

@@ -31,7 +31,7 @@ const footerColumns = computed(() => [
   <UFooter :ui="{ top: 'border-b border-t border-default' }">
     <template #top>
       <UContainer>
-        <UFooterColumns :columns="footerColumns" :ui="{ root: 'block!', left: 'hidden!', center: 'grid! grid-cols-3! gap-8' }" />
+        <UFooterColumns :columns="footerColumns" :ui="{ root: 'block!', left: 'hidden!', center: 'grid! grid-cols-1! sm:grid-cols-3! gap-8' }" />
       </UContainer>
     </template>
     <template #left>

components/content/LandingFeature.vue

@@ -6,7 +6,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="rounded-xl border border-zinc-200 bg-zinc-50 p-6">
+  <div class="rounded-xl border border-zinc-200 bg-zinc-50 p-4 sm:p-6">
     <div v-if="icon" class="mb-4 flex size-10 items-center justify-center rounded-lg bg-primary/10">
       <UIcon :name="icon" class="size-5 text-primary" />
     </div>

components/content/LandingProblemCard.vue

@@ -5,7 +5,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="landing-problem-card rounded-xl border-2 border-primary/30 bg-zinc-50 p-6 text-center">
+  <div class="landing-problem-card rounded-xl border-2 border-primary/30 bg-zinc-50 p-4 sm:p-6 text-center">
     <div v-if="icon" class="mb-4 mx-auto flex size-10 items-center justify-center rounded-lg bg-primary/10">
       <UIcon :name="icon" class="size-5 text-primary" />
     </div>

components/content/LandingReference.vue

@@ -6,9 +6,9 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex flex-col rounded-xl border border-zinc-200 bg-white p-6">
+  <div class="flex flex-col rounded-xl border border-zinc-200 bg-white p-4 sm:p-6">
     <div class="mb-3 flex items-center gap-3">
-      <NuxtImg v-if="logo" :src="logo" :alt="title" class="h-16 w-28 shrink-0 object-contain" />
+      <NuxtImg v-if="logo" :src="logo" :alt="title" class="h-12 w-20 sm:h-16 sm:w-28 shrink-0 object-contain" />
       <h3 class="text-base font-semibold">
         {{ title }}
       </h3>

components/content/LandingStep.vue

@@ -23,7 +23,7 @@ defineProps<{
     </div>
 
     <!-- Card -->
-    <div class="flex h-full flex-col items-center rounded-xl border border-zinc-200 bg-white px-6 pb-6 pt-8 text-center shadow-sm">
+    <div class="flex h-full flex-col items-center rounded-xl border border-zinc-200 bg-white px-4 pb-4 sm:px-6 sm:pb-6 pt-8 text-center shadow-sm">
       <h3 class="text-lg font-semibold">
         {{ title }}
       </h3>
@@ -36,7 +36,7 @@ defineProps<{
 
 <style scoped>
 /* Horizontal chevron arrow between steps (desktop) */
-@media (min-width: 640px) {
+@media (min-width: 768px) {
   .landing-step:not(:last-child)::after {
     content: '';
     position: absolute;
@@ -51,7 +51,7 @@ defineProps<{
 }
 
 /* Vertical chevron arrow between steps (mobile) */
-@media (max-width: 639px) {
+@media (max-width: 767px) {
   .landing-step:not(:last-child)::after {
     content: '';
     position: absolute;

components/content/LandingSteps.vue

@@ -10,7 +10,7 @@ defineProps<{
   <section class="py-16 sm:py-24 bg-zinc-50">
     <UContainer>
       <LandingSectionHeader :headline="headline" :title="title" :description="description" />
-      <div class="mt-12 grid gap-y-10 pt-6 sm:grid-cols-3 sm:gap-x-12">
+      <div class="mt-12 grid gap-y-14 pt-6 md:grid-cols-3 md:gap-x-12">
         <MDCSlot :use="$slots.default" />
       </div>
     </UContainer>

components/content/LandingUseCase.vue

@@ -6,7 +6,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="rounded-xl border border-zinc-200 bg-zinc-50 p-6">
+  <div class="rounded-xl border border-zinc-200 bg-zinc-50 p-4 sm:p-6">
     <div class="mb-4 flex items-center gap-3">
       <div v-if="icon" class="flex size-12 shrink-0 items-center justify-center rounded-lg bg-primary/10">
         <UIcon :name="icon" class="size-6 text-primary" />

layouts/docs.vue

@@ -51,7 +51,7 @@ const docsNavigation = computed(() => {
     <AppHeader />
 
     <UContainer class="flex-1">
-      <div class="flex gap-8 py-8">
+      <div class="flex gap-4 py-4 sm:gap-8 sm:py-8">
         <aside class="hidden lg:block w-64 shrink-0">
           <nav class="sticky top-20">
             <UContentNavigation

pages/contact.vue

@@ -36,7 +36,7 @@ function onSubmit() {
 <template>
   <UContainer class="py-16">
     <div class="mx-auto max-w-xl">
-      <h1 class="text-3xl font-bold tracking-tight">
+      <h1 class="text-2xl sm:text-3xl font-bold tracking-tight">
         {{ t('contact.title') }}
       </h1>
       <p class="mt-4 text-muted">
@@ -96,7 +96,7 @@ function onSubmit() {
           />
         </UFormField>
 
-        <UButton type="submit" size="lg">
+        <UButton type="submit" size="lg" class="w-full sm:w-auto">
           {{ t('contact.send') }}
         </UButton>
       </form>