From 8004947c70f9e963f942aed75e6e99c7c6e82b65 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Thu, 8 Jan 2026 13:16:35 +0700
Subject: (andri) add minmax width td body

---
 .../modules/product-detail/components/ProductDetail.tsx  | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 3a4d9c7e..a18e70bb 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -535,6 +535,7 @@ const ProductDetail = ({ product }: Props) => {
                                     position="sticky" left={0} top={0} zIndex={21} bg="red.600"
                                     rowSpan={2}
                                     width="25%" 
+                                    minW="100px" 
                                     borderColor="whiteAlpha.300" color="white" 
                                     fontSize="sm" textTransform="none" verticalAlign="middle"
                                     boxShadow="2px 0 5px -2px rgba(0,0,0,0.1)"
@@ -584,15 +585,20 @@ const ProductDetail = ({ product }: Props) => {
                               <Tbody>
                                 {product.variants.map((v, vIdx) => (
                                   <Tr key={v.id} bg={vIdx % 2 === 0 ? 'white' : 'gray.50'}>
+                                    {/* 1. KOLOM JUDUL VARIANT (Sticky Kiri) */}
                                     <Td 
                                       position="sticky" left={0} zIndex={15} 
                                       bg={vIdx % 2 === 0 ? 'white' : 'gray.50'}
-                                      fontWeight="bold" borderColor="gray.200" fontSize="sm" verticalAlign="middle" textAlign="center" textTransform="uppercase"
+                                      fontWeight="bold" borderColor="gray.200" fontSize="sm" 
+                                      verticalAlign="middle"
                                       boxShadow="2px 0 5px -2px rgba(0,0,0,0.05)"
+                                      minW="100px"         
+                                      whiteSpace="normal" 
+                                      py={4}               
                                     >
                                       {v.attributes && v.attributes.length > 0 ? v.attributes.join(' - ') : v.code}
                                     </Td>
-
+                                    {/* 2. KOLOM DATA SPESIFIKASI */}
                                     {flatSpecs.map((spec, sIdx) => {
                                       const rawValue = spec.values[v.id] || '-';
                                       return (
@@ -602,6 +608,12 @@ const ProductDetail = ({ product }: Props) => {
                                           textAlign="center" 
                                           fontSize="sm" 
                                           verticalAlign="middle"
+                                          px={2}
+                                          py={3} 
+                                          minW="100px"   
+                                          maxW="150px"        
+                                          whiteSpace="normal" 
+                                          overflowWrap="break-word"
                                         >
                                           {renderSpecValue(rawValue)}
                                         </Td>
-- 
cgit v1.2.3