From a037b65aad5cfc0477322a8f36105b9009366ec2 Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartin.dev>
Date: Mon, 3 May 2021 16:43:11 -0400
Subject: [PATCH] fix(modal): add additional padding to toolbars in iOS modal
 (#23262)

Resolves #22778
---
 core/src/css/core.scss | 34 +++++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index c171eafff8..0dbe43c1ae 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -32,11 +32,35 @@ body.backdrop-no-scroll {
 
 // Modal - Card Style
 // --------------------------------------------------
-// The card style does not reach all the way to
-// the top of the screen, so there does not need
-// to be any safe area padding added
-html.ios ion-modal.modal-card .ion-page > ion-header > ion-toolbar:first-of-type {
-  padding-top: 0px;
+/**
+ * Card style modal needs additional padding on the 
+ * top of the header. We accomplish this by targeting
+ * the first toolbar in the header.
+ * Footer also needs this. We do not adjust the bottom
+ * padding though because of the safe area.
+ */
+html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
+html.ios ion-modal ion-footer ion-toolbar:first-of-type {
+  padding-top: 6px;
+}
+
+/**
+* Card style modal needs additional padding on the 
+* bottom of the header. We accomplish this by targeting
+* the last toolbar in the header.
+*/
+html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type {
+  padding-bottom: 6px;
+}
+
+/**
+* Add padding on the left and right
+* of toolbars while accounting for
+* safe area values when in landscape.
+*/
+html.ios ion-modal ion-toolbar {
+  padding-right: calc(var(--ion-safe-area-right) + 8px);
+  padding-left: calc(var(--ion-safe-area-left) + 8px);
 }
 
 // .ion-page needs to explicitly inherit