Tweak styling

public/css/app.css

@@ -38,6 +38,35 @@ details h2 {
     display: inline;
 }
 
+details {
+    border-top: 1px solid black;
+    padding: 1em 0;
+}
+
+details[open] summary {
+    margin-bottom: 1em;
+}
+
+#checkinList li:first-child details {
+    border-top: none;
+}
+
+.leaflet-popup {
+    max-width: 85vw;
+    max-height: 85vh;
+    min-width: 60vw;
+}
+
+.leaflet-popup-content {
+    width: auto !important;
+}
+
+.popup__image {
+    width: auto;
+    height: auto;
+    max-width: 70vw;
+}
+
 @media screen and (min-width: 1024px) {
     #routeContainer {
         grid-template-columns: 3fr 1fr;
@@ -52,15 +81,13 @@ details h2 {
     #checkinList {
         grid-column-start: 2;
     }
-}
-
-
-.leaflet-popup-content {
-    width: auto !important;
-}
-
-.popup__image {
-    max-width: 500px;
-    max-height: 400px;
+
+    .leaflet-popup {
+        min-width: 350px;
+    } 
+
+    .popup__image {
+        max-width: 50vw;
+    }
 }