<Miqdad> Fix lg

1 files changed, 32 insertions, 22 deletions

diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 60834880..2c678c6b 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -229,42 +229,47 @@ const PriceAction = ({ product }: Props) => {
       <MobileView>
         <div className='grid grid-cols-12 items-start gap-3'>
           {/* Kiri */}
-          <div className='col-span-8'>
-            <Skeleton
-              isLoaded={sla}
-              h='21px'
-              className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}
-            >
-              Stock : {sla?.qty}{' '}
-            </Skeleton>
+          <div className='col-span-8 mt-2'>
+            <div className='flex items-center gap-1'>
+              <Skeleton
+                isLoaded={sla}
+                h='21px'
+                w='auto' // ⬅️ penting: biar selebar konten
+                display='inline-block' // ⬅️ penting: jangan full width
+                className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}
+              >
+                Stock : {sla?.qty}
+              </Skeleton>
 
-            {qtyPickUp > 0 && (
-              <div className='mt-1'>
+              {qtyPickUp > 0 && (
                 <Link
                   href='/panduan-pick-up-service'
-                  className='inline-block group'
+                  className='inline-block shrink-0'
                 >
                   <Image
                     src='/images/PICKUP-NOW.png'
-                    className='group-hover:scale-105 transition-transform duration-200'
+                    className='align-middle'
                     alt='pickup now'
-                    width={100}
+                    width={90}
                     height={12}
                   />
                 </Link>
-                <div className='text-[12px] mt-1 text-red-500 italic'>
-                  * {qtyPickUp} barang bisa di pickup
-                </div>
+              )}
+            </div>
+
+            {qtyPickUp > 0 && (
+              <div className='text-[12px] mt-1 text-red-500 italic'>
+                * {qtyPickUp} barang bisa di pickup
               </div>
             )}
           </div>
 
           {/* Kanan: hanya qty, rata kanan */}
           <div className='col-span-4 flex justify-end'>
-            <div className='inline-flex items-center border rounded-md overflow-hidden'>
+            <div className='inline-flex items-stretch border rounded-xl overflow-hidden'>
               <button
                 type='button'
-                className='px-3 py-1 text-gray-500 hover:bg-gray-100'
+                className='h-11 w-11 md:h-12 md:w-12 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95 select-none touch-manipulation focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500'
                 onClick={() =>
                   setQuantityInput(
                     String(Math.max(1, Number(quantityInput) - 1))
@@ -272,25 +277,30 @@ const PriceAction = ({ product }: Props) => {
                 }
                 aria-label='Kurangi'
               >
-                –
+                <span className='text-2xl leading-none'>–</span>
               </button>
+
               <input
                 type='number'
                 id='quantity'
                 min={1}
                 value={quantityInput}
                 onChange={(e) => setQuantityInput(e.target.value)}
-                className='w-12 text-center outline-none border-x'
+                className='h-11 md:h-12 w-16 md:w-20 text-center text-lg md:text-xl outline-none border-x
+               [appearance:textfield] 
+               [&::-webkit-outer-spin-button]:appearance-none 
+               [&::-webkit-inner-spin-button]:appearance-none'
               />
+
               <button
                 type='button'
-                className='px-3 py-1 text-gray-500 hover:bg-gray-100'
+                className='h-11 w-11 md:h-12 md:w-12 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95 select-none touch-manipulation focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500'
                 onClick={() =>
                   setQuantityInput(String(Number(quantityInput) + 1))
                 }
                 aria-label='Tambah'
               >
-                +
+                <span className='text-2xl leading-none'>+</span>
               </button>
             </div>
           </div>