Responsive on small screens

styles/01-styles.scss

@@ -191,6 +191,11 @@ input[type="submit"] {
     }
 }
 
+.overflow-x {
+    max-width: 100%;
+    overflow-x: auto;
+}
+
 .grid-2col {
     display: grid;
     grid-template-columns: auto 1fr;

styles/02-responsive.scss

@@ -0,0 +1,18 @@
+@media screen and (max-width:65rem) {
+
+    .sidebar {
+        width: 100%;
+        height: auto;
+        position: initial;
+        text-align: center;
+
+        .sidebar_search form {
+            width: 18em;
+            margin: auto;
+        }
+    }
+
+    .content {
+        margin-left: 0;
+    }
+}

views/index.ejs

@@ -9,24 +9,26 @@
     <%- include("navigation", locals) %>
     <div class="content">
         <h1>Build history</h1>
-        <table>
+        <div class="overflow-x">
-            <tr>
+            <table>
-                <th>Repo</th>
-                <th>Distro</th>
-                <th>Date Started</th>
-                <th>Build Duration</th>
-                <th>Build Status</th>
-            </tr>
-            <% builds.forEach(build => { %>
                 <tr>
-                    <td><a href="/build/<%= build.id %>"><%= build.repo %></a></td>
+                    <th>Repo</th>
-                    <td><%= build.distro %></td>
+                    <th>Distro</th>
-                    <td class="to-local-time"><%= build.startTime %></td>
+                    <th>Date Started</th>
-                    <td><%= timeElapsed(build.startTime, build.endTime) %></td>
+                    <th>Build Duration</th>
-                    <td><%= build.status %></td>
+                    <th>Build Status</th>
                 </tr>
-            <% }) %>
+                <% builds.forEach(build => { %>
-        </table>
+                    <tr>
+                        <td><a href="/build/<%= build.id %>"><%= build.repo %></a></td>
+                        <td><%= build.distro %></td>
+                        <td class="to-local-time"><%= build.startTime %></td>
+                        <td><%= timeElapsed(build.startTime, build.endTime) %></td>
+                        <td><%= build.status %></td>
+                    </tr>
+                <% }) %>
+            </table>
+        </div>
     </div>
     <%- include("footer", locals) %>
     <script src="/assets/js/timezone.js?v1" nonce="<%= cspNonce %>"></script>