From 4217b184369fae3ad52ee8a1f2d7efc4e2829365 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Mon, 19 Jan 2026 10:38:43 +0700
Subject: (andri) fix size font specs in compare

---
 .../product-detail/components/Information.tsx      |  2 +-
 .../components/ProductComparisonModal.tsx          | 28 ++++++++++++----------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index f3abe0c7..6018f6a1 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -330,7 +330,7 @@ const Information = ({ product }: Props) => {
                         <Center><Skeleton height="10px" width="50px" mt="2px" /></Center>
                     ) : (
                         <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">
-                            {sla?.sla_date || '3 - 7 Hari'}
+                            {sla?.sla_date || '-'}
                         </Text>
                     )}
                 </Box>
diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
index b26be520..45deabb3 100644
--- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
+++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
@@ -6,7 +6,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalCloseButton,
-  Drawer, // Tambahan untuk Mobile
+  Drawer,
   DrawerOverlay,
   DrawerContent,
   DrawerHeader,
@@ -33,8 +33,8 @@ import {
   ListItem,
   useToast,
   useOutsideClick,
-  useBreakpointValue, // Tambahan untuk Mobile
-  Divider // Tambahan untuk Mobile
+  useBreakpointValue,
+  Divider
 } from '@chakra-ui/react';
 
 import {
@@ -434,7 +434,7 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
     if (newProducts.every(p => p === null)) setSpecsMatrix([]);
   };
 
-  // --- RENDER SLOT ITEM ---
+  
   const renderProductSlot = (product: any, index: number) => {
     if (product) {
       return (
@@ -651,7 +651,6 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
                 <Text fontSize="md" fontWeight="bold" color="gray.700">
                   Spesifikasi Teknis
                 </Text>
-                {/* Loader Header Hapus saja, kita pindah ke per-item */}
             </Flex>
         </Box>
         
@@ -664,22 +663,18 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
                         <Grid templateColumns="1fr 1fr" gap={4}>
                            {mobileProducts.map((p, cIdx) => {
                               const val = p ? (row.values[String(p.sku)] || '-') : '-';
-                              // Logic Loader Per Item
                               const isItemLoading = isLoadingMatrix && p && !row.values[String(p.sku)];
 
                               return (
                                  <VStack key={cIdx} spacing={1} align="center">
-                                    {/* VALUE (SPINNER JIKA LOADING) */}
                                     {isItemLoading ? (
                                         <Spinner size="xs" color="red.500" />
                                     ) : (
-                                        <Text fontWeight="semibold" fontSize="s" color="gray.800" textAlign="center" lineHeight="shorter">
+                                        <Text fontWeight="semibold" fontSize="12px" color="gray.800" textAlign="center" lineHeight="shorter">
                                             {renderSpecValue(val)}
                                         </Text>
                                     )}
-                                    
-                                    {/* LABEL */}
-                                    <Text fontSize="xs" color="gray.600" fontWeight="normal" textAlign="center">
+                                    <Text fontSize="10px" color="gray.600" fontWeight="normal" textAlign="center">
                                        {row.label}
                                     </Text>
                                  </VStack>
@@ -701,7 +696,7 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
 
   // --- MAIN RENDER ---
   
-  // Tampilan Mobile (Drawer 75%)
+  // Tampilan Mobile (Drawer 75% + Slim Scrollbar)
   if (isMobile) {
      return (
         <Drawer isOpen={isOpen} placement="bottom" onClose={onClose}>
@@ -709,7 +704,14 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
            <DrawerContent borderTopRadius="20px" h="88vh" bg="white">
               <DrawerCloseButton zIndex={20} />
               <DrawerHeader borderBottomWidth="1px" fontSize="md" textAlign="center">Bandingkan Produk</DrawerHeader>
-              <DrawerBody p={4} overflowY="auto">
+              <DrawerBody 
+                p={4} 
+                overflowY="auto"
+                css={{
+                    '&::-webkit-scrollbar': { width: '9px', height: '10px', },
+                    '&::-webkit-scrollbar-thumb': { background: '#cbd5e0', borderRadius: '24px' },
+                }}
+              >
                  {renderMobileContent()}
               </DrawerBody>
            </DrawerContent>
-- 
cgit v1.2.3