feat(ui): mobile view

app.vue

@@ -20,11 +20,11 @@ useSeoMeta({
 </script>
 
 <template>
-  <div role="main" class="flex h-[100vh] items-center justify-center">
+  <div role="main" class="flex min-h-[100vh] items-center justify-center">
     <NuxtRouteAnnouncer />
 
     <div
-      class="p-5 w-full max-w-[850px] flex flex-col justify-center space-y-4"
+      class="p-5 w-full max-w-[430px] sm:max-w-[850px] flex flex-col justify-center space-y-4"
     >
       <AppHeader />
       <AppBody />

components/body/AppBody.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-between space-x-8">
+  <div class="flex flex-col sm:flex-row justify-between gap-4">
     <QRCodePreview />
 
     <QRCodeForm />

components/body/QRCodePreview.vue

@@ -5,6 +5,6 @@ const app = useAppStore();
 <template>
   <img
     :src="app.qrCode"
-    class="max-h-[375px] aspect-square border border-gray-100 dark:border-gray-800"
+    class="w-full max-w-[375px] max-h-[375px] sm:max-w-[315px] sm:max-h-[315px] md:max-w-[375px] md:max-h-[375px] m-auto aspect-square border border-gray-100 dark:border-gray-800"
   />
 </template>

components/header/AppHeader.vue

@@ -2,7 +2,7 @@
   <div
     class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
   >
-    <h1 class="text-4xl font-bold">Simple QRCode Generator</h1>
+    <h1 class="text-2xl sm:text-4xl font-bold">Simple QRCode</h1>
 
     <ClientOnly>
       <div class="flex gap-x-1 animate-fadeIn">