Makes tables scrollable

res/include/style/layout.css

@@ -331,8 +331,18 @@ table:not(.form) {
 	border-collapse: collapse;
 	width: 100%;
 }
+.table_scroll {
+	width: 100%;
+	overflow-x: auto;
+	overflow-y: hidden;
+    white-space: nowrap;
+}
+.table_scroll > table {
+	min-width: 100%;
+}
+
 tr:not(.form)    {border-bottom: 1px var(--layer_2_color_border) solid;}
-tr > td, tr > th {padding: 0.4em;}
+tr > td, tr > th {padding: 0.3em 0.6em;}
 @media(max-width: 30em) {
 	/* Forms will be stacked on small screens */
 	tr.form > td {

svelte/src/admin_panel/AbuseReporters.svelte

@@ -133,6 +133,7 @@ onMount(get_reporters);
 
 	<br/>
 
+	<div class="table_scroll">
 		<table style="text-align: left;">
 			<tr>
 				<td>E-mail</td>
@@ -159,6 +160,7 @@ onMount(get_reporters);
 				</tr>
 			{/each}
 		</table>
+	</div>
 </div>
 
 <style>

svelte/src/admin_panel/IPBans.svelte

@@ -139,6 +139,7 @@ onMount(get_bans);
 
 	<br/>
 
+	<div class="table_scroll">
 		<table style="text-align: left;">
 			<tr>
 				<td>Address</td>
@@ -156,13 +157,14 @@ onMount(get_bans);
 					<td>{formatDate(row.expire_time, true, true, false)}</td>
 					<td>{row.offences}</td>
 					<td>
-					<button on:click|preventDefault={() => {delete_ban(row.address)}} class="button button_red">
+						<button on:click|preventDefault={() => {delete_ban(row.address)}} class="button button_red round">
 							<i class="icon">delete</i>
 						</button>
 					</td>
 				</tr>
 			{/each}
 		</table>
+	</div>
 </div>
 
 <style>

svelte/src/user_home/APIKeys.svelte

@@ -112,6 +112,7 @@ const logout = async (key) => {
 			your keys.
 		</p>
 	</div>
+	<div class="table_scroll">
 		<table style="text-align: left;">
 			<tr>
 				<td>Key</td>
@@ -127,7 +128,7 @@ const logout = async (key) => {
 					<td>{formatDate(row.last_used_time, true, true, false)}</td>
 					<td>{row.creation_ip_address}</td>
 					<td>
-					<button on:click|preventDefault={() => {logout(row.auth_key)}} class="button button_red">
+						<button on:click|preventDefault={() => {logout(row.auth_key)}} class="button button_red round">
 							<i class="icon">delete</i>
 						</button>
 					</td>
@@ -137,6 +138,7 @@ const logout = async (key) => {
 				</tr>
 			{/each}
 		</table>
+	</div>
 </div>
 
 <style>

svelte/src/user_home/Router.svelte

@@ -24,6 +24,7 @@ onMount(() => {
 </script>
 
 <div>
+	<div class="tab_bar">
 		<a class="button tab"
 			href="/user"
 			class:button_highlight={page === ""}
@@ -45,6 +46,7 @@ onMount(() => {
 			<i class="icon">vpn_key</i>
 			API keys
 		</a>
+	</div>
 	<hr/>
 
 	{#if page === ""}