Merge pull request #68 from LabSyncro/feat/auth-with-hmi

chore(UI): responsive UI

Author: ngyngcphu

layouts/qr.vue

@@ -11,7 +11,7 @@
       ></div>
     </div>
 
-    <div class="relative z-10 w-full">
+    <div class="relative z-10 w-full h-screen md:h-auto">
       <div class="container mx-auto max-w-lg mb-6">
         <div class="flex items-center justify-center gap-2 text-primary-darker">
           <div class="h-8 w-8">

pages/qr.vue

@@ -116,7 +116,7 @@ function shareQR() {
 </script>
 
 <template>
-  <div class="container mx-auto md:max-w-xl">
+  <div class="md:container mx-auto md:max-w-xl">
     <Card class="w-full overflow-hidden backdrop-blur-sm bg-white/90 shadow-lg">
       <CardHeader class="pb-0">
         <div class="flex items-center justify-center gap-2">
@@ -138,7 +138,7 @@ function shareQR() {
           >
             <div
               :key="qrDataUrl"
-              class="relative flex items-center justify-center bg-gradient-to-br from-primary/5 to-primary-lighter/20 rounded-lg p-4 border border-primary/20 w-[500px] h-[500px]"
+              class="relative flex items-center justify-center bg-gradient-to-br from-primary/5 to-primary-lighter/20 rounded-lg p-4 border border-primary/20 w-[300px] h-[300px] md:w-[500px] md:h-[500px]"
             >
               <div
                 v-if="isLoading"