From 8ad735fbf9b52190e4ca8b0700b3f5ada4c9ed5a Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 14 Aug 2026 05:28:45 +0700
Subject: [PATCH] fix: update layout and styling for better responsiveness in
 various components

---
 .../js/pages/admin/manage/cutting/create.tsx  | 10 ++++----
 .../js/pages/admin/manage/cutting/edit.tsx    | 10 ++++----
 .../js/pages/admin/manage/purchase/create.tsx |  6 ++---
 .../js/pages/admin/manage/purchase/edit.tsx   |  8 +++----
 .../js/pages/admin/manage/restock/create.tsx  |  6 ++---
 .../js/pages/admin/manage/restock/edit.tsx    |  6 ++---
 .../pages/admin/manage/transaction/create.tsx | 24 +++++++++----------
 .../pages/admin/manage/transaction/edit.tsx   | 24 +++++++++----------
 8 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/resources/js/pages/admin/manage/cutting/create.tsx b/resources/js/pages/admin/manage/cutting/create.tsx
index 995a4f3..86c69ec 100644
--- a/resources/js/pages/admin/manage/cutting/create.tsx
+++ b/resources/js/pages/admin/manage/cutting/create.tsx
@@ -337,7 +337,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
                                     <CardHeader>
                                         <CardTitle>Pilih Bahan Baku</CardTitle>
                                     </CardHeader>
-                                    <CardContent className="space-y-4">
+                                    <CardContent className="max-h-[calc(100vh-16rem)] space-y-4 overflow-y-auto">
                                         <div className="grid gap-2">
                                             <Label>
                                                 Nama Bahan Baku <span className="text-destructive">*</span>
@@ -386,7 +386,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
                                                                 const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
 
                                                                 return (
-                                                                    <div key={price.id} className={isAdded ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3' : 'flex items-center justify-between gap-3 rounded-lg border p-3'}>
+                                                                    <div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
                                                                         <div className="flex min-w-0 items-center gap-3">
                                                                             {price.photo_url ? (
                                                                                 <img src={price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
@@ -401,7 +401,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
                                                                                 </p>
                                                                             </div>
                                                                         </div>
-                                                                        <div className="flex shrink-0 items-center gap-1">
+                                                                        <div className="flex items-center gap-1">
                                                                             <Button type="button" variant="outline" size="sm" onClick={() => addVariant(rm, price.id)}>
                                                                                 <Plus className="h-4 w-4" />
                                                                                 Tambah
@@ -432,7 +432,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
                                                         const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
 
                                                         return (
-                                                            <div key={price.id} className={isAdded ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3' : 'flex items-center justify-between gap-3 rounded-lg border p-3'}>
+                                                            <div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
                                                                 <div className="flex min-w-0 items-center gap-3">
                                                                     {price.photo_url ? (
                                                                         <img src={price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
@@ -447,7 +447,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
                                                                         </p>
                                                                     </div>
                                                                 </div>
-                                                                <div className="flex shrink-0 items-center gap-1">
+                                                                <div className="flex items-center gap-1">
                                                                     <Button type="button" variant="outline" size="sm" onClick={() => addVariant(selectedMaterial, price.id)}>
                                                                         <Plus className="h-4 w-4" />
                                                                         Tambah
diff --git a/resources/js/pages/admin/manage/cutting/edit.tsx b/resources/js/pages/admin/manage/cutting/edit.tsx
index 87a941d..ba62441 100644
--- a/resources/js/pages/admin/manage/cutting/edit.tsx
+++ b/resources/js/pages/admin/manage/cutting/edit.tsx
@@ -313,7 +313,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
                                     <CardHeader>
                                         <CardTitle>Pilih Bahan Baku</CardTitle>
                                     </CardHeader>
-                                    <CardContent className="space-y-4">
+                                    <CardContent className="max-h-[calc(100vh-16rem)] space-y-4 overflow-y-auto">
                                         <div className="grid gap-2">
                                             <Label>
                                                 Nama Bahan Baku <span className="text-destructive">*</span>
@@ -362,7 +362,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
                                                                 const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
 
                                                                 return (
-                                                                    <div key={price.id} className={isAdded ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3' : 'flex items-center justify-between gap-3 rounded-lg border p-3'}>
+                                                                    <div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
                                                                         <div className="flex min-w-0 items-center gap-3">
                                                                             {price.photo_url ? (
                                                                                 <img src={price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
@@ -377,7 +377,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
                                                                                 </p>
                                                                             </div>
                                                                         </div>
-                                                                        <div className="flex shrink-0 items-center gap-1">
+                                                                        <div className="flex items-center gap-1">
                                                                             <Button type="button" variant="outline" size="sm" onClick={() => addVariant(rm, price.id)}>
                                                                                 <Plus className="h-4 w-4" />
                                                                                 Tambah
@@ -408,7 +408,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
                                                         const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
 
                                                         return (
-                                                            <div key={price.id} className={isAdded ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3' : 'flex items-center justify-between gap-3 rounded-lg border p-3'}>
+                                                            <div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
                                                                 <div className="flex min-w-0 items-center gap-3">
                                                                     {price.photo_url ? (
                                                                         <img src={price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
@@ -423,7 +423,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
                                                                         </p>
                                                                     </div>
                                                                 </div>
-                                                                <div className="flex shrink-0 items-center gap-1">
+                                                                <div className="flex items-center gap-1">
                                                                     <Button type="button" variant="outline" size="sm" onClick={() => addVariant(selectedMaterial, price.id)}>
                                                                         <Plus className="h-4 w-4" />
                                                                         Tambah
diff --git a/resources/js/pages/admin/manage/purchase/create.tsx b/resources/js/pages/admin/manage/purchase/create.tsx
index f9423a9..7baf5e0 100644
--- a/resources/js/pages/admin/manage/purchase/create.tsx
+++ b/resources/js/pages/admin/manage/purchase/create.tsx
@@ -866,8 +866,8 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
                                                                         ] ??
                                                                             0) >
                                                                         0
-                                                                            ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
-                                                                            : 'flex items-center justify-between gap-3 rounded-lg border p-3'
+                                                                            ? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
+                                                                            : 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
                                                                     }
                                                                 >
                                                                     <div className="flex min-w-0 items-center gap-3">
@@ -909,7 +909,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
                                                                             </p>
                                                                         </div>
                                                                     </div>
-                                                                    <div className="flex shrink-0 items-center gap-2">
+                                                                    <div className="flex items-center gap-2">
                                                                         <Button
                                                                             type="button"
                                                                             variant="outline"
diff --git a/resources/js/pages/admin/manage/purchase/edit.tsx b/resources/js/pages/admin/manage/purchase/edit.tsx
index 1f906c8..5fd1fd0 100644
--- a/resources/js/pages/admin/manage/purchase/edit.tsx
+++ b/resources/js/pages/admin/manage/purchase/edit.tsx
@@ -306,9 +306,9 @@ export default function PurchaseEdit({
                                                                         .id
                                                                 ] ??
                                                                     0) >
-                                                                    0
-                                                                    ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
-                                                                    : 'flex items-center justify-between gap-3 rounded-lg border p-3'
+                                                                0
+                                                                    ? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
+                                                                    : 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
                                                             }
                                                         >
                                                             <div className="flex min-w-0 items-center gap-3">
@@ -350,7 +350,7 @@ export default function PurchaseEdit({
                                                                     </p>
                                                                 </div>
                                                             </div>
-                                                            <div className="flex shrink-0 items-center gap-2">
+                                                            <div className="flex items-center gap-2">
                                                                 <Button
                                                                     type="button"
                                                                     variant="outline"
diff --git a/resources/js/pages/admin/manage/restock/create.tsx b/resources/js/pages/admin/manage/restock/create.tsx
index 3a2960b..b1f528d 100644
--- a/resources/js/pages/admin/manage/restock/create.tsx
+++ b/resources/js/pages/admin/manage/restock/create.tsx
@@ -308,8 +308,8 @@ return 0;
                                                                         variant
                                                                             .id
                                                                     ] ?? 0) > 0
-                                                                        ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
-                                                                        : 'flex items-center justify-between gap-3 rounded-lg border p-3'
+                                                                        ? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
+                                                                        : 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
                                                                 }
                                                             >
                                                                 <div className="flex min-w-0 items-center gap-3">
@@ -351,7 +351,7 @@ return 0;
                                                                         </p>
                                                                     </div>
                                                                 </div>
-                                                                <div className="flex shrink-0 items-center gap-2">
+                                                                <div className="flex items-center gap-2">
                                                                     <Button
                                                                         type="button"
                                                                         variant="outline"
diff --git a/resources/js/pages/admin/manage/restock/edit.tsx b/resources/js/pages/admin/manage/restock/edit.tsx
index a2c5565..b8aa0b0 100644
--- a/resources/js/pages/admin/manage/restock/edit.tsx
+++ b/resources/js/pages/admin/manage/restock/edit.tsx
@@ -236,8 +236,8 @@ return 0;
                                                                         variant
                                                                             .id
                                                                     ] ?? 0) > 0
-                                                                        ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
-                                                                        : 'flex items-center justify-between gap-3 rounded-lg border p-3'
+                                                                        ? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
+                                                                        : 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
                                                                 }
                                                             >
                                                                 <div className="flex min-w-0 items-center gap-3">
@@ -279,7 +279,7 @@ return 0;
                                                                         </p>
                                                                     </div>
                                                                 </div>
-                                                                <div className="flex shrink-0 items-center gap-2">
+                                                                <div className="flex items-center gap-2">
                                                                     <Button
                                                                         type="button"
                                                                         variant="outline"
diff --git a/resources/js/pages/admin/manage/transaction/create.tsx b/resources/js/pages/admin/manage/transaction/create.tsx
index 0a362fe..a925aae 100644
--- a/resources/js/pages/admin/manage/transaction/create.tsx
+++ b/resources/js/pages/admin/manage/transaction/create.tsx
@@ -396,17 +396,17 @@ export default function TransactionCreate({
                                                                 : variant.reject_stock;
 
                                                         return (
-                                                            <div
-                                                                key={variant.id}
-                                                                className={
-                                                                    (quantities[
-                                                                        variant
-                                                                            .id
-                                                                    ] ?? 0) > 0
-                                                                        ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
-                                                                        : 'flex items-center justify-between gap-3 rounded-lg border p-3'
-                                                                }
-                                                            >
+                                                                <div
+                                                                    key={variant.id}
+                                                                    className={
+                                                                        (quantities[
+                                                                            variant
+                                                                                .id
+                                                                        ] ?? 0) > 0
+                                                                            ? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
+                                                                            : 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
+                                                                    }
+                                                                >
                                                                 <div className="flex min-w-0 items-center gap-3">
                                                                     {variant.photo_url ? (
                                                                         <img
@@ -450,7 +450,7 @@ export default function TransactionCreate({
                                                                         </p>
                                                                     </div>
                                                                 </div>
-                                                                <div className="flex shrink-0 items-center gap-2">
+                                                                <div className="flex items-center gap-2">
                                                                     <Button
                                                                         type="button"
                                                                         variant="outline"
diff --git a/resources/js/pages/admin/manage/transaction/edit.tsx b/resources/js/pages/admin/manage/transaction/edit.tsx
index 3671666..034e617 100644
--- a/resources/js/pages/admin/manage/transaction/edit.tsx
+++ b/resources/js/pages/admin/manage/transaction/edit.tsx
@@ -376,17 +376,17 @@ export default function TransactionEdit({
                                                                 : variant.reject_stock;
 
                                                         return (
-                                                            <div
-                                                                key={variant.id}
-                                                                className={
-                                                                    (quantities[
-                                                                        variant
-                                                                            .id
-                                                                    ] ?? 0) > 0
-                                                                        ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
-                                                                        : 'flex items-center justify-between gap-3 rounded-lg border p-3'
-                                                                }
-                                                            >
+                                                                <div
+                                                                    key={variant.id}
+                                                                    className={
+                                                                        (quantities[
+                                                                            variant
+                                                                                .id
+                                                                        ] ?? 0) > 0
+                                                                            ? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
+                                                                            : 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
+                                                                    }
+                                                                >
                                                                 <div className="flex min-w-0 items-center gap-3">
                                                                     {variant.photo_url ? (
                                                                         <img
@@ -430,7 +430,7 @@ export default function TransactionEdit({
                                                                         </p>
                                                                     </div>
                                                                 </div>
-                                                                <div className="flex shrink-0 items-center gap-2">
+                                                                <div className="flex items-center gap-2">
                                                                     <Button
                                                                         type="button"
                                                                         variant="outline"