Adding meta viewport to make examples look OK on mobile (mdn#217)

chrisdavidmills · web-flow · commit 9703a3fa6527 · 2023-05-09T08:45:10.000-07:00
diff --git a/popover-api/basic-declarative/index.html b/popover-api/basic-declarative/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Basic declarative popover example</title>
   </head>
   <body>
diff --git a/popover-api/blur-background/index.html b/popover-api/blur-background/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Blur background example</title>
     <style>
       body {
diff --git a/popover-api/multiple-auto/index.html b/popover-api/multiple-auto/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Multiple auto popovers example</title>
     <style>
       :popover-open {
diff --git a/popover-api/multiple-manual/index.html b/popover-api/multiple-manual/index.html
@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Multiple manual popovers example</title>
     <style>
       :popover-open {
         position: absolute;
         inset: unset;
-        top: 40px;
+        top: 80px;
       }
 
       #mypopup-1 {
@@ -26,6 +27,7 @@
     <button popovertarget="mypopup-1" popovertargetaction="hide">
       Hide popover #1
     </button>
+    <hr>
     <button popovertarget="mypopup-2" popovertargetaction="show">
       Show popover #2
     </button>
diff --git a/popover-api/nested-popovers/index.html b/popover-api/nested-popovers/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Nested popovers example</title>
     <style>
       body,
@@ -11,7 +12,7 @@
 
       body [popover] {
         border: 1px solid black;
-        width: 10vw;
+        width: 120px;
         inset: unset;
       }
 
@@ -21,7 +22,7 @@
       }
 
       #subpopover {
-        left: 10vw;
+        left: 120px;
         top: 86px;
       }
 
diff --git a/popover-api/popover-positioning/index.html b/popover-api/popover-positioning/index.html
@@ -1,15 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Popover positioning example</title>
     <style>
       :popover-open {
         width: 300px;
         height: 200px;
         position: absolute;
         inset: unset;
-        top: 5px;
+        bottom: 5px;
         right: 5px;
         margin: 0;
       }
diff --git a/popover-api/toast-popovers/index.html b/popover-api/toast-popovers/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Toast popovers example</title>
     <style>
       .failure {
diff --git a/popover-api/toggle-help-ui/index.html b/popover-api/toggle-help-ui/index.html
@@ -1,15 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Toggle help UI example</title>
     <style>
       :popover-open {
         position: absolute;
         inset: unset;
-        top: 5px;
+        bottom: 5px;
         right: 5px;
       }
+
+      @media all and (max-width: 600px) {
+        :popover-open {
+          left: 5px;
+        }
+      }
     </style>
     <script src="index.js" defer></script>
   </head>
