From d0bca6236206b41694873aefc6772cecd02fa1e1 Mon Sep 17 00:00:00 2001
From: Christoph Brandau <Christoph.Brandau@janus-engineering.com>
Date: Fri, 10 Jul 2026 22:21:53 +0200
Subject: [PATCH] refactor(ui): Improve title bar layout using flex and grid

The structure of the application title bar has been updated to utilize modern CSS layout techniques like Grid and Flexbox. This refactoring improves the responsiveness and organization of key elements such as repository name, branch indicator, and synchronization status. The changes ensure better alignment and handling of varying content lengths across different viewports.

- Restructures repo/branch info into a dedicated context container
- Uses flex properties for dynamic sizing of title bar sections
- Groups sync indicators into a cohesive unit
---
 src/app.css             | 19 ++++++++++++++-----
 src/lib/TitleBar.svelte | 28 +++++++++++++++++-----------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/app.css b/src/app.css
index 6dc8864..d673c57 100644
--- a/src/app.css
+++ b/src/app.css
@@ -610,7 +610,8 @@
   }
 
   .titlebar-info {
-    display: flex;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
     align-items: center;
     gap: 6px;
     padding: 0 12px;
@@ -618,12 +619,20 @@
     height: 100%;
     overflow: hidden;
   }
-  .titlebar-info svg { color: var(--color-accent); flex-shrink: 0; }
+  .titlebar-context {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: 6px;
+    overflow: hidden;
+  }
+  .titlebar-context svg { color: var(--color-accent); flex: 0 0 auto; }
 
-  .tb-repo   { color: var(--color-bar-muted); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
-  .tb-sep    { color: rgba(255,255,255,0.22); font-size: 13px; }
-  .tb-branch { color: #f5f7ff; font-size: 12px; font-weight: 700; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
+  .tb-repo   { flex: 0 1 160px; min-width: 0; color: var(--color-bar-muted); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .tb-sep    { flex: 0 0 auto; color: rgba(255,255,255,0.22); font-size: 13px; }
+  .tb-branch { flex: 1 1 auto; min-width: 0; max-width: 220px; color: #f5f7ff; font-size: 12px; font-weight: 700; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
+  .tb-sync-group { display: inline-flex; align-items: center; gap: 4px; min-width: max-content; }
   .tb-sync { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; flex-shrink: 0; }
   .tb-sync.ahead  { color: #e0a040; background: rgba(224,160,64,0.13); }
   .tb-sync.behind { color: #7aacff; background: rgba(122,172,255,0.13); }
diff --git a/src/lib/TitleBar.svelte b/src/lib/TitleBar.svelte
index 3d14bea..32eff55 100644
--- a/src/lib/TitleBar.svelte
+++ b/src/lib/TitleBar.svelte
@@ -79,17 +79,23 @@
   <!-- Center: repo + branch info -->
   <div class="titlebar-info" data-tauri-drag-region>
     {#if hasRepository}
-      {#if repoName}
-        <span class="tb-repo" data-tauri-drag-region>{repoName}</span>
-        <span class="tb-sep" data-tauri-drag-region aria-hidden="true">/</span>
-      {/if}
-      <GitBranch size={12} aria-hidden="true" />
-      <span class="tb-branch" data-tauri-drag-region>{branch}</span>
-      {#if ahead > 0}
-        <span class="tb-sync ahead" title="{ahead} commits ahead">↑{ahead}</span>
-      {/if}
-      {#if behind > 0}
-        <span class="tb-sync behind" title="{behind} commits behind">↓{behind}</span>
+      <div class="titlebar-context" data-tauri-drag-region>
+        {#if repoName}
+          <span class="tb-repo" data-tauri-drag-region>{repoName}</span>
+          <span class="tb-sep" data-tauri-drag-region aria-hidden="true">/</span>
+        {/if}
+        <GitBranch size={12} aria-hidden="true" />
+        <span class="tb-branch" data-tauri-drag-region title={branch}>{branch}</span>
+      </div>
+      {#if ahead > 0 || behind > 0}
+        <div class="tb-sync-group" aria-label="Branch synchronization status">
+          {#if ahead > 0}
+            <span class="tb-sync ahead" title="{ahead} commits ahead">↑{ahead}</span>
+          {/if}
+          {#if behind > 0}
+            <span class="tb-sync behind" title="{behind} commits behind">↓{behind}</span>
+          {/if}
+        </div>
       {/if}
     {:else}
       <span class="tb-no-repo" data-tauri-drag-region>No repository open</span>