Fix view styling

public/css/app.css

@@ -44,10 +44,13 @@ details h2 {
 .other-links {
     display: block;
     margin: auto;
+    overflow: auto;
 }
 
 .other-links ul {
     list-style: none;
+    margin: 0 auto;
+    width: fit-content;
 }
 
 .other-links li {
@@ -58,6 +61,7 @@ details h2 {
 .trip-meta {
     display: block;
     width: 100%;
+    text-align: center;
 }
 
 .main--list {
@@ -74,14 +78,19 @@ details h2 {
     }
 }
 
-#map { 
-    height: 400px;
+#mapContainer {
     grid-column-start: 1;
     grid-column-end: 3;
+    @media screen and (min-width: 1024px) {
+        grid-column-end: 2;
+    }
+}
+
+#map { 
+    height: 400px;
     @media screen and (min-width: 1024px) {
         height: auto;
         min-height: 800px;
-        grid-column-end: 2;
     }
 }
 

resources/views/tracker.blade.php

@@ -37,17 +37,19 @@
         </header>
 
         <main id="routeContainer">
+            <section id="mapContainer">
                 <div id="map"></div>
+            </section>
             <section id="checkinList">
                 <ol start="{{ count($trip->checkins) }}" reversed>
                 @foreach(array_slice(array_reverse($trip->checkins), 0, 15) as $checkin)
-                <li n>
+                    <li>
                         <details id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
                             <summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ date('j M Y (G:H)', strtotime($checkin->date)) }}</span></summary>
                             {{ $checkin->note ?? "[No note]" }}
-@if($checkin->image_url)
-<img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">
-@endif
+    @if($checkin->image_url)
+    <img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">
+    @endif
                         </details>
                     </li>
                 @endforeach