imporoved readability of LOA reason

ui/src/components/loa/loaList.vue

@@ -84,7 +84,7 @@ function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Overdue" | "Closed
 
     if (now < start) return "Upcoming";
     if (now >= start && now <= end) return "Active";
-    if (now > end) return "Overdue";
+    if (now > loa.extended_till || end) return "Overdue";
 
     return "Overdue"; // fallback
 }
@@ -197,7 +197,7 @@ function setPage(pagenum: number) {
                             <TableCell @click.stop="" class="text-right">
                                 <DropdownMenu>
                                     <DropdownMenuTrigger class="cursor-pointer">
-                                        <Button variant="ghost">
+                                        <Button variant="ghost" size="icon">
                                             <Ellipsis class="size-6"></Ellipsis>
                                         </Button>
                                     </DropdownMenuTrigger>
@@ -220,10 +220,11 @@ function setPage(pagenum: number) {
                                 </DropdownMenu>
                             </TableCell>
                             <TableCell>
-                                <Button v-if="expanded === post.id" @click.stop="expanded = null" variant="ghost">
+                                <Button v-if="expanded === post.id" @click.stop="expanded = null" size="icon"
+                                    variant="ghost">
                                     <ChevronUp class="size-6" />
                                 </Button>
-                                <Button v-else @click.stop="expanded = post.id" variant="ghost">
+                                <Button v-else @click.stop="expanded = post.id" size="icon" variant="ghost">
                                     <ChevronDown class="size-6" />
                                 </Button>
                             </TableCell>
@@ -233,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">
+                                        <div class="space-y-3 w-full">
+
+                                            <!-- Header -->
+                                            <div class="flex items-center gap-2">
+                                                <h4 class="text-sm font-semibold text-foreground">
                                                     Reason
-                                            </p>
+                                                </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>