From fb2e24a77af805e7e7052994153df5df2a7da825 Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Thu, 10 Dec 2020 08:11:58 -0500 Subject: [PATCH] UX: Fix unreachable buttons on menus in Safari iOS (#11458) Safari overlays its own nav at the bottom 10% or so of the screen. This makes buttons in that area virtually unclickable, so to ensure buttons there are reachable, we need to add enough bottom padding to menu panels. --- app/assets/stylesheets/mobile/menu-panel.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss index 89837ffb96..95894ad691 100644 --- a/app/assets/stylesheets/mobile/menu-panel.scss +++ b/app/assets/stylesheets/mobile/menu-panel.scss @@ -33,5 +33,6 @@ } .panel-body-contents { - padding-bottom: env(safe-area-inset-bottom); + // 2em padding very useful for iOS Safari's overlayed bottom nav + padding-bottom: calc(env(safe-area-inset-bottom) + 2em); }