From 014682ab566bf1f7b7625fe21f5d994cb3c3474d Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 31 Jul 2026 16:34:13 +0700
Subject: [PATCH] feat: enhance layout responsiveness by adding min-w-0 and
 overflow-x-auto classes

---
 resources/js/pages/admin/manage/cuttings/Share.vue |  4 ++--
 .../cuttings/form/CuttingPosCartDetailDialog.vue   |  2 +-
 .../cuttings/form/CuttingPosCombinationDialog.vue  | 14 +++++++-------
 .../admin/manage/cuttings/form/CuttingPosForm.vue  |  2 +-
 .../form/CuttingPosMaterialCatalogPanel.vue        |  4 ++--
 .../form/CuttingPosMaterialSummaryItems.vue        | 12 ++++++------
 .../cuttings/form/CuttingPosResultSummaryItems.vue |  4 ++--
 .../cuttings/form/CuttingPosSummaryPanel.vue       |  4 ++--
 .../manage/cuttings/table/CuttingGroupedTable.vue  |  4 ++--
 9 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/resources/js/pages/admin/manage/cuttings/Share.vue b/resources/js/pages/admin/manage/cuttings/Share.vue
index 86767d1..29bf3f5 100644
--- a/resources/js/pages/admin/manage/cuttings/Share.vue
+++ b/resources/js/pages/admin/manage/cuttings/Share.vue
@@ -132,7 +132,7 @@ const groupedMaterials = computed<GroupedMaterials[]>(() => {
                 <!-- Results Section -->
                 <div v-if="cutting.results.length" class="border-b p-6">
                     <h3 class="mb-3 text-sm font-semibold">Hasil Produk</h3>
-                    <div class="overflow-hidden rounded-md border">
+                    <div class="overflow-x-auto rounded-md border">
                         <Table>
                             <TableHeader>
                                 <TableRow>
@@ -181,7 +181,7 @@ const groupedMaterials = computed<GroupedMaterials[]>(() => {
                 <!-- Materials Section -->
                 <div v-if="cutting.materials.length" class="border-b p-6">
                     <h3 class="mb-3 text-sm font-semibold">Bahan Baku</h3>
-                    <div class="overflow-hidden rounded-md border">
+                    <div class="overflow-x-auto rounded-md border">
                         <Table>
                             <TableHeader>
                                 <TableRow>
diff --git a/resources/js/pages/admin/manage/cuttings/form/CuttingPosCartDetailDialog.vue b/resources/js/pages/admin/manage/cuttings/form/CuttingPosCartDetailDialog.vue
index 31363b6..0d4c3e5 100644
--- a/resources/js/pages/admin/manage/cuttings/form/CuttingPosCartDetailDialog.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/CuttingPosCartDetailDialog.vue
@@ -34,7 +34,7 @@ const open = defineModel<boolean>('open', { required: true });
 
 <template>
     <Dialog v-model:open="open">
-        <DialogContent class="sm:max-w-lg min-w-0 max-h-[90dvh] flex flex-col">
+        <DialogContent class="min-w-0 sm:max-w-lg max-h-[90dvh] flex flex-col">
             <DialogHeader>
                 <DialogTitle>Detail Keranjang</DialogTitle>
             </DialogHeader>
diff --git a/resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue b/resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue
index 22f7a56..9f06523 100644
--- a/resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue
@@ -206,18 +206,18 @@ watch(open, (value) => {
 
 <template>
     <Dialog v-model:open="open">
-        <DialogContent class="flex max-h-[90vh] flex-col sm:max-w-4xl">
+        <DialogContent class="flex max-h-[90vh] min-w-0 flex-col sm:max-w-4xl">
             <DialogHeader>
                 <DialogTitle>Kombinasi Bahan Baku</DialogTitle>
             </DialogHeader>
 
-            <div class="scrollbar-thin flex-1 overflow-y-auto pr-1">
+            <div class="scrollbar-thin flex-1 overflow-y-auto overscroll-y-contain pr-1">
                 <div class="space-y-4">
-                    <div v-if="selectedMaterials.length > 0" class="rounded-lg border p-3 space-y-2">
+                    <div v-if="selectedMaterials.length > 0" class="min-w-0 rounded-lg border p-3 space-y-2">
                         <p class="text-sm font-medium">Bahan Baku Terpilih ({{ selectedMaterials.length }})</p>
                         <div class="space-y-2">
                             <div v-for="item in selectedMaterials" :key="item.raw_material_price_id"
-                                class="flex flex-col gap-2 rounded-md border p-2 sm:flex-row sm:items-center"
+                                class="flex min-w-0 flex-col gap-2 rounded-md border p-2 sm:flex-row sm:items-center"
                                 :class="item.is_initial ? 'border-primary bg-primary/5' : ''">
                                 <div class="flex items-center gap-2 flex-1 min-w-0">
                                     <PosCatalogVariantThumb :items="item.images" :title="`${item.raw_material_name} - ${item.variant}`" />
@@ -275,7 +275,7 @@ watch(open, (value) => {
 
                     <div v-else class="space-y-3">
                         <div v-for="rawMaterial in filteredRawMaterials" :key="rawMaterial.id"
-                            class="rounded-lg border p-3">
+                            class="min-w-0 rounded-lg border p-3">
                             <div class="mb-2 flex items-center gap-2">
                                 <p class="text-sm font-medium">{{ rawMaterial.name }}</p>
                                 <Badge variant="outline" class="text-xs">
@@ -285,7 +285,7 @@ watch(open, (value) => {
 
                             <div class="space-y-1">
                                 <div v-for="price in rawMaterial.prices" :key="price.id"
-                                    class="flex items-center gap-2.5 rounded-md px-2 py-1.5 transition-all duration-200"
+                                    class="flex min-w-0 items-center gap-2.5 rounded-md px-2 py-1.5 transition-all duration-200"
                                     :class="[
                                         isSelected(price.id) ? 'border-2 border-primary bg-primary/5' : 'cursor-pointer hover:bg-muted/30',
                                     ]" @click="!isSelected(price.id) && toggleVariant(rawMaterial, price)">
@@ -310,7 +310,7 @@ watch(open, (value) => {
                 </div>
             </div>
 
-            <div class="flex flex-col gap-3 border-t pt-4 sm:flex-row sm:items-center sm:justify-between">
+            <div class="flex min-w-0 flex-col gap-3 border-t pt-4 sm:flex-row sm:items-center sm:justify-between">
                 <div class="flex flex-wrap items-center gap-3">
                     <div class="flex items-center gap-2">
                         <Label class="text-sm whitespace-nowrap">Hasil:</Label>
diff --git a/resources/js/pages/admin/manage/cuttings/form/CuttingPosForm.vue b/resources/js/pages/admin/manage/cuttings/form/CuttingPosForm.vue
index 1f0333a..e375aeb 100644
--- a/resources/js/pages/admin/manage/cuttings/form/CuttingPosForm.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/CuttingPosForm.vue
@@ -285,7 +285,7 @@ function onCombinationCreated(items: CuttingMaterialCartItem[]) {
 </script>
 
 <template>
-    <div class="grid min-w-0 gap-4 xl:grid-cols-[1fr_400px]">
+    <div class="grid min-w-0 gap-4 overflow-hidden xl:grid-cols-[1fr_400px]">
         <div class="min-w-0 space-y-4 order-last xl:order-first">
             <CuttingPosMaterialCatalogPanel v-model:material-search="materialSearch"
                 v-model:selected-raw-material-id="selectedRawMaterialId"
diff --git a/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialCatalogPanel.vue b/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialCatalogPanel.vue
index 2f91d12..36c9735 100644
--- a/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialCatalogPanel.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialCatalogPanel.vue
@@ -102,11 +102,11 @@ function openCombination(rawMaterial: CuttingRawMaterialCatalogItem, price: Cutt
 </script>
 
 <template>
-    <Card class="min-w-0">
+    <Card class="min-w-0 overflow-hidden">
         <CardHeader class="flex flex-row items-center justify-between pb-3 space-y-0">
             <CardTitle class="text-base">Pilih Bahan Baku</CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent class="min-w-0">
             <div class="space-y-4">
                 <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
                     <div class="relative flex-1">
diff --git a/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialSummaryItems.vue b/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialSummaryItems.vue
index b5acb67..82f771a 100644
--- a/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialSummaryItems.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialSummaryItems.vue
@@ -98,10 +98,10 @@ function setCombinationResult(combinationId: number | undefined, value: string)
             Belum ada bahan baku dipilih.
         </div>
 
-        <div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overflow-x-hidden overscroll-y-contain">
+        <div v-else class="scrollbar-thin max-h-80 min-w-0 space-y-3 overflow-y-auto overscroll-y-contain">
             <template v-for="group in materialGroups" :key="group.combinationId ?? `single-${group.items[0]?.index}`">
                 <div v-if="group.type === 'combination'"
-                    class="rounded-lg border-2 border-dashed border-primary/30 p-3">
+                    class="min-w-0 rounded-lg border-2 border-dashed border-primary/30 p-3">
                     <div class="mb-2 flex items-center justify-between">
                         <div class="flex items-center gap-2">
                             <Layers class="size-4 text-primary" />
@@ -128,9 +128,9 @@ function setCombinationResult(combinationId: number | undefined, value: string)
                         </div>
                     </div>
 
-                    <div class="space-y-2">
+                    <div class="min-w-0 space-y-2">
                         <div v-for="{ item, index } in group.items" :key="item.raw_material_price_id"
-                            class="rounded-md border bg-background p-2.5">
+                            class="min-w-0 rounded-md border bg-background p-2.5">
                             <div class="mb-1.5 flex items-start justify-between gap-2">
                                 <div class="min-w-0 flex-1">
                                     <div class="flex items-center gap-2">
@@ -173,7 +173,7 @@ function setCombinationResult(combinationId: number | undefined, value: string)
                 </div>
 
                 <div v-else v-for="{ item, index } in group.items" :key="item.raw_material_price_id"
-                    class="rounded-lg border p-3">
+                    class="min-w-0 rounded-lg border p-3">
                     <div class="mb-2 flex items-start justify-between gap-2">
                         <div class="min-w-0 flex-1">
                             <div class="flex items-center gap-2">
@@ -200,7 +200,7 @@ function setCombinationResult(combinationId: number | undefined, value: string)
                         </Button>
                     </div>
 
-                    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                    <div class="grid min-w-0 grid-cols-1 gap-2 sm:grid-cols-2">
                         <Field
                             :data-invalid="formErrors(form, `materials.${index}.material_usage`).length > 0 ? 'true' : undefined">
                             <FieldLabel class="text-xs">
diff --git a/resources/js/pages/admin/manage/cuttings/form/CuttingPosResultSummaryItems.vue b/resources/js/pages/admin/manage/cuttings/form/CuttingPosResultSummaryItems.vue
index 21e8640..59d0a28 100644
--- a/resources/js/pages/admin/manage/cuttings/form/CuttingPosResultSummaryItems.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/CuttingPosResultSummaryItems.vue
@@ -30,13 +30,13 @@ defineProps<{
             Belum ada produk hasil.
         </div>
 
-        <div v-for="(item, index) in resultCart" :key="index" class="rounded-lg border p-3">
+        <div v-for="(item, index) in resultCart" :key="index" class="min-w-0 rounded-lg border p-3">
             <Field>
                 <FieldLabel class="text-xs">Nama Produk</FieldLabel>
                 <Input v-model="item.product_name" type="text" placeholder="Masukkan nama produk" />
             </Field>
 
-            <div class="grid grid-cols-1 gap-2 mt-2 sm:grid-cols-3">
+            <div class="grid min-w-0 grid-cols-1 gap-2 mt-2 sm:grid-cols-3">
                 <Field>
                     <FieldLabel class="text-xs">Sample</FieldLabel>
                     <NumberInput v-model="item.sample" class="h-8" />
diff --git a/resources/js/pages/admin/manage/cuttings/form/CuttingPosSummaryPanel.vue b/resources/js/pages/admin/manage/cuttings/form/CuttingPosSummaryPanel.vue
index 9818fa9..5da3c28 100644
--- a/resources/js/pages/admin/manage/cuttings/form/CuttingPosSummaryPanel.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/CuttingPosSummaryPanel.vue
@@ -46,7 +46,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-    <Card class="h-fit xl:sticky xl:top-4">
+    <Card class="h-fit min-w-0 xl:sticky xl:top-4">
         <CardHeader class="pb-3">
             <CardTitle class="flex items-center justify-between gap-2 text-base">
                 <span class="flex items-center gap-2">
@@ -61,7 +61,7 @@ const emit = defineEmits<{
                 </span>
             </CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent class="min-w-0">
             <form @submit.prevent="emit('submit')">
                 <FieldGroup>
                     <FieldSet class="grid gap-4">
diff --git a/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue b/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
index fffd025..05bf56b 100644
--- a/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
+++ b/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
@@ -193,7 +193,7 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
                         <h4 class="text-sm font-semibold tracking-tight text-foreground">
                             Bahan Baku
                         </h4>
-                        <div class="rounded-md border">
+                        <div class="overflow-x-auto rounded-md border">
                             <Table>
                                 <TableHeader>
                                     <TableRow>
@@ -266,7 +266,7 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
                         <h4 class="text-sm font-semibold tracking-tight text-foreground">
                             Hasil Produk
                         </h4>
-                        <div class="rounded-md border">
+                        <div class="overflow-x-auto rounded-md border">
                             <Table>
                                 <TableHeader>
                                     <TableRow>