From 4cf01387063fc807a710854ab1b9bd2fb95f102c Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 02:46:59 +0100
Subject: [PATCH] style: align settings header with sidebar header bar

- Change settings-header to settings-header-bar class
- Match styling of sidebar-header-bar (background, border, padding)
- Reduce title font size to match sidebar style
- Adjust padding and spacing for consistent visual alignment
- Settings header now appears on same visual line as sidebar buttons
---
 src/components/Settings.tsx |  2 +-
 src/index.css               | 22 ++++++++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 01b73253..13464f45 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -24,7 +24,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
 
   return (
     <div className="settings-view">
-      <div className="settings-header">
+      <div className="settings-header-bar">
         <h2>Settings</h2>
         <IconButton
           icon={faTimes}
diff --git a/src/index.css b/src/index.css
index 2323e83b..b0c8bbc8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1427,29 +1427,35 @@ body {
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-  padding: 1.5rem;
+  padding: 0.75rem 1rem;
   text-align: left;
 }
 
-.settings-header {
+.settings-header-bar {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
-  text-align: left;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 8px;
+  margin-bottom: 1rem;
 }
 
-.settings-header h2 {
+.settings-header-bar h2 {
   margin: 0;
-  font-size: 1.75rem;
+  font-size: 1.25rem;
+  font-weight: 600;
   text-align: left;
 }
 
 .settings-content {
   overflow-y: auto;
   flex: 1;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
   text-align: left;
+  padding: 0 0.25rem;
 }
 
 .setting-group {