From aa1b24cd7105ededff8718b437701fbb9b383667 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Sat, 4 Nov 2023 16:57:04 +0100
Subject: [PATCH] Make abuse reports scrollable in small screen

---
 svelte/src/admin_panel/AbuseReport.svelte  | 68 +++++++++++-----------
 svelte/src/admin_panel/AbuseReports.svelte |  4 +-
 2 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/svelte/src/admin_panel/AbuseReport.svelte b/svelte/src/admin_panel/AbuseReport.svelte
index 922881a..95543f7 100644
--- a/svelte/src/admin_panel/AbuseReport.svelte
+++ b/svelte/src/admin_panel/AbuseReport.svelte
@@ -71,44 +71,46 @@ let set_status = async (action, report_type) => {
 			></iframe>
 			{/if}
 		</div>
-		<table>
-			<tr>
-				<td>Time</td>
-				<td>IP</td>
-				<td>Type</td>
-				<td>Status</td>
-				<td colspan="2">Reports from this IP</td>
-			</tr>
-			{#each report.reports as user_report}
+		<div class="table_scroll">
+			<table>
 				<tr>
-					<td>{formatDate(user_report.time, true, true, false)}</td>
-					<td>{user_report.ip_address}</td>
-					<td>{user_report.type}</td>
-					<td>{user_report.status}</td>
-					<td>{ip_report_count[user_report.ip_address]}</td>
-					<td>
-						{#if can_grant}
-							<button on:click={() => dispatch("resolve_by_ip", {ip: user_report.ip_address, action: "grant"})}>
-								Accept all
-							</button>
-						{/if}
-						{#if can_reject}
-							<button on:click={() => dispatch("resolve_by_ip", {ip: user_report.ip_address, action: "reject"})}>
-								Ignore all
-							</button>
-						{/if}
-					</td>
+					<td>Time</td>
+					<td>IP</td>
+					<td>Type</td>
+					<td>Status</td>
+					<td colspan="2">Reports from this IP</td>
 				</tr>
-				{#if user_report.description !== ""}
+				{#each report.reports as user_report}
 					<tr>
-						<td>Description</td>
-						<td colspan="4" style="white-space: pre;">
-							{user_report.description}
+						<td>{formatDate(user_report.time, true, true, false)}</td>
+						<td>{user_report.ip_address}</td>
+						<td>{user_report.type}</td>
+						<td>{user_report.status}</td>
+						<td>{ip_report_count[user_report.ip_address]}</td>
+						<td>
+							{#if can_grant}
+								<button on:click={() => dispatch("resolve_by_ip", {ip: user_report.ip_address, action: "grant"})}>
+									Accept all
+								</button>
+							{/if}
+							{#if can_reject}
+								<button on:click={() => dispatch("resolve_by_ip", {ip: user_report.ip_address, action: "reject"})}>
+									Ignore all
+								</button>
+							{/if}
 						</td>
 					</tr>
-				{/if}
-			{/each}
-		</table>
+					{#if user_report.description !== ""}
+						<tr>
+							<td>Description</td>
+							<td colspan="5" style="white-space: pre-wrap; word-wrap: break-word;">
+								{user_report.description}
+							</td>
+						</tr>
+					{/if}
+				{/each}
+			</table>
+		</div>
 	</div>
 </Expandable>
 
diff --git a/svelte/src/admin_panel/AbuseReports.svelte b/svelte/src/admin_panel/AbuseReports.svelte
index eea38dc..40fa18b 100644
--- a/svelte/src/admin_panel/AbuseReports.svelte
+++ b/svelte/src/admin_panel/AbuseReports.svelte
@@ -139,7 +139,7 @@ const remove_report = (id = "") => {
 
 	// If a refresh is already scheduled we remove it and schedule a new one
 	clearTimeout(refresh_timeout)
-	refresh_timeout = setTimeout(get_reports, 5000)
+	refresh_timeout = setTimeout(get_reports, 10000)
 }
 
 onMount(() => {
@@ -151,6 +151,8 @@ onMount(() => {
 	endPicker.valueAsNumber = end.getTime()
 
 	get_reports()
+
+	return () => clearTimeout(refresh_timeout)
 });
 </script>