From a0ea705aa93131427f60a3ddf7706d392bd569ba Mon Sep 17 00:00:00 2001 From: ronderksen Date: Sun, 23 Aug 2020 16:10:01 +0200 Subject: [PATCH 1/2] add padding to last item to fix iphone issue --- packages/@adobe/spectrum-css-temp/components/tray/index.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/@adobe/spectrum-css-temp/components/tray/index.css b/packages/@adobe/spectrum-css-temp/components/tray/index.css index 1c98570c420..96f90b2d6ec 100644 --- a/packages/@adobe/spectrum-css-temp/components/tray/index.css +++ b/packages/@adobe/spectrum-css-temp/components/tray/index.css @@ -66,6 +66,10 @@ transition: opacity var(--spectrum-dialog-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-dialog-exit-animation-delay), transform var(--spectrum-dialog-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-dialog-exit-animation-delay); + &:last-child { + padding-bottom: calc(env(safe-area-inset-bottom) + 8px); + } + &.is-open { @inherit: %spectrum-overlay--open; From 2693c26138e474380fa21d6726a7bca163142f50 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Wed, 26 Aug 2020 15:49:15 -0700 Subject: [PATCH 2/2] Remove extra 8px of padding Also, tray is always the last child of the tray wrapper element, so always adding the padding is fine. --- packages/@adobe/spectrum-css-temp/components/tray/index.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/tray/index.css b/packages/@adobe/spectrum-css-temp/components/tray/index.css index 96f90b2d6ec..f7e71eb484b 100644 --- a/packages/@adobe/spectrum-css-temp/components/tray/index.css +++ b/packages/@adobe/spectrum-css-temp/components/tray/index.css @@ -56,6 +56,7 @@ position: absolute; bottom: 0; outline: none; + padding-bottom: env(safe-area-inset-bottom); border-radius: var(--spectrum-tray-full-width-border-radius) var(--spectrum-tray-full-width-border-radius) var(--spectrum-tray-border-radius) var(--spectrum-tray-border-radius); @@ -66,10 +67,6 @@ transition: opacity var(--spectrum-dialog-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-dialog-exit-animation-delay), transform var(--spectrum-dialog-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-dialog-exit-animation-delay); - &:last-child { - padding-bottom: calc(env(safe-area-inset-bottom) + 8px); - } - &.is-open { @inherit: %spectrum-overlay--open;