From 7fbfe215affe0f89814d39c4043e288ae587f161 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Mon, 15 Jun 2026 16:54:41 +0200
Subject: [PATCH] Improve workflow list and sidebar styling

Updates include restructuring the main workflows container, enhancing the visual appearance of individual workflow items in the sidebar (adding borders, background colors, and spacing), and adjusting responsive layout rules.
---
 src/styles.css | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index a1c0082..f25efba 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2312,18 +2312,21 @@ input:checked + .slider:before {
 }
 
 .workflows-area {
-  display: grid;
-  grid-template-columns: 260px minmax(0, 1fr);
+  display: block;
   height: 100%;
   min-height: 0;
 }
 
 .workflow-list {
+  height: 100%;
   overflow: auto;
-  border-right: 1px solid var(--border);
   background: color-mix(in srgb, var(--panel) 92%, black);
 }
 
+.sidebar .workflow-list {
+  background: transparent;
+}
+
 .workflow-list-heading,
 .workflow-list-item,
 .workflow-editor-toolbar,
@@ -2344,6 +2347,10 @@ input:checked + .slider:before {
   background: var(--panel);
 }
 
+.sidebar .workflow-list-heading {
+  background: color-mix(in srgb, var(--panel) 96%, black);
+}
+
 .workflow-list-item {
   justify-content: space-between;
   padding: 12px 14px;
@@ -2351,10 +2358,22 @@ input:checked + .slider:before {
   cursor: pointer;
 }
 
+.sidebar .workflow-list-item {
+  margin: 8px 8px 0;
+  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--panel) 82%, black);
+}
+
 .workflow-list-item.active {
   background: color-mix(in srgb, var(--accent) 14%, transparent);
 }
 
+.sidebar .workflow-list-item.active {
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
+  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
+}
+
 .workflow-list-item small {
   display: block;
   margin-top: 4px;
@@ -2363,6 +2382,7 @@ input:checked + .slider:before {
 
 .workflow-list-actions {
   display: flex;
+  gap: 8px;
 }
 
 .workflows-main,
@@ -2564,10 +2584,6 @@ input:checked + .slider:before {
 }
 
 @media (max-width: 1050px) {
-  .workflows-area {
-    grid-template-columns: 210px minmax(0, 1fr);
-  }
-
   .workflow-editor-grid {
     grid-template-columns: 90px minmax(420px, 1fr) 260px;
   }