diff --git a/map.html b/map.html
index 6c4e38c..475b983 100644
--- a/map.html
+++ b/map.html
@@ -31,10 +31,36 @@
             top: 10px;
             text-shadow: 0 0 2px white;
         }
+        .leaflet-popup-content-wrapper {
+            height: min(800px, 60vh);
+            overflow-y: auto;
+        }
+        #popupcontainer {
+            position: relative;
+            z-index: 1000;
+        }
+        #popupcontainer .leaflet-popup-content-wrapper {
+            height: unset;
+        }
+        #popupcontainer .leaflet-popup {
+            transform: none !important;
+            position: fixed;
+            width: 100vw;
+            height: 100vh;
+            right: 0;
+            left: 0 !important;
+            top: 1em;
+            bottom: 1em !important;
+            overflow: auto;
+        }
+        #popupcontainer .leaflet-popup-content {
+            width: initial;
+        }
     </style>
 </head>
 <body>
     <div id="map"></div>
+    <div id="popupcontainer" class="leaflet-container"></div>
     <script>
         (async function() {
             const map = L.map('map').setView([94.505, -0.09], 13);
@@ -90,7 +116,14 @@
                         <img style="width: min(80vw, 300px);" src="images/${stand.image}">
                         ${attributesString}
                     `;
-                    marker.bindPopup(popupContentWrapper);
+                    let popupOptions = {};
+                    // TODO: evaluate this when creating popup instead of at
+                    // page instantiation time -- if the page is resized, this
+                    // won't keep up with those changes.
+                    if (window.visualViewport.width < 600) {
+                        popupOptions.pane = document.getElementById('popupcontainer');
+                    }
+                    marker.bindPopup(popupContentWrapper, popupOptions);
                 }
             }
 
