feat(ui): improve mobile responsive layouts

web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx

@@ -206,8 +206,8 @@ export function DynamicPricingBreakdown({
   })
 
   return (
-    <section className='min-w-0 py-4'>
-      <div className='mb-4 flex items-start gap-2'>
+    <section className='min-w-0 py-3 sm:py-4'>
+      <div className='mb-3 flex items-start gap-2 sm:mb-4'>
         <span className='mt-0.5 inline-flex size-6 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm dark:bg-amber-500/20 dark:text-amber-300'>
           <TagIcon className='size-3.5' />
         </span>
@@ -222,11 +222,71 @@ export function DynamicPricingBreakdown({
       </div>
 
       {hasTiers && (
-        <div className='mb-4'>
+        <div className='mb-3 sm:mb-4'>
           <div className='text-foreground mb-2 text-sm font-semibold'>
             {t('Tiered price table')}
           </div>
-          <div className='-mx-4 max-w-[calc(100%+2rem)] overflow-x-auto sm:mx-0 sm:max-w-full'>
+          <div className='space-y-1.5 sm:hidden'>
+            {tiers.map((tier, i) => {
+              const condSummary = formatConditionSummary(tier.conditions, t)
+              const isMatched =
+                matchedTierLabel != null &&
+                matchedTierLabel !== '' &&
+                tier.label === matchedTierLabel
+              return (
+                <div
+                  key={`tier-mobile-${i}`}
+                  className={cn(
+                    'rounded-md border p-2',
+                    isMatched &&
+                      'border-emerald-500/40 bg-emerald-500/10'
+                  )}
+                >
+                  <div className='mb-1.5 flex flex-wrap items-center gap-1.5'>
+                    <Badge
+                      variant='secondary'
+                      className='bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300'
+                    >
+                      {tier.label || t('Default')}
+                    </Badge>
+                    {isMatched && (
+                      <Badge
+                        variant='secondary'
+                        className='bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300'
+                      >
+                        {t('Matched')}
+                      </Badge>
+                    )}
+                  </div>
+                  {condSummary && (
+                    <div className='text-muted-foreground mb-1.5 text-xs'>
+                      {condSummary}
+                    </div>
+                  )}
+                  <div className='grid grid-cols-2 gap-x-3 gap-y-1.5'>
+                    {visiblePriceFields.map((v) => {
+                      const value = Number(
+                        tier[v.field as string as keyof ParsedTier] || 0
+                      )
+                      return (
+                        <div key={v.field} className='min-w-0'>
+                          <div className='text-muted-foreground truncate text-[10px] font-medium tracking-wider uppercase'>
+                            {t(v.shortLabel)}
+                          </div>
+                          <div className='truncate font-mono text-sm font-semibold'>
+                            {value > 0
+                              ? `${symbol}${(value * rate).toFixed(4)}`
+                              : '-'}
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+          <div className='hidden overflow-x-auto sm:block'>
             <Table className='text-sm'>
               <TableHeader>
                 <TableRow className='hover:bg-transparent'>