From 8c201d5c2e2af36335ce7e462dc5883e48546a2f Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Fri, 21 Nov 2025 22:45:58 +0000
Subject: [PATCH] fix: Conditionally render error details to avoid layout gap

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 webclient/src/Article.js | 12 +++++++-----
 webclient/src/Feed.js    | 10 ++++++----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/webclient/src/Article.js b/webclient/src/Article.js
index 1aec47e..d2e6493 100644
--- a/webclient/src/Article.js
+++ b/webclient/src/Article.js
@@ -57,11 +57,13 @@ function Article({ cache }) {
 
 	return (
 		<div className='article-container'>
-			<details style={{marginBottom: '1rem', visibility: error ? 'visible' : 'hidden'}}>
-				<summary>Connection error? Click to expand.</summary>
-				<p>{error}</p>
-				{story && <p>Loaded article from cache.</p>}
-			</details>
+			{error &&
+				<details style={{marginBottom: '1rem'}}>
+					<summary>Connection error? Click to expand.</summary>
+					<p>{error}</p>
+					{story && <p>Loaded article from cache.</p>}
+				</details>
+			}
 			{story ?
 				<div className='article'>
 					<Helmet>
diff --git a/webclient/src/Feed.js b/webclient/src/Feed.js
index 4c035e1..3482355 100644
--- a/webclient/src/Feed.js
+++ b/webclient/src/Feed.js
@@ -96,10 +96,12 @@ function Feed({ updateCache }) {
 				<title>QotNews</title>
 				<meta name="robots" content="index" />
 			</Helmet>
-			<details style={{marginBottom: '1rem', visibility: error ? 'visible' : 'hidden'}}>
-				<summary>Connection error? Click to expand.</summary>
-				<p>{error}</p>
-			</details>
+			{error &&
+				<details style={{marginBottom: '1rem'}}>
+					<summary>Connection error? Click to expand.</summary>
+					<p>{error}</p>
+				</details>
+			}
 			{stories ?
 				<div>
 					{stories.map(x =>