Make overlay fullscreen on iPhone X (#95)

* Ignore top and bottom * Accommodate iPhone X units still running Safari 11.2
vaadin · Jun 17, 2019 · 0afc66f · 0afc66f
1 parent ac4a208
commit 0afc66f
Showing 1 changed file with 10 additions and 6 deletions.
diff --git a/theme/lumo/vaadin-login-overlay-styles.html b/theme/lumo/vaadin-login-overlay-styles.html
@@ -154,15 +154,19 @@
       and (device-height: 812px)
       and (-webkit-device-pixel-ratio: 3) {
         [part="card"] {
-          padding: 0 constant(safe-area-inset-bottom);
-          padding: 0 env(safe-area-inset-bottom);
+          padding-right: constant(safe-area-inset-right);
+          padding-right: env(safe-area-inset-right);
+
+          padding-left: constant(safe-area-inset-left);
+          padding-left: env(safe-area-inset-left);
         }
 
         [part="brand"] {
-          margin-left: calc(constant(safe-area-inset-bottom) * -1);
-          margin-left: calc(env(safe-area-inset-bottom) * -1);
-          padding-left: calc(var(--lumo-space-l) + constant(safe-area-inset-bottom));
-          padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-bottom));
+          margin-left: calc(constant(safe-area-inset-left) * -1);
+          margin-left: calc(env(safe-area-inset-left) * -1);
+
+          padding-left: calc(var(--lumo-space-l) + constant(safe-area-inset-left));
+          padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-left));
         }
       }
     </style>