From 1443fdcc32932cf336d5180eb5f0de03d7c2730b Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Fri, 21 Nov 2025 00:59:12 +0000
Subject: [PATCH] style: Improve error messages and loading text, add spacing
 to error details

---
 webclient/src/Feed.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webclient/src/Feed.js b/webclient/src/Feed.js
index f5c10d9..c283fa9 100644
--- a/webclient/src/Feed.js
+++ b/webclient/src/Feed.js
@@ -60,7 +60,7 @@ function Feed({ updateCache }) {
 								errorMessage = `The request to fetch story '${newStory.title}' (${newStory.id}) timed out after 10 seconds. Your connection may be unstable.`;
 								console.log('Fetch timed out for story:', newStory.id);
 							} else {
-								errorMessage = `An error occurred while fetching story '${newStory.title}' (${newStory.id}): ${error.toString()}`;
+								errorMessage = `An error occurred while fetching story '${newStory.title}' (ID: ${newStory.id}): ${error.toString()}.`;
 								console.log('Fetch failed for story:', newStory.id, error);
 							}
 							setError(errorMessage);
@@ -79,7 +79,7 @@ function Feed({ updateCache }) {
 					setStories(finalStories);
 				},
 				(error) => {
-					const errorMessage = `Failed to fetch the main story list from the API. Your connection may be down or the server might be experiencing issues. Error: ${error.toString()}`;
+					const errorMessage = `Failed to fetch the main story list from the API. Your connection may be down or the server might be experiencing issues. ${error.toString()}.`;
 					setError(errorMessage);
 				}
 			);
@@ -92,7 +92,7 @@ function Feed({ updateCache }) {
 				<meta name="robots" content="index" />
 			</Helmet>
 			{error &&
-				<details>
+				<details style={{marginBottom: '1rem'}}>
 					<summary>Connection error? Click to expand.</summary>
 					<p>{error}</p>
 				</details>
@@ -116,7 +116,7 @@ function Feed({ updateCache }) {
 					)}
 				</div>
 			:
-				<p>loading...</p>
+				<p>Loading...</p>
 			}
 		</div>
 	);