From be78c3b21a9172c71246dcbf621286a7e02e05e6 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Tue, 3 Feb 2026 13:13:15 +0700
Subject: fix input compare product

---
 .../components/ProductComparisonModal.tsx          | 83 ++++++++++++++--------
 1 file changed, 53 insertions(+), 30 deletions(-)

diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
index 260b6713..b5676ac8 100644
--- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
+++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
@@ -523,7 +523,8 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
               <InputGroup size="sm">
                 <AutoCompleteInput
                   variant="outline"
-                  fontSize="xs"
+                  // fontSize="xs"
+                  fontSize={{ base: '16px', md: 'sm' }} // fix font size mobile
                   borderRadius="md"
                   placeholder="Cari Varian..."
                   value={product.inputValue}
@@ -640,6 +641,7 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
                 <InputLeftElement pointerEvents="none"><Icon as={Search} color="gray.300" /></InputLeftElement>
                 <Input
                   placeholder="Cari Produk..." borderRadius="md"
+                  fontSize={{ base: '16px', md: 'sm' }} // fix font size mobile
                   value={activeSearchSlot === index ? searchQuery : ''}
                   onFocus={() => { setActiveSearchSlot(index); setSearchQuery(''); }}
                   onChange={(e) => setSearchQuery(e.target.value)}
@@ -780,30 +782,42 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
                                     ) : (
                                         <Box 
                                             fontSize="12px" 
-                                            fontWeight="semibold" 
                                             color="gray.800" 
                                             w="100%"
                                             textAlign="center"
                                             sx={{
-                                                '& ul, & ol': { 
-                                                    textAlign: 'center', 
-                                                    paddingLeft: '1.2rem', 
-                                                    listStylePosition: 'outside',
-                                                    margin: 0,
-                                                    width: '100%'
+                                                'ul, ol': { 
+                                                    textAlign: 'left', 
+                                                    listStylePosition: 'outside !important', 
+                                                    paddingLeft: '1.2em !important',
+                                                    marginLeft: '0 !important',
+                                                    marginTop: '0.5em !important',
+                                                    marginBottom: '1em !important'
                                                 },
-                                                '& li': { 
-                                                    textAlign: 'center',
-                                                    marginBottom: '4px',
-                                                    fontWeight: 'normal'
+                                                'ul': { listStyleType: 'disc !important' },
+                                                'ol': { listStyleType: 'decimal !important' },
+                                                
+                                                // 2. ITEM LIST (LI)
+                                                'li': { 
+                                                    textAlign: 'left',
+                                                    marginBottom: '4px !important',
+                                                    paddingLeft: '0.2em !important',
+                                                    lineHeight: '1.5 !important',
+                                                    fontWeight: 'normal !important'
                                                 },
-                                                '& strong': {
-                                                    display: 'block', 
-                                                    marginBottom: '2px' 
+
+                                                'strong, b': { 
+                                                    display: 'block !important', 
+                                                    fontWeight: '700 !important',
+                                                    marginBottom: '0px !important',
+                                                    marginTop: '4px !important',
+                                                    color: '#1a202c',
+                                                    textAlign: 'left'
                                                 },
-                                                '& p': { 
-                                                    textAlign: 'center', 
-                                                    margin: 0 
+
+                                                'p': { 
+                                                    margin: '0 !important',
+                                                    padding: '0 !important'
                                                 }
                                             }}
                                             dangerouslySetInnerHTML={{ __html: renderSpecValue(val) }} 
@@ -992,24 +1006,33 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
                             w="100%"
                             sx={{
                               '& ul, & ol': { 
-                                textAlign: 'center', 
-                                paddingLeft: '1.2rem', 
-                                listStylePosition: 'outside',
-                                margin: 0,
-                                width: '100%'
+                                textAlign: 'left', // List Wajib Rata Kiri
+                                listStylePosition: 'outside !important', 
+                                paddingLeft: '1.2em !important',
+                                marginLeft: '0 !important',
+                                marginTop: '0.5em !important',
+                                marginBottom: '1em !important'
                                 },
+                              'ul': { listStyleType: 'disc !important' },
+                              'ol': { listStyleType: 'decimal !important' },
                               '& li': { 
-                                textAlign: 'center',
-                                marginBottom: '4px',
-                                fontWeight: 'normal'
+                                textAlign: 'left',
+                                marginBottom: '4px !important',
+                                paddingLeft: '0.2em !important',
+                                lineHeight: '1.5 !important',
+                                fontWeight: 'normal !important'
                                 },
                               '& strong': {
-                                display: 'block', 
-                                marginBottom: '2px' 
+                                display: 'block !important', 
+                                fontWeight: '700 !important',
+                                marginBottom: '0px !important',
+                                marginTop: '4px !important',
+                                color: '#1a202c',
+                                textAlign: 'left' 
                               },
                               '& p': { 
-                                textAlign: 'center', 
-                                margin: 0 
+                                margin: '0 !important',
+                                padding: '0 !important'
                               }
                             }}
                             dangerouslySetInnerHTML={{ __html: renderSpecValue(val) }} 
-- 
cgit v1.2.3