From 77c4c2fcdb92c6eec399c495be89915bf5757f85 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <hi@jhbruhn.de>
Date: Sun, 7 Dec 2025 13:06:12 +0100
Subject: [PATCH] Improve header typography hierarchy and layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increased title size from text-sm to text-lg for better prominence
- Moved serial number to upper row next to title (prevents truncation)
- Improved font sizes: serial (text-sm), controls (text-xs), not connected (text-sm)
- Enlarged icons and padding for better touch targets and readability
- Increased vertical spacing between rows for better breathing room

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/App.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4ac0285..6cb39e0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -116,31 +116,33 @@ function App() {
             <div className="w-2.5 h-2.5 bg-gray-400 rounded-full -ml-2.5" style={{ visibility: !machine.isConnected ? 'visible' : 'hidden' }}></div>
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-2">
-                <h1 className="text-sm font-bold text-white leading-tight">SKiTCH Controller</h1>
+                <h1 className="text-lg font-bold text-white leading-tight">SKiTCH Controller</h1>
+                {machine.isConnected && machine.machineInfo?.serialNumber && (
+                  <span className="text-sm text-blue-200">• {machine.machineInfo.serialNumber}</span>
+                )}
                 {machine.isPolling && (
-                  <ArrowPathIcon className="w-3 h-3 text-blue-200 animate-spin" title="Auto-refreshing status" />
+                  <ArrowPathIcon className="w-3.5 h-3.5 text-blue-200 animate-spin" title="Auto-refreshing status" />
                 )}
               </div>
-              <div className="flex items-center gap-2 mt-0.5 min-w-0">
-                <p className="text-xs text-blue-200 truncate">
-                  {machine.isConnected ? (machine.machineInfo?.serialNumber || 'Connected') : 'Not Connected'}
-                </p>
-                {machine.isConnected && (
+              <div className="flex items-center gap-2 mt-1">
+                {machine.isConnected ? (
                   <>
                     <button
                       onClick={machine.disconnect}
-                      className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-white/10 hover:bg-white/20 text-blue-100 hover:text-white border border-white/20 hover:border-white/30 cursor-pointer transition-all flex-shrink-0"
+                      className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-medium bg-white/10 hover:bg-white/20 text-blue-100 hover:text-white border border-white/20 hover:border-white/30 cursor-pointer transition-all flex-shrink-0"
                       title="Disconnect from machine"
                       aria-label="Disconnect from machine"
                     >
-                      <XMarkIcon className="w-2.5 h-2.5" />
+                      <XMarkIcon className="w-3 h-3" />
                       Disconnect
                     </button>
-                    <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-white/20 text-white border border-white/30 flex-shrink-0">
-                      <StatusIcon className="w-2.5 h-2.5" />
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-semibold bg-white/20 text-white border border-white/30 flex-shrink-0">
+                      <StatusIcon className="w-3 h-3" />
                       {machine.machineStatusName}
                     </span>
                   </>
+                ) : (
+                  <p className="text-sm text-blue-200">Not Connected</p>
                 )}
               </div>
             </div>