diff options
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductDetail.tsx | 16 |
1 files 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> |