From 5b5c1c4c0b93ea4dd07a11998e1ed51edec77a51 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Wed, 15 Oct 2025 15:03:19 +0200
Subject: [PATCH] design

---
 frontend/src/styles.css | 37 +++++++++++++++++++++++++------------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index be59efb..c67709c 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,9 +1,9 @@
 :root {
   color-scheme: light;
   /* Neutrals */
-  --bg: #f6f7f9;
-  --surface: #ffffff;
-  --surface-subtle: #fbfbfd;
+  --bg: #f6f6f6;
+  --surface: #fbfbfb;
+  --surface-subtle: #f3f3f3;
   --fg: #1e2127;
   --muted: #646a75;
   --border: #dde1e6;
@@ -260,8 +260,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   flex: 1;
   display: grid;
   grid-template-columns: 220px minmax(0, 1fr) 320px;
-  gap: 1.5rem;
-  padding: 0.75rem 1.5rem 1.25rem;
   min-height: 0;
   overflow: hidden;
 }
@@ -271,7 +269,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   display: grid;
   grid-template-columns: 220px minmax(0, 1fr);
   gap: 1.5rem;
-  padding: 0.75rem 1.5rem 1.25rem;
   min-height: 0;
   overflow: hidden;
 }
@@ -527,7 +524,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .column + .column {
   border-left: 1px solid var(--border);
-  padding-left: 0.6rem;
+  padding-left: 1.25rem;
 }
 
 .column-header {
@@ -595,8 +592,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.32rem;
-  padding: 0.35rem 0 0.55rem;
   min-height: 0;
 }
 
@@ -708,6 +703,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 .sidebar {
   gap: 0.28rem;
   overflow-y: auto;
+  padding: 1.25rem;
 }
 
 .sidebar-section:first-of-type,
@@ -778,6 +774,17 @@ button.icon-button.ghost:hover:not([disabled]) {
   color: currentColor;
 }
 
+
+.documents-panel {
+  padding: 1.25rem 1.25rem 0 1.25rem;
+  background-color: var(--surface);
+}
+
+.tags-panel,
+.correspondents-panel {
+  padding: 1.25rem;
+}
+
 .folder-row.is-drop-target {
   outline: 2px dashed var(--accent);
   outline-offset: 2px;
@@ -825,7 +832,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .documents-panel thead th {
   border-bottom: 1px solid var(--border);
-  background-color: var(--bg);
+  background-color: var(--surface);
   position: sticky;
   top: 0;
   z-index: 1;
@@ -1029,6 +1036,8 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .detail-panel {
   position: relative;
+  padding: 1.25rem;
+  overflow-y: auto;
 }
 
 .detail-panel .column-body {
@@ -1036,7 +1045,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 }
 
 .detail-panel .column-body.scrollable {
-  overflow-y: auto;
+  overflow: visible;
 }
 
 .detail-actions {
@@ -1389,6 +1398,7 @@ form.inline {
   }
   .detail-panel {
     grid-column: 1 / -1;
+    padding: 1.25rem;
   }
 }
 
@@ -1403,8 +1413,11 @@ form.inline {
   }
   .sidebar,
   .documents-panel,
-  .detail-panel {
+  .detail-panel,
+  .tags-panel,
+  .correspondents-panel {
     min-height: auto;
+    padding: 1.25rem;
   }
 }
 .login-screen {