From 0e96469cdd877a57f8b6ba74aa37689efcb57c63 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sat, 1 Aug 2026 14:46:58 +0700
Subject: [PATCH] refactor: enhance layout and spacing for product variant
 buttons in create and edit pages

---
 resources/js/pages/admin/master/product/create.tsx | 10 ++++++----
 resources/js/pages/admin/master/product/edit.tsx   | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/resources/js/pages/admin/master/product/create.tsx b/resources/js/pages/admin/master/product/create.tsx
index 573b2b1..3651366 100644
--- a/resources/js/pages/admin/master/product/create.tsx
+++ b/resources/js/pages/admin/master/product/create.tsx
@@ -532,18 +532,19 @@ export default function ProductCreate({ categories }: Props) {
                                                     key={variantIndex}
                                                     className="space-y-4 rounded-lg border p-4"
                                                 >
-                                                    <div className="flex items-center justify-between">
+                                                    <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                                                         <h4 className="font-medium">
                                                             Varian{' '}
                                                             {variantIndex + 1}
                                                         </h4>
-                                                        <div className="flex items-center gap-1">
+                                                        <div className="flex flex-wrap items-center gap-1">
                                                             {!useSamePrice && (
                                                                 <>
                                                                     <Button
                                                                         type="button"
                                                                         variant="outline"
                                                                         size="sm"
+                                                                        className="whitespace-nowrap"
                                                                         onClick={() =>
                                                                             copyPrices(
                                                                                 variantIndex,
@@ -562,6 +563,7 @@ export default function ProductCreate({ categories }: Props) {
                                                                         type="button"
                                                                         variant="outline"
                                                                         size="sm"
+                                                                        className="whitespace-nowrap"
                                                                         onClick={() =>
                                                                             pastePrices(
                                                                                 variantIndex,
@@ -575,14 +577,14 @@ export default function ProductCreate({ categories }: Props) {
                                                                         type="button"
                                                                         variant="outline"
                                                                         size="sm"
+                                                                        className="whitespace-nowrap"
                                                                         onClick={() =>
                                                                             applyToAll(
                                                                                 variantIndex,
                                                                             )
                                                                         }
                                                                     >
-                                                                        Terapkan
-                                                                        ke Semua
+                                                                        Terapkan ke Semua
                                                                     </Button>
                                                                 </>
                                                             )}
diff --git a/resources/js/pages/admin/master/product/edit.tsx b/resources/js/pages/admin/master/product/edit.tsx
index 2d988c0..6c2b4fe 100644
--- a/resources/js/pages/admin/master/product/edit.tsx
+++ b/resources/js/pages/admin/master/product/edit.tsx
@@ -612,18 +612,19 @@ export default function ProductEdit({ product, categories }: Props) {
                                                     key={variantIndex}
                                                     className="space-y-4 rounded-lg border p-4"
                                                 >
-                                                    <div className="flex items-center justify-between">
+                                                    <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                                                         <h4 className="font-medium">
                                                             Varian{' '}
                                                             {variantIndex + 1}
                                                         </h4>
-                                                        <div className="flex items-center gap-1">
+                                                        <div className="flex flex-wrap items-center gap-1">
                                                             {!useSamePrice && (
                                                                 <>
                                                                     <Button
                                                                         type="button"
                                                                         variant="outline"
                                                                         size="sm"
+                                                                        className="whitespace-nowrap"
                                                                         onClick={() =>
                                                                             copyPrices(
                                                                                 variantIndex,
@@ -642,6 +643,7 @@ export default function ProductEdit({ product, categories }: Props) {
                                                                         type="button"
                                                                         variant="outline"
                                                                         size="sm"
+                                                                        className="whitespace-nowrap"
                                                                         onClick={() =>
                                                                             pastePrices(
                                                                                 variantIndex,
@@ -655,14 +657,14 @@ export default function ProductEdit({ product, categories }: Props) {
                                                                         type="button"
                                                                         variant="outline"
                                                                         size="sm"
+                                                                        className="whitespace-nowrap"
                                                                         onClick={() =>
                                                                             applyToAll(
                                                                                 variantIndex,
                                                                             )
                                                                         }
                                                                     >
-                                                                        Terapkan
-                                                                        ke Semua
+                                                                        Terapkan ke Semua
                                                                     </Button>
                                                                 </>
                                                             )}