From 54b1f8c7f89c441b43dc187f4a9c3cceafb9c07b Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 17 Jul 2026 19:14:03 +0700
Subject: [PATCH] feat: enhance order display by improving card overflow
 handling and text wrapping

---
 .../js/pages/admin/manage/orders/Show.vue     | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/resources/js/pages/admin/manage/orders/Show.vue b/resources/js/pages/admin/manage/orders/Show.vue
index ee11b21..99b4bcc 100644
--- a/resources/js/pages/admin/manage/orders/Show.vue
+++ b/resources/js/pages/admin/manage/orders/Show.vue
@@ -196,9 +196,9 @@ const feeEntries = computed(() => {
 
         <div class="grid gap-6 lg:grid-cols-3">
             <!-- Main content -->
-            <div class="space-y-6 lg:col-span-2">
+            <div class="min-w-0 space-y-6 lg:col-span-2">
                 <!-- Order Info -->
-                <Card>
+                <Card class="overflow-hidden">
                     <CardHeader>
                         <CardTitle class="flex items-center gap-2">
                             <Package class="size-5" />
@@ -260,13 +260,13 @@ const feeEntries = computed(() => {
 
                         <div v-if="order.notes" class="mt-4 rounded-md border border-dashed p-3">
                             <p class="text-muted-foreground mb-1 text-sm">Catatan</p>
-                            <p class="text-sm">{{ order.notes }}</p>
+                            <p class="break-words text-sm">{{ order.notes }}</p>
                         </div>
                     </CardContent>
                 </Card>
 
                 <!-- Order Items -->
-                <Card>
+                <Card class="overflow-hidden">
                     <CardHeader>
                         <CardTitle class="flex items-center gap-2">
                             <Package class="size-5" />
@@ -297,10 +297,10 @@ const feeEntries = computed(() => {
                                         <TableCell class="text-muted-foreground tabular-nums">
                                             {{ index + 1 }}
                                         </TableCell>
-                                        <TableCell class="font-medium">
+                                        <TableCell class="max-w-[200px] truncate font-medium">
                                             {{ item.product_name || item.product_variant?.product?.name }}
                                         </TableCell>
-                                        <TableCell>
+                                        <TableCell class="max-w-[160px] truncate">
                                             {{ item.variant_name || item.product_variant?.name }}
                                         </TableCell>
                                         <TableCell>
@@ -325,7 +325,7 @@ const feeEntries = computed(() => {
                 </Card>
 
                 <!-- Fee & Profit Breakdown -->
-                <Card>
+                <Card class="overflow-hidden">
                     <CardHeader>
                         <CardTitle class="flex items-center gap-2">
                             <Receipt class="size-5" />
@@ -392,9 +392,9 @@ const feeEntries = computed(() => {
             </div>
 
             <!-- Sidebar -->
-            <div class="space-y-6">
+            <div class="min-w-0 space-y-6">
                 <!-- Customer Info -->
-                <Card>
+                <Card class="overflow-hidden">
                     <CardHeader>
                         <CardTitle class="flex items-center gap-2">
                             <User class="size-5" />
@@ -405,7 +405,7 @@ const feeEntries = computed(() => {
                         <div v-if="order.customer" class="space-y-3">
                             <div>
                                 <p class="text-muted-foreground text-sm">Nama</p>
-                                <p class="font-medium">{{ order.customer.name }}</p>
+                                <p class="break-words font-medium">{{ order.customer.name }}</p>
                             </div>
                             <div v-if="order.customer.phone_number" class="flex items-start gap-2">
                                 <Phone class="text-muted-foreground mt-0.5 size-4 shrink-0" />
@@ -418,7 +418,7 @@ const feeEntries = computed(() => {
                                 <MapPin class="text-muted-foreground mt-0.5 size-4 shrink-0" />
                                 <div>
                                     <p class="text-muted-foreground text-sm">Alamat</p>
-                                    <p class="font-medium whitespace-pre-line">{{ order.customer.address }}</p>
+                                    <p class="break-words font-medium whitespace-pre-line">{{ order.customer.address }}</p>
                                 </div>
                             </div>
                         </div>
@@ -429,7 +429,7 @@ const feeEntries = computed(() => {
                 </Card>
 
                 <!-- Financial Summary -->
-                <Card>
+                <Card class="overflow-hidden">
                     <CardHeader>
                         <CardTitle class="flex items-center gap-2">
                             <CreditCard class="size-5" />
@@ -456,7 +456,7 @@ const feeEntries = computed(() => {
 
                         <div v-if="order.cash_transaction" class="mt-4 rounded-md bg-muted/50 p-3">
                             <p class="text-muted-foreground mb-1 text-xs">Transaksi Kas</p>
-                            <p class="text-sm font-medium">{{ order.cash_transaction.description }}</p>
+                            <p class="break-words text-sm font-medium">{{ order.cash_transaction.description }}</p>
                             <p class="text-muted-foreground text-xs">
                                 {{ order.cash_transaction.created_at }}
                             </p>
@@ -465,7 +465,7 @@ const feeEntries = computed(() => {
                 </Card>
 
                 <!-- Bukti Transaksi -->
-                <Card v-if="order.photos">
+                <Card v-if="order.photos" class="overflow-hidden">
                     <CardHeader>
                         <CardTitle class="flex items-center gap-2">
                             <Receipt class="size-5" />