<Miqdad> cr renca

2 files changed, 62 insertions, 44 deletions

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index a296eff3..801ca8f9 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -80,11 +80,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
       <>
         <DesktopView>
           <div className='rounded shadow-sm'>
-            <Link
-              href={URL.product}
-              className='border-b border-gray_r-4 relative'
-              aria-label='Produk'
-            >
+            <Link href={URL.product} className='relative' aria-label='Produk'>
               <div className='relative'>
                 <Image
                   src={image}
@@ -131,19 +127,29 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
               {/* BOTTOM-LEFT: Varian + PICK UP NOW  */}
               {(product?.variantTotal > 1 || product?.isInBu) && (
-                <div className='absolute bottom-1.5 left-1.5 z-30 flex items-center gap-2'>
+                <div
+                  className='
+      absolute bottom-1.5 left-1.5 z-30
+      flex items-center gap-2 flex-nowrap
+      max-w-[calc(100%-12px)] overflow-hidden
+    '
+                >
                   {product?.variantTotal > 1 && (
-                    <div className='badge-gray'>
+                    <div className='badge-gray shrink-0'>
                       {product.variantTotal} Varian
                     </div>
                   )}
+
                   {product?.isInBu && (
                     <Image
                       src='/images/PICKUP-NOW.png'
                       alt='Pick Up Now'
                       width={83}
                       height={24}
-                      className='drop-shadow-sm'
+                      // biar ikut mengecil & gak keluar div:
+                      className='drop-shadow-sm h-5 w-auto sm:h-6 md:h-6 max-w-[70%] shrink'
+                      sizes='(max-width: 640px) 120px, (max-width: 1024px) 140px, 160px'
+                      style={{ height: '1.25rem', width: 'auto' }} // override ukuran intrinsic
                       loading='eager'
                     />
                   )}
@@ -228,8 +234,8 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
               {product?.flashSale?.id > 0 &&
               product?.lowestPrice.discountPercentage > 0 ? (
                 <div className='mb-2'>
-                  <div className='flex items-baseline gap-2 min-w-0'>
-                    <span className='text-danger-500 font-semibold tabular-nums whitespace-nowrap'>
+                  <div className='flex items-baseline gap-1 min-w-0'>
+                    <span className='text-danger-500 text-sm font-semibold  whitespace-nowrap'>
                       {product?.lowestPrice.priceDiscount > 0 ? (
                         currencyFormat(product?.lowestPrice.priceDiscount)
                       ) : (
@@ -244,7 +250,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       )}
                     </span>
                     <span
-                      className='text-gray_r-11 line-through text-[11px] sm:text-caption-2 tabular-nums
+                      className='text-gray_r-11 line-through text-xs sm:text-caption-2 
                          whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
                     >
                       {currencyFormat(product.lowestPrice.price)}
@@ -279,11 +285,20 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
               {discount > 0 && (product?.flashSale?.id ?? 0) < 1 && (
                 <div className='mt-1 mb-1'>
-                  <div className='inline-flex items-center gap-2 text-green-600'>
-                    <span className='text-[9pt] font-semibold'>Voucher</span>
-                    <span className='inline-flex items-center gap-1.5 rounded bg-green-50 px-2.5 py-0.5 ring-0'>
-                      <TicketIcon className='h-3.5 w-3.5' />
-                      <span className='text-sm font-extrabold tabular-nums'>
+                  <div className='flex items-center gap-2 text-green-600 min-w-0 mb-2 flex-nowrap'>
+                    {/* label jangan pecah */}
+                    <span className='text-xs font-medium shrink-0 whitespace-nowrap'>
+                      Voucher
+                    </span>
+
+                    {/* chip bisa mengecil & memotong teks di dalam */}
+                    <span
+                      className='flex items-center gap-1.5 rounded bg-green-50 px-2.5 py-0.5 ring-0
+                       min-w-0 max-w-full overflow-hidden'
+                    >
+                      <TicketIcon className='h-3.5 w-3.5 shrink-0' />
+                      {/* nominal: truncate */}
+                      <span className='text-xs font-medium  truncate whitespace-nowrap min-w-0'>
                         {currencyFormat(discount)}
                       </span>
                     </span>
@@ -301,7 +316,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     )}
 
                     {product?.qtySold > 0 && (
-                      <div className='text-gray_r-9 text-[11px] flex-1 min-w-0 truncate'>
+                      <div className='text-gray_r-9 text-xs flex-1 min-w-0 truncate'>
                         {sellingProductFormat(product?.qtySold)} Terjual
                       </div>
                     )}
@@ -314,11 +329,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
         <MobileView>
           <div className='rounded shadow-sm'>
-            <Link
-              href={URL.product}
-              className='border-b border-gray_r-4 relative'
-              aria-label='Produk'
-            >
+            <Link href={URL.product} className='relative' aria-label='Produk'>
               <div className='relative'>
                 <div
                   className='relative w-full overflow-hidden'
@@ -441,8 +452,8 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
               {product?.flashSale?.id > 0 &&
               product?.lowestPrice.discountPercentage > 0 ? (
                 <div className='mb-2'>
-                  <div className='flex items-baseline gap-2 min-w-0'>
-                    <span className='text-danger-500 font-semibold tabular-nums whitespace-nowrap'>
+                  <div className='flex items-baseline gap-1 min-w-0'>
+                    <span className='text-danger-500 text-sm font-semibold  whitespace-nowrap'>
                       {product?.lowestPrice.priceDiscount > 0 ? (
                         currencyFormat(product?.lowestPrice.priceDiscount)
                       ) : (
@@ -457,7 +468,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       )}
                     </span>
                     <span
-                      className='text-gray_r-11 line-through text-[11px] sm:text-caption-2 tabular-nums
+                      className='text-gray_r-11 line-through text-xs sm:text-caption-2 
                          whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
                     >
                       {currencyFormat(product.lowestPrice.price)}
@@ -492,11 +503,20 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
               {discount > 0 && (product?.flashSale?.id ?? 0) < 1 && (
                 <div className='mt-1 mb-1'>
-                  <div className='flex flex-wrap items-center gap-2 text-green-600 min-w-0 mb-2'>
-                    <span className='text-xs font-medium'>Voucher</span>
-                    <span className='inline-flex items-center gap-1.5 rounded bg-green-50 px-2.5 py-0.5 ring-0 max-w-full'>
+                  <div className='flex items-center gap-2 text-green-600 min-w-0 mb-2 flex-nowrap'>
+                    {/* label jangan pecah */}
+                    <span className='text-xs font-medium shrink-0 whitespace-nowrap'>
+                      Voucher
+                    </span>
+
+                    {/* chip bisa mengecil & memotong teks di dalam */}
+                    <span
+                      className='flex items-center gap-1.5 rounded bg-green-50 px-2.5 py-0.5 ring-0
+                       min-w-0 max-w-full overflow-hidden'
+                    >
                       <TicketIcon className='h-3.5 w-3.5 shrink-0' />
-                      <span className='text-xs font-medium tabular-nums break-all'>
+                      {/* nominal: truncate */}
+                      <span className='text-xs font-medium  truncate whitespace-nowrap min-w-0'>
                         {currencyFormat(discount)}
                       </span>
                     </span>
@@ -513,7 +533,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   )}
 
                   {product?.qtySold > 0 && (
-                    <div className='text-gray_r-9 text-[11px] flex-1 min-w-0 truncate'>
+                    <div className='text-gray_r-9 text-xs flex-1 min-w-0 truncate'>
                       {sellingProductFormat(product?.qtySold)} Terjual
                     </div>
                   )}
@@ -624,9 +644,9 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           {product?.flashSale?.id > 0 &&
           product?.lowestPrice.discountPercentage > 0 ? (
             <div className='mb-2'>
-              <div className='flex items-baseline gap-2'>
+              <div className='flex items-baseline gap-1'>
                 {/* harga sekarang (merah) */}
-                <span className='text-danger-500 font-semibold tabular-nums'>
+                <span className='text-danger-500 font-semibold text-sm'>
                   {product?.lowestPrice.priceDiscount > 0 ? (
                     currencyFormat(product?.lowestPrice.priceDiscount) // ← perbaikan di sini
                   ) : (
@@ -642,7 +662,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 </span>
 
                 {/* harga lama (abu, dicoret) */}
-                <span className='text-gray_r-11 line-through text-[11px] sm:text-caption-2 tabular-nums'>
+                <span className='text-gray_r-11 line-through text-xs sm:text-caption-2 '>
                   {currencyFormat(product.lowestPrice.price)}
                 </span>
               </div>
@@ -680,7 +700,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 <span className='text-xs font-medium'>Voucher</span>
                 <span className='inline-flex items-center gap-1.5 rounded bg-green-50 px-2.5 py-0.5 ring-0 max-w-full'>
                   <TicketIcon className='h-3.5 w-3.5 shrink-0' />
-                  <span className='text-xs font-medium tabular-nums break-all'>
+                  <span className='text-xs font-medium  break-all'>
                     {currencyFormat(discount)}
                   </span>
                 </span>
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 9503d400..805cc0e0 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -575,16 +575,14 @@ const ProductSearch = ({
               </div>
             )}
 
-            <div className='fixed'>
-              <ProductFilterDesktop
-                brands={brands || []}
-                categories={categories || []}
-                prefixUrl={prefixUrl}
-                defaultBrand={defaultBrand}
-              />
-              <div className='h-6' />
-              <SideBanner query={search} />
-            </div>
+            <ProductFilterDesktop
+              brands={brands || []}
+              categories={categories || []}
+              prefixUrl={prefixUrl}
+              defaultBrand={defaultBrand}
+            />
+            <div className='h-6' />
+            <SideBanner query={search} />
           </div>
 
           <div className='w-9/12 pl-6'>