Improve design for small screen use

nummi/main/static/main/css/main.css

@@ -70,6 +70,7 @@ main {
 	padding: 2rem;
 	grid-column: 2;
 	grid-row: 1;
+	overflow-x: hidden;
 }
 nav {
 	grid-column: 1;
@@ -94,6 +95,7 @@ nav h1 img {
 nav ul {
 	list-style: none;
 	padding: 0;
+	margin: 0;
 	position: relative;
 }
 nav .skip-link {
@@ -125,3 +127,13 @@ main > :first-child {
 	font-weight: 650;
 	text-decoration: underline dotted;
 }
+
+@media (width < 1024px) {
+	body {grid-template-columns: 1fr}
+	nav, main {
+		grid-column: 1;
+		grid-row: auto;
+		position: relative;
+		height: initial;
+	}
+}

nummi/main/static/main/css/plot.css

@@ -1,4 +1,5 @@
 table.full-width col.bar {width: auto}
+.plot {overflow-x: auto}
 
 .plot td.bar {
 	position: relative;
@@ -46,3 +47,7 @@ table.full-width col.bar {width: auto}
 }
 .plot td.bar.p div.tot span {left: 0}
 .plot td.bar.m div.tot span {right: 0}
+
+@media (width < 720px) {
+	.plot .bar {width: 0;overflow: hidden}
+}

nummi/main/static/main/css/table.css

@@ -1,6 +1,5 @@
-table {
+.table {overflow-x: auto}
-	border-collapse: collapse;
+table {border-collapse: collapse}
-}
 table.more tbody:last-child tr:last-child {
 	border-bottom: .1rem dashed var(--gray);
 }

nummi/main/templates/main/table/snapshot.html

@@ -1,6 +1,6 @@
 {% load main_extras %}
 {% load i18n %}
-<div id="snapshots">
+<div id="snapshots" class="table">
     {% if new_snapshot_url %}
         <p>
             <a href="{{ new_snapshot_url }}">{% translate "New statement" %}</a>

nummi/main/templates/main/table/transaction.html

@@ -1,6 +1,6 @@
 {% load main_extras %}
 {% load i18n %}
-<div id="transactions">
+<div id="transactions" class="table">
     {% if new_transaction_url %}
         <p>
             <a href="{{ new_transaction_url }}">{% translate "New transaction" %}</a>