From c50b78d4a9e03fe998a1363a23897c9a7b1c9741 Mon Sep 17 00:00:00 2001
From: Paul Dempsey <76729591+paul-daniel-dempsey@users.noreply.github.com>
Date: Wed, 18 Oct 2023 09:47:27 +0100
Subject: [PATCH] applePay button children area widened at mobile breakpoint

---
 packages/modules/src/modules/epics/ButtonApplePay.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/modules/src/modules/epics/ButtonApplePay.tsx b/packages/modules/src/modules/epics/ButtonApplePay.tsx
index 314412cf0..f8d30b203 100644
--- a/packages/modules/src/modules/epics/ButtonApplePay.tsx
+++ b/packages/modules/src/modules/epics/ButtonApplePay.tsx
@@ -4,6 +4,7 @@ import { palette } from '@guardian/src-foundations';
 import { ThemeProvider } from '@emotion/react';
 import { LinkButton } from '@guardian/src-button';
 import type { ReactComponent } from '../../types';
+import { from } from '@guardian/src-foundations/mq';
 
 type LinkButtonColourStyles = {
     text: string;
@@ -42,10 +43,15 @@ type Props = {
 const linkButtonColorStyles = (buttonStyles: LinkButtonColourStyles): SerializedStyles => css`
     width: 100%;
     justify-content: center;
+    padding: 0 10px;
     border: 1px solid ${buttonStyles.border}!important;
     background-color: ${buttonStyles.background} !important;
     color: ${buttonStyles.text} !important;
 
+    ${from.mobileMedium} {
+        padding: 0 20px;
+    }
+
     :hover {
         background-color: ${buttonStyles.hover} !important;
     }