Fix changes page column alignment and overflow

Author: StanFromIreland

codespeed/static/css/main.css

@@ -228,16 +228,15 @@ div#configbar span.options { padding-right: 1.8em; font-size: 0.9em; white-space
 div#configbar input { margin-right: 0; vertical-align: middle; }
 div#configbar select { margin: 0 0.3em; }
 
+div#contentnav { display: flex; gap: 1em; margin-bottom: 0.5em; }
 div#contentnav a {
     display: inline-flex;
     align-items: center;
     gap: 0.3em;
     font-size: 0.9em;
-    padding-bottom: 0.25em;
 }
 div#contentnav a svg { width: 1.1em; height: 1.1em; }
-div#contentnav #previous { float: left; }
-div#contentnav #next { float: right; }
+div#contentnav #next { margin-left: auto; }
 
 div#content, div.about_content {
     margin-left: calc(var(--sidebar-width) + 0.8em);
@@ -311,12 +310,17 @@ div#historical-plot { width: 600px; height: 400px; margin: 0 auto; }
 div#historical p { padding-left: 0; }
 div#historical p.plot-caption { font-size: 0.9em; color: var(--text-muted); }
 
-/* Changes page layout */
-div#contentwrap { display: table; table-layout: fixed; width: 100%; }
-div#contentwrap div { display: table-cell; }
-div#contentwrap div.leftcolumn { width: 65%; }
-div#contentwrap div.rightcolumn { padding-left: 0.8em; width: 35%; }
-div#contentwrap div div { display: block; }
+/* Changes page layout: previous/next navigation across the top, the
+   results table on the left and the revision details on the right */
+div#contentwrap {
+    display: grid;
+    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
+    column-gap: 0.8em;
+    align-items: start;
+}
+div#contentwrap > div { grid-column: 1 / -1; }
+div#contentwrap > div.leftcolumn { grid-column: 1; }
+div#contentwrap > div.rightcolumn { grid-column: 2; }
 
 /* Tables */
 table.tablesorter, table.info, table.revision, table.reports {
@@ -347,7 +351,7 @@ table.reports tr:first-child td { border-top: 0; }
 table.reports td:not(:first-child) { white-space: nowrap; }
 table.reports tr.status-none td.summary { opacity: 0.5; }
 
-table.tablesorter { margin-right: 0.8em; margin-bottom: 0.8em; }
+table.tablesorter { margin-bottom: 0.8em; }
 table.tablesorter thead tr th {
     padding: 0.5em 14px 0.5em 0.5em;
     width: 5em;
@@ -420,7 +424,7 @@ table.tablesorter tbody tr.highlight td, tr.highlight td {
 
 table.revision { table-layout: fixed; }
 table.revision col:first-child, table.info col:first-child { width: 5.3em; }
-table.info { margin-bottom: 1em; }
+table.info, table.revision { margin-bottom: 1em; }
 table.info th, table.revision th {
     background-color: var(--surface-alt);
     vertical-align: top;
@@ -559,7 +563,6 @@ div.footer a:hover { color: var(--accent); text-decoration: underline; }
 @media only screen and (max-width: 1100px) {
     :root { --sidebar-width: 12.5em; }
     div#container { padding: 0 0.5em; }
-    div#contentwrap div.leftcolumn { width: 65%; }
 }
 
 @media only screen and (max-width: 1090px) {
@@ -568,8 +571,8 @@ div.footer a:hover { color: var(--accent); text-decoration: underline; }
 }
 
 @media only screen and (max-width: 1005px) {
-    div#contentwrap div { display: table-row !important; }
-    table.info { margin-bottom: 0.8em; }
+    div#contentwrap { grid-template-columns: minmax(0, 1fr); }
+    div#contentwrap > div.leftcolumn, div#contentwrap > div.rightcolumn { grid-column: 1; }
     div#title { min-height: 48px; margin-bottom: 0.6em; }
     div#title img { height: 32px; }
     div#title h2 { font-size: 1em; }

codespeed/templates/codespeed/changes_data.html

@@ -1,3 +1,9 @@
+<div id="contentnav">
+  {% comment %}Arrows are Bootstrap Icons arrow-left / arrow-right (MIT, twbs/icons){% endcomment %}
+  {% if prev %}<a id="previous" href="#" data-revision="{{ prev.rev }}" data-desc="{{ prev.desc }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/></svg>{{ prev.short_rev }}{% if prev.summary %} ({{ prev.summary }}){% endif %}</a>{% endif %}
+  {% if next %}<a id="next" href="#" data-revision="{{ next.rev }}" data-desc="{{ next.desc }}">{{ next.short_rev }}{% if next.summary %} ({{ next.summary }}){% endif %}<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/></svg></a>{% endif %}
+</div>
+
 <div class="leftcolumn">
 {% include 'codespeed/changes_table.html' %}
 </div>

codespeed/templates/codespeed/changes_table.html

@@ -1,11 +1,5 @@
 {% load percentages %}
 
-<div id="contentnav">
-  {% comment %}Arrows are Bootstrap Icons arrow-left / arrow-right (MIT, twbs/icons){% endcomment %}
-  {% if prev %}<a id="previous" href="#" data-revision="{{ prev.rev }}" data-desc="{{ prev.desc }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/></svg>{{ prev.short_rev }}{% if prev.summary %} ({{ prev.summary }}){% endif %}</a>{% endif %}
-  {% if next %}<a id="next" href="#" data-revision="{{ next.rev }}" data-desc="{{ next.desc }}">{{ next.short_rev }}{% if next.summary %} ({{ next.summary }}){% endif %}<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/></svg></a>{% endif %}
-</div>
-
 {% for units in tablelist %}
 <table class="tablesorter" data-lessisbetter="{{ units.lessisbetter }}">
 <thead>