From 08ee3cd9b70823dc445fae08bc88d8085eaab415 Mon Sep 17 00:00:00 2001
From: arkon <arkon.85@hotmail.com>
Date: Mon, 19 Jan 2026 11:34:42 +0100
Subject: [PATCH] style: increase width of tabs, case select, and working dir
 display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Session tabs: 150px → 220px (show more of filename)
- Case select dropdown: 120px → 180px (show full case names)
- Working dir display: 300px → 450px (show full paths)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/web/public/styles.css | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 57e3ca3b..883b2516 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -89,7 +89,7 @@ body {
   cursor: pointer;
   white-space: nowrap;
   transition: all 0.15s;
-  max-width: 150px;
+  max-width: 220px;
 }
 
 .session-tab:hover {
@@ -537,17 +537,17 @@ body {
 
 /* Claude Button - Special styling */
 .btn-toolbar.btn-claude {
-  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-  border-color: #3b82f6;
-  color: white;
+  background: linear-gradient(135deg, #1e3a5f 0%, #3d2a5c 100%);
+  border-color: #2d4a6f;
+  color: #a8c4e8;
   font-weight: 500;
   padding: 0.4rem 0.85rem;
 }
 
 .btn-toolbar.btn-claude:hover {
-  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
-  border-color: #60a5fa;
-  box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
+  background: linear-gradient(135deg, #2a4d7a 0%, #4d3a6c 100%);
+  border-color: #3d5a7f;
+  box-shadow: 0 0 12px rgba(61, 90, 127, 0.3);
 }
 
 .btn-toolbar.btn-claude .btn-icon {
@@ -635,7 +635,7 @@ body {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 0.4rem center;
-  max-width: 120px;
+  max-width: 180px;
 }
 
 .toolbar-select:hover {
@@ -764,7 +764,7 @@ body {
 }
 
 #dirDisplay {
-  max-width: 300px;
+  max-width: 450px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;