style: refine notification dialog layout and update button classes

src/pages/00_notification/MainPage.vue

@@ -115,7 +115,7 @@ onMounted(async () => {
           flat
           dense
           size="xs"
-          class="app-text-muted-2 q-ml-sm q-mt-xs"
+          class="app-text-muted-2 q-ml-sm"
           @click="async () => await deleteNoti()"
         >
           <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
@@ -127,7 +127,7 @@ onMounted(async () => {
           flat
           dense
           size="xs"
-          class="app-text-muted-2 q-mx-sm q-mt-xs"
+          class="app-text-muted-2 q-mx-sm"
           @click="async () => await markAsRead()"
         >
           <q-tooltip>{{ $t('noti.markAsRead') }}</q-tooltip>

src/pages/00_notification/NotiDialog.vue

@@ -35,8 +35,12 @@ async function fetchNoti() {
     </template>
 
     <section v-if="noti" class="q-pa-md col full-width">
-      <div class="surface-1 rounded bordered q-pa-md full-height full-width">
-        {{ noti.title }}
+      <article
+        class="surface-1 rounded bordered q-pa-md full-height full-width"
+      >
+        <div class="text-bold">
+          {{ noti.title }}
+        </div>
         <div class="text-caption app-text-muted">
           {{
             dateFormatJS({
@@ -50,7 +54,7 @@ async function fetchNoti() {
         <div class="text-caption">
           {{ noti.detail }}
         </div>
-      </div>
+      </article>
     </section>
 
     <template #footer>