From fcb78b98033e0c4fa42baeb9ddcced3cb966dd4c Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Sat, 3 Jan 2026 00:19:12 +0000
Subject: [PATCH] style: Add spacing to settings modal for readability

---
 webclient/src/App.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/webclient/src/App.js b/webclient/src/App.js
index 01a1bf7..ff79797 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -181,6 +181,7 @@ function App() {
 				<div className="modal-overlay" onClick={() => setSettingsOpen(false)}>
 					<div className="modal-content" onClick={e => e.stopPropagation()}>
 						<h3>Settings</h3>
+
 						<div className="setting-group">
 							<h4>Theme</h4>
 							<button className={theme === '' ? 'active' : ''} onClick={() => { light() }}>Light</button>
@@ -197,6 +198,7 @@ function App() {
 								</div>
 							}
 						</div>
+
 						<div className="setting-group">
 							<h4>Feed</h4>
 							<div className="font-option">
@@ -221,6 +223,7 @@ function App() {
 								<label htmlFor="filter-tildes">Tildes</label>
 							</div>
 						</div>
+
 						<div className="setting-group">
 							<h4>Font Size</h4>
 							<button onClick={() => changeBodyFontSize(-0.05)}>-</button>
@@ -228,6 +231,7 @@ function App() {
 							<button onClick={() => changeBodyFontSize(0.05)}>+</button>
 							<button onClick={resetBodyFontSize} disabled={!bodyFontSettingsChanged}>Reset</button>
 						</div>
+
 						<div className="setting-group">
 							<h4>Body Font</h4>
 							<div className="font-option">
@@ -243,6 +247,7 @@ function App() {
 								<label htmlFor="body-apparatus">Apparatus SIL</label>
 							</div>
 						</div>
+
 						<div className="setting-group">
 							<h4>Article Font</h4>
 							<div className="font-option">
@@ -261,6 +266,7 @@ function App() {
 					</div>
 				</div>
 			}
+
 			{waitingWorker &&
 				<div className='update-banner'>
 					Client version mismatch, please refresh:{' '}