From 203dd33d1fb9bfd0babc73390364201882c1476b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 17 Dec 2024 13:34:25 +0700
Subject: [PATCH] fix

---
 src/views/home.vue | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/views/home.vue b/src/views/home.vue
index e8b4051..7dd2762 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -160,31 +160,33 @@ const cards = ref<any[]>([
   </div>
 
   <div class="row justify-center">
-    <div class="col-9">
+    <div class="col-9 q-pa-xl">
       <q-toolbar style="padding: 0px">
-        <div class="row items-center q-px-md q-py-sm">
+        <div class="row items-center q-py-sm">
           <q-img
             src="https://bma-sso.frappet.synology.me/images/sso.png"
             style="width: 80px"
           />
-          <div class="text-white q-ml-md">
+          <div class="text-white q-ml-md" v-if="$q.screen.md">
             <div class="text-grey-5 text-caption">
               Bangkok Metropolitan Administration
             </div>
-            <div class="text-bold">Single Sign-On</div>
+            <div class="text-bold text-left">Single Sign-On</div>
           </div>
         </div>
         <q-space />
-        <div class="row items-center">
-          <div class="text-white q-mr-md">{{ fullname }}</div>
-          <q-btn @click="logout()" class="btn_logout">
-            ออกจากระบบ <i class="mdi mdi-logout"></i>
-          </q-btn>
+        <div class="row items-center q-col-gutter-md">
+          <div class="text-white">{{ fullname }}</div>
+          <div>
+            <q-btn @click="logout()" class="btn_logout">
+              ออกจากระบบ <i class="mdi mdi-logout"></i>
+            </q-btn>
+          </div>
         </div>
       </q-toolbar>
 
       <!-- Title Section -->
-      <div class="text-white text-center q-mt-lg">
+      <div class="text-white text-center" style="margin-top: 30px">
         <div class="text-h5 text-bold">
           ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
         </div>
@@ -200,7 +202,9 @@ const cards = ref<any[]>([
             <q-card
               bordered
               class="my-card"
-              :class="index % 2 === 0 ? 'my-card' : 'my-card card-right'"
+              :class="
+                $q.screen.gt.md ? (index % 2 === 0 ? '' : 'card-right') : ''
+              "
             >
               <q-img :src="card.img" />
 
@@ -301,12 +305,11 @@ const cards = ref<any[]>([
   background-color: rgba(255, 255, 255, 0.2);
   cursor: pointer;
   border: 0;
-  padding: 8px 10px 8px 10px;
+
   border-radius: 50px;
   color: #fff;
   font-size: 16px;
   font-weight: 400;
-  width: 250px;
 }
 .btn_logout:hover {
   color: #fff;