From 78879d7c14b2da90b3d0270ca1247d0c56337b13 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Thu, 7 May 2026 22:56:08 +0200
Subject: [PATCH] Refactor settings UI components and modal styling

---
 src/styles.css | 70 +++++++++++++++++++++++++++++++-------------------
 1 file changed, 44 insertions(+), 26 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index ea74fed..870aa3a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -52,15 +52,10 @@ body {
 .top-bar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   gap: 16px;
 }
 
-.top-actions {
-  display: flex;
-  gap: 10px;
-}
-
 .status-pill {
   display: inline-flex;
   align-items: center;
@@ -372,35 +367,55 @@ select {
   background: var(--surface);
 }
 
-.bottom-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  padding: 10px 12px;
-  background: var(--panel);
-  border: 1px solid var(--panel-edge);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgba(69, 10, 10, 0.28);
+  z-index: 10;
 }
 
-.input-group {
+.settings-window {
+  width: min(560px, 92vw);
+  padding: 20px;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  box-shadow: var(--dialog-shadow);
+}
+
+.settings-header {
   display: flex;
   align-items: center;
-  gap: 8px;
-  flex: 1 1 220px;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 18px;
 }
 
-.input-group label {
+.settings-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: var(--accent);
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: 130px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px 14px;
+}
+
+.settings-grid label {
   font-size: 12px;
   font-weight: 600;
   color: var(--muted);
-  min-width: 90px;
 }
 
-.input-group input,
-.input-group select {
-  flex: 1;
-  min-width: 140px;
+.settings-grid input,
+.settings-grid select {
+  width: 100%;
+  min-width: 0;
 }
 
 @media (max-width: 1100px) {
@@ -411,12 +426,15 @@ select {
 
 @media (max-width: 720px) {
   .top-bar {
-    flex-direction: column;
-    align-items: flex-start;
+    justify-content: flex-start;
   }
 
   .table-header,
   .table-row {
     grid-template-columns: 1.2fr 1.8fr 0.6fr 0.6fr 0.6fr;
   }
+
+  .settings-grid {
+    grid-template-columns: 1fr;
+  }
 }