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>