Handle notch / Dynamic Island on iPhone

(cherry picked from commit 87cd118)

style.scss

@@ -165,6 +165,10 @@ body {
   min-height: 100vh;
   margin: 0;
   padding: 8px;
+
+  // Handle notch / dynamic island
+  padding-left: max(8px, env(safe-area-inset-left));
+  padding-right: max(8px, env(safe-area-inset-right));
 }
 
 h1,
@@ -230,7 +234,7 @@ footer {
   background-color: rgb(0, 0, 0, 0.25);
   width: 100vw;
   margin-top: 1em;
-  margin-left: -8px;
+  margin-left: min(-8px, calc(env(safe-area-inset-left) * -1));
 
   & > * {
     display: inline-block;
@@ -246,7 +250,7 @@ footer {
 
 hr {
   width: 100vw;
-  margin-left: -8px;
+  margin-left: min(-8px, calc(env(safe-area-inset-left) * -1));
 }
 
 .paper {
@@ -394,6 +398,10 @@ hr {
 .result {
   margin-bottom: 0.5em;
 
+  summary {
+    word-break: break-all;
+  }
+
   .result-value {
     font-weight: bold;
 

views/layout.ejs

@@ -12,7 +12,7 @@ See the LICENSE file for copyright details
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <meta name="description" content="Web API and CSS property feature detections to assist the @mdn/browser-compat-data project.">
 
     <!-- Favicon -->