@12-apps/payments-frontend 3.27.1 → 3.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.27.1",
+  "version": "3.27.2",
   "type": "module",
   "sideEffects": false,
   "description": "Browser half of the vendor-agnostic payments platform: plug-and-play MUI components for the per-provider settings page (credential form from each provider's schema, masked hints, verify/enable) and the checkout page (PIX QR + polling, card tokenization, hosted-checkout redirect), plus the headless hooks and fetch clients they build on. Talks only to the host's payments HTTP surface — never to a provider directly. Microfrontend-ready: no app coupling, host injects theme and auth.",

package/src/tender-split/tender-card.tsx

@@ -51,6 +51,7 @@ export function TenderChoice<T extends string>({
         gap: 0.75,
         p: 1.5,
         minHeight: 74,
+        container: 'tender-card / inline-size',
         textAlign: 'left',
         borderRadius: CARD_RADIUS,
         border: 1.5,
@@ -102,6 +103,7 @@ export function PickedTender<T extends string>({
         gap: 1,
         p: 1.5,
         minWidth: 0,
+        container: 'tender-card / inline-size',
         borderRadius: CARD_RADIUS,
         border: 1.5,
         borderColor: 'primary.main',
@@ -182,15 +184,34 @@ function AmountField({
   );
 }
 
+/**
+ * The glyph and the name. Side by side on a card with room; on a narrow one
+ * (a 320px phone halves to ~88px) the glyph goes on top, beside the remove
+ * control, so the name gets the whole width and breaks only between words.
+ */
 function TenderHeading<T extends string>({ tender }: { tender: TenderOption<T> }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, pr: 3, minWidth: 0 }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: 0.75,
+        minWidth: 0,
+        '@container tender-card (min-width: 120px)': {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 1,
+          pr: 3,
+        },
+      }}
+    >
       {tender.icon === null ? null : (
         <Box component="span" aria-hidden sx={{ display: 'flex', color: 'primary.main' }}>
           {tender.icon}
         </Box>
       )}
-      <Typography component="span" sx={{ fontWeight: 500, overflowWrap: 'anywhere' }}>
+      <Typography component="span" sx={{ fontWeight: 500, overflowWrap: 'break-word' }}>
         {tender.label}
       </Typography>
     </Box>