Fix mobile checkout zoom and always show quantity +/- controls

e2e/pages/checkout.page.ts

@@ -13,12 +13,6 @@ export interface BuyerDetails {
 export async function setWidgetQuantity(scope: Locator | FrameLocator | CheckoutSurface, quantity: number): Promise<void> {
   const selector = scope.locator('.hi-product-quantity-selector').first();
   const input = selector.locator('input');
-  if (!(await input.isVisible())) {
-    if (quantity === 0) {
-      return;
-    }
-    await selector.getByRole('button', { name: 'Increase quantity' }).click();
-  }
   await input.fill(String(quantity));
   if (quantity !== 0) {
     await input.blur();

e2e/tests/checkout/addon-checkout.spec.ts

@@ -44,7 +44,7 @@ test.describe('add-on checkout', () => {
 
     await checkout.setQuantityForProduct('Festival Ticket', 0);
     await expect(page.getByText('Add Festival Ticket first')).toBeVisible();
-    await expect(page.locator('.hi-product-addon').filter({ hasText: 'Parking Pass' }).locator('input')).toBeHidden();
+    await expect(page.locator('.hi-product-addon').filter({ hasText: 'Parking Pass' }).locator('input')).toHaveValue('0');
 
     await checkout.setQuantityForProduct('Festival Ticket', 1);
     await checkout.setAddonQuantity('Parking Pass', 1);

frontend/public/widget.js

@@ -182,8 +182,10 @@
             iframe.src = src;
 
             const applySizing = () => {
-                const vw = window.innerWidth;
-                const vh = (window.visualViewport && window.visualViewport.height) || window.innerHeight;
+                const vv = window.visualViewport;
+                const hasViewport = !!(vv && vv.width && vv.height);
+                const vw = hasViewport ? vv.width * vv.scale : window.innerWidth;
+                const vh = hasViewport ? vv.height * vv.scale : window.innerHeight;
 
                 if (vw <= MOBILE_BREAKPOINT) {
                     bs.alignItems = 'stretch';

frontend/src/components/common/NumberSelector/NumberSelector.module.scss

@@ -10,12 +10,6 @@
   padding: 3px;
   background: var(--hi-card-bg, transparent);
   transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  &[data-empty] {
-    border-color: transparent;
-    background: transparent;
-    padding: 0;
-  }
 }
 
 .control {
@@ -76,19 +70,23 @@
   font-size: 14px !important;
   font-variant-numeric: tabular-nums;
   color: var(--hi-text, inherit) !important;
+
+  @media (hover: none) and (pointer: coarse) {
+    font-size: 16px !important;
+  }
 }
 
 .compact {
   min-height: 33px;
   padding: 2px;
 
-  &[data-empty] {
-    padding: 0;
-  }
-
   .input {
     min-width: 28px;
     width: 28px;
     font-size: 13px !important;
+
+    @media (hover: none) and (pointer: coarse) {
+      font-size: 16px !important;
+    }
   }
 }

frontend/src/components/common/NumberSelector/index.tsx

@@ -90,45 +90,36 @@ export const NumberSelector = ({formInstance, fieldName, min, max, sharedValues,
         increment();
     };
 
-    const isEmpty = value === 0;
-    const buttonSize = selectorSize === 'compact'
-        ? (isEmpty ? 30 : 26)
-        : (isEmpty ? 38 : 30);
-    const iconSize = selectorSize === 'compact'
-        ? (isEmpty ? 14 : 13)
-        : (isEmpty ? 16 : 15);
+    const buttonSize = selectorSize === 'compact' ? 26 : 30;
+    const iconSize = selectorSize === 'compact' ? 13 : 15;
 
     return (
-        <div className={classNames(classes.wrapper, 'button-input', selectorSize === 'compact' && classes.compact)}
-             data-empty={value === 0 || undefined}>
-            {value > 0 && (
-                <>
-                    <ActionIcon
-                        size={buttonSize}
-                        radius={999}
-                        variant={'transparent'}
-                        onClick={decrement}
-                        aria-label={t`Decrease quantity`}
-                        onMouseDown={(event) => event.preventDefault()}
-                        className={classNames(classes.control, classes.decrement)}
-                    >
-                        <IconMinus size={iconSize} stroke={2}/>
-                    </ActionIcon>
-
-                    <NumberInput
-                        mb={0}
-                        variant="unstyled"
-                        min={minValue}
-                        max={maxValue}
-                        handlersRef={handlers}
-                        value={value}
-                        hideControls
-                        onChange={(newValue) => changeValue(Number(newValue) || 0)}
-                        aria-label={t`Quantity`}
-                        classNames={{input: classes.input}}
-                    />
-                </>
-            )}
+        <div className={classNames(classes.wrapper, 'button-input', selectorSize === 'compact' && classes.compact)}>
+            <ActionIcon
+                size={buttonSize}
+                radius={999}
+                variant={'transparent'}
+                onClick={decrement}
+                disabled={value === 0}
+                aria-label={t`Decrease quantity`}
+                onMouseDown={(event) => event.preventDefault()}
+                className={classNames(classes.control, classes.decrement)}
+            >
+                <IconMinus size={iconSize} stroke={2}/>
+            </ActionIcon>
+
+            <NumberInput
+                mb={0}
+                variant="unstyled"
+                min={minValue}
+                max={maxValue}
+                handlersRef={handlers}
+                value={value}
+                hideControls
+                onChange={(newValue) => changeValue(Number(newValue) || 0)}
+                aria-label={t`Quantity`}
+                classNames={{input: classes.input}}
+            />
 
             <ActionIcon
                 size={buttonSize}

frontend/src/embed/widget.js

@@ -182,8 +182,10 @@
             iframe.src = src;
 
             const applySizing = () => {
-                const vw = window.innerWidth;
-                const vh = (window.visualViewport && window.visualViewport.height) || window.innerHeight;
+                const vv = window.visualViewport;
+                const hasViewport = !!(vv && vv.width && vv.height);
+                const vw = hasViewport ? vv.width * vv.scale : window.innerWidth;
+                const vh = hasViewport ? vv.height * vv.scale : window.innerHeight;
 
                 if (vw <= MOBILE_BREAKPOINT) {
                     bs.alignItems = 'stretch';

frontend/src/styles/global.scss

@@ -85,6 +85,14 @@ a {
   padding-bottom: 0 !important;
 }
 
+@media (hover: none) and (pointer: coarse) {
+  input.mantine-Input-input,
+  textarea.mantine-Input-input,
+  select.mantine-Input-input {
+    font-size: 16px;
+  }
+}
+
 .mantine-Modal-content {
   @include mixins.scrollbar();
 }