From 63b8c759ba8306824dd1bf6c583028cbc04e0efc Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Sat, 4 Nov 2023 16:57:28 +0100
Subject: [PATCH] Make tax information scrollable on small screens

---
 res/static/style/layout.css                   |  2 +-
 .../src/admin_panel/MollieSettlement.svelte   | 74 ++++++++++---------
 2 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/res/static/style/layout.css b/res/static/style/layout.css
index c4bc2b9..2a53d36 100644
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -98,7 +98,7 @@ footer {
 }
 
 footer>.footer_content {
-	background-color: var(--body_background);
+	background: var(--body_background);
 	color: var(--body_text_color);
 	display: inline-block;
 	width: 1000px;
diff --git a/svelte/src/admin_panel/MollieSettlement.svelte b/svelte/src/admin_panel/MollieSettlement.svelte
index b66350b..acd5063 100644
--- a/svelte/src/admin_panel/MollieSettlement.svelte
+++ b/svelte/src/admin_panel/MollieSettlement.svelte
@@ -101,46 +101,48 @@ onMount(get_payments);
 
 
 <h3>Taxes per country</h3>
-<table>
-	<tr>
-		<td>Country</td>
-		<td>Payments</td>
-		<td>Amount</td>
-		<td>VAT</td>
-		<td>VAT%</td>
-		<td>Total</td>
-	</tr>
-	{#each Object.entries(per_country) as [country, row]}
-		<tr>
-			<td>{country}</td>
-			<td>{row.count}</td>
-			<td><Euro amount={row.amount}/></td>
-			<td><Euro amount={row.vat}/></td>
-			<td>{row.vat_fraction*100}%</td>
-			<td><Euro amount={row.vat+row.amount}/></td>
-		</tr>
-	{/each}
 
-	<tr>
-		<td>Total</td>
-		<td>{totals.count}</td>
-		<td><Euro amount={totals.amount}/></td>
-		<td><Euro amount={totals.vat}/></td>
-		<td></td>
-		<td><Euro amount={totals.vat+totals.amount}/></td>
-	</tr>
-	{#if per_country.NL}
+<div class="table_scroll">
+	<table>
 		<tr>
-			<td>Total - NL</td>
-			<td>{totals.count - per_country.NL.count}</td>
-			<td><Euro amount={totals.amount-per_country.NL.amount}/></td>
-			<td><Euro amount={totals.vat-per_country.NL.vat}/></td>
+			<td>Country</td>
+			<td>Payments</td>
+			<td>Amount</td>
+			<td>VAT</td>
+			<td>VAT%</td>
+			<td>Total</td>
+		</tr>
+		{#each Object.entries(per_country) as [country, row]}
+			<tr>
+				<td>{country}</td>
+				<td>{row.count}</td>
+				<td><Euro amount={row.amount}/></td>
+				<td><Euro amount={row.vat}/></td>
+				<td>{row.vat_fraction*100}%</td>
+				<td><Euro amount={row.vat+row.amount}/></td>
+			</tr>
+		{/each}
+
+		<tr>
+			<td>Total</td>
+			<td>{totals.count}</td>
+			<td><Euro amount={totals.amount}/></td>
+			<td><Euro amount={totals.vat}/></td>
 			<td></td>
-			<td><Euro amount={(totals.vat-per_country.NL.vat)+(totals.amount-per_country.NL.amount)}/></td>
+			<td><Euro amount={totals.vat+totals.amount}/></td>
 		</tr>
-	{/if}
-</table>
-
+		{#if per_country.NL}
+			<tr>
+				<td>Total - NL</td>
+				<td>{totals.count - per_country.NL.count}</td>
+				<td><Euro amount={totals.amount-per_country.NL.amount}/></td>
+				<td><Euro amount={totals.vat-per_country.NL.vat}/></td>
+				<td></td>
+				<td><Euro amount={(totals.vat-per_country.NL.vat)+(totals.amount-per_country.NL.amount)}/></td>
+			</tr>
+		{/if}
+	</table>
+</div>
 
 <h3>All payments ({payments.length})</h3>
 <div class="table_scroll">