From d428ac3ec57bcfaeadc3fb5aaee1e5f6d4d9523a Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 10 Mar 2025 10:23:43 +0700
Subject: [PATCH] style: adjust notification layout

---
 src/layouts/MainLayout.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index e84c65ff..a83837ee 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -301,6 +301,7 @@ onMounted(async () => {
                 :offset="[0, 10]"
                 anchor="bottom middle"
                 self="top middle"
+                style="max-height: 30vh; width: 300px"
                 @before-hide="
                   () => {
                     state.notiOpen = false;
@@ -327,7 +328,7 @@ onMounted(async () => {
                     @click="setActive(btn)"
                   />
                 </div>
-                <div style="max-height: 30vh; width: 400px; overflow-y: auto">
+                <div style="overflow-y: auto">
                   <section
                     v-if="
                       state.filterUnread
@@ -348,13 +349,14 @@ onMounted(async () => {
                       :key="i"
                     >
                       <q-avatar
+                        v-if="$q.screen.gt.xs"
                         color="positive"
                         style="height: 36px; width: 36px"
                       >
                         <q-icon color="white" name="mdi-check" />
                       </q-avatar>
 
-                      <div class="col-6 column text-caption q-pl-md ellipsis">
+                      <div class="col column text-caption q-pl-md ellipsis">
                         <span
                           class="block ellipsis full-width text-weight-bold"
                         >
@@ -364,7 +366,10 @@ onMounted(async () => {
                           {{ item.detail }}
                         </span>
                       </div>
-                      <span align="right" class="col text-caption text-stone">
+                      <span
+                        align="right"
+                        class="text-caption text-stone q-pl-sm"
+                      >
                         {{ moment(item.createdAt).fromNow() }}
                       </span>
                       <q-tooltip
@@ -373,6 +378,7 @@ onMounted(async () => {
                         :delay="1000"
                         :offset="[10, 10]"
                       >
+                        {{ item.title }}
                         {{ item.detail }}
                       </q-tooltip>
                     </q-item>