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(-)

(limited to 'src-migrate/modules/product-detail/components')

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


From 64147303dbea6ac05e5e085e10760c4fc3a4727c Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Wed, 11 Feb 2026 14:12:00 +0700
Subject: fix layout spec

---
 .../product-detail/components/Information.tsx      |  2 +-
 .../components/ProductComparisonModal.tsx          | 29 ++++++++++++++++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

(limited to 'src-migrate/modules/product-detail/components')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index ce848267..b0feb61a 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -267,7 +267,7 @@ const Information = ({ product }: Props) => {
             >
               {product?.manufacture.logo ? (
                 <ImageNext
-                  height={50}
+                  height={100}
                   width={100}
                   src={product.manufacture.logo}
                   alt={product.manufacture.name}
diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
index b5676ac8..5dd3f175 100644
--- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
+++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
@@ -523,9 +523,11 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
               <InputGroup size="sm">
                 <AutoCompleteInput
                   variant="outline"
-                  // fontSize="xs"
-                  fontSize={{ base: '16px', md: 'sm' }} // fix font size mobile
-                  borderRadius="md"
+                  fontSize="sm"
+                  _focus={{
+                    fontSize: {base: '16px', md: 'sm'},
+                    borderColor: 'red.500',
+                  }}borderRadius="md"
                   placeholder="Cari Varian..."
                   value={product.inputValue}
                   onChange={(e) => handleInputChange(index, e.target.value)}
@@ -640,8 +642,25 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
               <InputGroup size="sm">
                 <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
+                  placeholder="Cari Produk..."
+                  borderRadius="md"
+                  fontSize="16px"
+                  sx={{
+                    base: {
+                        transform: "scale(0.875)",       // Kecilkan visual jadi setara 14px (sm)
+                        transformOrigin: "left center",
+                        width: "114.29%",                // Kompensasi lebar
+                        marginBottom: "-2px",
+                        marginRight: "-14.29%"
+                    },
+                    md: {
+                        fontSize: "sm",       // Di Desktop pakai ukuran asli (14px)
+                        transform: "none",
+                        width: "100%",
+                        marginBottom: "0",
+                        marginRight: "0"
+                    }
+                  }}
                   value={activeSearchSlot === index ? searchQuery : ''}
                   onFocus={() => { setActiveSearchSlot(index); setSearchQuery(''); }}
                   onChange={(e) => setSearchQuery(e.target.value)}
-- 
cgit v1.2.3