Tables are scrollable on small widths

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) {

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) {

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">