From 5b41520812e3fe94574749c1f71f72efdea7ca9b Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Wed, 16 Oct 2024 23:22:15 +0200
Subject: [PATCH] feat(ui): mobile view

---
 app.vue                           | 4 ++--
 components/body/AppBody.vue       | 2 +-
 components/body/QRCodePreview.vue | 2 +-
 components/header/AppHeader.vue   | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app.vue b/app.vue
index bd40289..4b26e2c 100644
--- a/app.vue
+++ b/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 />
diff --git a/components/body/AppBody.vue b/components/body/AppBody.vue
index a4b04c1..d029963 100644
--- a/components/body/AppBody.vue
+++ b/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 />
diff --git a/components/body/QRCodePreview.vue b/components/body/QRCodePreview.vue
index 6ac1274..532de8d 100644
--- a/components/body/QRCodePreview.vue
+++ b/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>
diff --git a/components/header/AppHeader.vue b/components/header/AppHeader.vue
index e7ff323..b90c7b7 100644
--- a/components/header/AppHeader.vue
+++ b/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">