From abcbf3fddce688ae8463155c8c37c7b67402ffaa Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Mon, 12 Feb 2024 17:24:00 +0100
Subject: [PATCH] Add pagination to saves list (#592)

Prevent the saves list from pushing the console and config off the
screen by turning on the pagination for it.
---
 CHANGELOG.md                                 | 4 ++++
 packages/web_ui/src/components/SavesList.tsx | 2 +-
 packages/web_ui/src/style.css                | 9 +++++++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 485f1130..a23be684 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Version 2.0.0-alpha.17
 
+### Features
+
+- Added pagination to the saves list.
+
 ### Changes
 
 - Fixed an unhandled error in Subspace Storage crashing the host.
diff --git a/packages/web_ui/src/components/SavesList.tsx b/packages/web_ui/src/components/SavesList.tsx
index 2cbe4c8e..92ce287c 100644
--- a/packages/web_ui/src/components/SavesList.tsx
+++ b/packages/web_ui/src/components/SavesList.tsx
@@ -207,6 +207,7 @@ export default function SavesList(props: { instance: lib.InstanceDetails }) {
 
 	let hostOffline = ["unassigned", "unknown"].includes(props.instance.status!);
 	const saveTable = <Table
+		className="save-list-table"
 		size="small"
 		columns={[
 			{
@@ -236,7 +237,6 @@ export default function SavesList(props: { instance: lib.InstanceDetails }) {
 		]}
 		dataSource={[...saves.values()]}
 		rowKey={save => save.name}
-		pagination={false}
 		expandable={{
 			columnWidth: 33,
 			expandRowByClick: true,
diff --git a/packages/web_ui/src/style.css b/packages/web_ui/src/style.css
index 7fa95675..3cd12ed2 100644
--- a/packages/web_ui/src/style.css
+++ b/packages/web_ui/src/style.css
@@ -182,10 +182,19 @@ body {
 	white-space: pre-wrap;
 }
 
+.save-list-dragger .ant-upload.ant-upload-drag {
+	border: none;
+	background: none;
+}
+
 .save-list-dragger .ant-upload.ant-upload-btn {
 	padding: 0;
 }
 
+.save-list-table .ant-table-pagination.ant-pagination {
+	margin-bottom: 0;
+}
+
 .rcon-result code {
 	display: block;
 	background: #000;