From da4467b500b722100cfdb64df0d163b9f5f4c8e3 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Tue, 7 Jul 2026 10:03:42 +0700
Subject: [PATCH] refactor: improve layout and styling in cutting forms for
 better user experience and responsiveness

---
 resources/js/layouts/AdminLayout.vue                            | 2 +-
 .../js/pages/admin/manage/cuttings/form/CuttingPosForm.vue      | 2 +-
 .../manage/cuttings/form/CuttingPosMaterialCatalogPanel.vue     | 2 +-
 .../manage/cuttings/form/CuttingPosMaterialSummaryItems.vue     | 2 +-
 .../admin/manage/cuttings/form/CuttingPosResultSummaryItems.vue | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/js/layouts/AdminLayout.vue b/resources/js/layouts/AdminLayout.vue
index bee66bd..2096709 100644
--- a/resources/js/layouts/AdminLayout.vue
+++ b/resources/js/layouts/AdminLayout.vue
@@ -31,7 +31,7 @@ const page = usePage();
                     <UserNav />
                 </div>
             </header>
-            <div class="flex min-w-0 flex-1 flex-col gap-4 overflow-y-auto p-4 pb-24 lg:pb-4">
+            <div class="flex min-w-0 flex-1 flex-col gap-4 overflow-y-auto overflow-x-hidden p-4 pb-24 lg:pb-4">
                 <slot />
             </div>
         </SidebarInset>
diff --git a/resources/js/pages/admin/manage/cuttings/form/CuttingPosForm.vue b/resources/js/pages/admin/manage/cuttings/form/CuttingPosForm.vue
index caa617b..3685989 100644
--- a/resources/js/pages/admin/manage/cuttings/form/CuttingPosForm.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/CuttingPosForm.vue
@@ -265,7 +265,7 @@ function onProductCreated(product: CuttingProductCatalogItem) {
 
 <template>
     <div class="grid min-w-0 gap-4 xl:grid-cols-[1fr_400px]">
-        <div class="space-y-4">
+        <div class="min-w-0 space-y-4">
             <CuttingPosMaterialCatalogPanel v-model:material-search="materialSearch"
                 :filtered-raw-materials="filteredRawMaterials" :raw-material-catalog="rawMaterialCatalogState"
                 :material-cart="materialCart" :get-material-cart-item="getMaterialCartItem" :units="units"
diff --git a/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialCatalogPanel.vue b/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialCatalogPanel.vue
index b5098fc..aed6184 100644
--- a/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialCatalogPanel.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialCatalogPanel.vue
@@ -77,7 +77,7 @@ function openCombination(rawMaterial: CuttingRawMaterialCatalogItem, price: Cutt
                     </Empty>
                 </div>
 
-                <div v-else class="columns-1 gap-4 sm:columns-2 xl:columns-3">
+                <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2">
                     <template v-for="rawMaterial in filteredRawMaterials" :key="rawMaterial.id">
                         <PosCatalogCard v-if="rawMaterial.prices.length > 0"
                             :title="rawMaterial.name" :cover-image="getFirstCoverImage(rawMaterial.prices)">
diff --git a/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialSummaryItems.vue b/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialSummaryItems.vue
index f5b439d..67167aa 100644
--- a/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialSummaryItems.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialSummaryItems.vue
@@ -98,7 +98,7 @@ 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 overscroll-y-contain">
+        <div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overflow-x-hidden 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">
diff --git a/resources/js/pages/admin/manage/cuttings/form/CuttingPosResultSummaryItems.vue b/resources/js/pages/admin/manage/cuttings/form/CuttingPosResultSummaryItems.vue
index d58a813..56236cf 100644
--- a/resources/js/pages/admin/manage/cuttings/form/CuttingPosResultSummaryItems.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/CuttingPosResultSummaryItems.vue
@@ -41,7 +41,7 @@ const emit = defineEmits<{
             Belum ada produk hasil dipilih.
         </div>
 
-        <div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overscroll-y-contain">
+        <div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overflow-x-hidden overscroll-y-contain">
             <div v-for="(item, index) in resultCart" :key="item.product_variant_id" class="rounded-lg border p-3">
                 <div class="mb-2 flex items-start justify-between gap-2">
                     <div class="min-w-0 flex-1">