From 871277882d0ef58869064a7a6e925be32082755f Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Thu, 18 Dec 2025 22:08:34 -0500
Subject: [PATCH] imporoved readability of LOA reason

---
 ui/src/components/loa/loaList.vue | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/loa/loaList.vue b/ui/src/components/loa/loaList.vue
index b52e6a2..1785564 100644
--- a/ui/src/components/loa/loaList.vue
+++ b/ui/src/components/loa/loaList.vue
@@ -234,18 +234,24 @@ function setPage(pagenum: number) {
                             <TableCell :colspan="8" class="p-0">
                                 <div class="w-full p-3 mb-6 space-y-3">
                                     <div class="flex justify-between items-start gap-4">
-                                        <div class="flex-1">
-                                            <!-- Title -->
-                                            <p class="text-md font-semibold text-foreground">
-                                                Reason
-                                            </p>
+                                        <div class="space-y-3 w-full">
+
+                                            <!-- Header -->
+                                            <div class="flex items-center gap-2">
+                                                <h4 class="text-sm font-semibold text-foreground">
+                                                    Reason
+                                                </h4>
+                                                <Separator class="flex-1" />
+                                            </div>
 
                                             <!-- Content -->
-                                            <p
-                                                class="mt-1 text-md whitespace-pre-wrap leading-relaxed text-muted-foreground">
-                                                {{ post.reason }}
-                                            </p>
+                                            <div
+                                                class="rounded-lg border bg-muted/40 px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground w-full">
+                                                {{ post.reason || 'No reason provided.' }}
+                                            </div>
+
                                         </div>
+
                                     </div>
                                 </div>
                             </TableCell>