From 91c2db8be640072f2895ec7de8ee0bacb6733ba5 Mon Sep 17 00:00:00 2001
From: Kayden Tebau <me@nullob.si>
Date: Fri, 24 Feb 2023 11:47:07 -0800
Subject: [PATCH] Tables are scrollable on small widths

---
 public/css/main.css                     | 6 ++++++
 templates/interface/landingPage.html.ep | 2 ++
 templates/interface/tokens.html.ep      | 4 +++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/public/css/main.css b/public/css/main.css
index 0caacf9..0e95b56 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -105,6 +105,7 @@ label.field-with-error {
 /* Tables */
 table {
     border-collapse: collapse;
+    width: 100%;
 }
 th, td {
     padding: 5px;
@@ -126,6 +127,11 @@ td:last-child {
     border-left: solid 2px currentColor;
 }
 
+/* Responsive */
+.responsive-wrapper {
+    overflow-x: auto;
+    width: 100%;
+}
 
 /* Light mode */
 @media (prefers-color-scheme: light) {
diff --git a/templates/interface/landingPage.html.ep b/templates/interface/landingPage.html.ep
index fc52f3e..837a853 100644
--- a/templates/interface/landingPage.html.ep
+++ b/templates/interface/landingPage.html.ep
@@ -22,6 +22,7 @@
 % if (scalar @$pins == 0) {
 	<p>Seems like there's nothing here.</p>
 % } else {
+	<div class="responsive-wrapper">
 	<table>
 		<tr>
 			<th>Filename</th>
@@ -42,6 +43,7 @@
 		</tr>
 % }
 	</table>
+	</div>
 % }
 
 % if (scalar @$pins == $limit) {
diff --git a/templates/interface/tokens.html.ep b/templates/interface/tokens.html.ep
index dad412c..0c26467 100644
--- a/templates/interface/tokens.html.ep
+++ b/templates/interface/tokens.html.ep
@@ -14,6 +14,7 @@
 % if (scalar @$tokens == 0) {
 	<p>Seems like there's nothing here.</p>
 % } else {
+	<div class="responsive-wrapper">
 	<table>
 		<tr>
 			<th>Token ID</th>
@@ -29,7 +30,8 @@
 				</td>
 			</tr>
 		% }
-</table>
+	</table>
+	</div>
 % }
 
 <a href="/my/tokens/generate">