From bd36dd365accf806b460a38928a6a9d6032dd7ca Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Sat, 11 Oct 2025 22:13:11 +0200
Subject: [PATCH] refactor: make header more compact with horizontal layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reduces header height by restructuring the layout to display all
elements on a single horizontal line instead of stacking vertically.

Changes:
- Move subtitle to the right of the title with a separator border
- Reduce vertical padding from py-4 to py-3
- Decrease logo size from 10x10 to 8x8
- Reduce title size from text-2xl to text-xl

This provides more vertical space for the main content area while
maintaining all header information in a cleaner, more compact design.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/App.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index bfbe9a2..ed5f69c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -111,19 +111,17 @@ function AppContent() {
     <div className="flex flex-col h-screen bg-gray-100">
       {/* Header */}
       <header className="bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg">
-        <div className="px-6 py-4">
+        <div className="px-6 py-3">
           <div className="flex items-center gap-3">
             <img
               src="favicon.svg"
               alt="Constellation Analyzer Logo"
-              className="w-10 h-10"
+              className="w-8 h-8"
             />
-            <div>
-              <h1 className="text-2xl font-bold">Constellation Analyzer</h1>
-              <p className="text-sm text-blue-100 mt-1">
-                Visual editor for analyzing actors and their relationships
-              </p>
-            </div>
+            <h1 className="text-xl font-bold">Constellation Analyzer</h1>
+            <span className="text-blue-100 text-sm border-l border-blue-400 pl-3">
+              Visual editor for analyzing actors and their relationships
+            </span>
           </div>
         </div>
       </header>