From 7f09d25af876559c68c19b4ddbe26ebb19f935ed Mon Sep 17 00:00:00 2001
From: Alex Netsch <alex@bloop.ai>
Date: Tue, 16 Dec 2025 17:13:54 +0000
Subject: [PATCH] Fix git actions modal overflow for multi-repo projects (Vibe
 Kanban) (#1566)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* The fix has been applied. The change adds `flex-wrap` to the container in the vertical layout, allowing the RepoSelector and branch chips to wrap to a new line when there isn't enough horizontal space in the modal. I also removed the `overflow-hidden` which was hiding content rather than allowing it to wrap properly.

* Done. The fix restructures the vertical layout so that:

1. **RepoSelector gets its own row** - only shown when there are multiple repos (`repos.length > 1`)
2. **Branch chips + status chips share a row** - with `flex-wrap` for graceful overflow if needed
3. **Action buttons remain on their own row** (unchanged)

This creates a cleaner visual hierarchy:
```
[RepoSelector]                          <-- only for multi-repo
[taskBranch] → [targetBranch] [status]  <-- branch flow + status
[Merge] [PR] [Rebase]                   <-- actions
```
---
 .../tasks/Toolbar/GitOperations.tsx           | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/tasks/Toolbar/GitOperations.tsx b/frontend/src/components/tasks/Toolbar/GitOperations.tsx
index fb3aa03e..ac2803a1 100644
--- a/frontend/src/components/tasks/Toolbar/GitOperations.tsx
+++ b/frontend/src/components/tasks/Toolbar/GitOperations.tsx
@@ -426,21 +426,19 @@ function GitOperations({
       <div className={containerClasses}>
         {isVertical ? (
           <>
-            <div className="flex items-center gap-2 min-w-0 overflow-hidden">
-              {repos.length > 0 && (
-                <RepoSelector
-                  repos={repos}
-                  selectedRepoId={getSelectedRepoId() ?? null}
-                  onRepoSelect={setSelectedRepoId}
-                  disabled={isAttemptRunning}
-                  placeholder={t('repos.selector.placeholder', 'Select repo')}
-                />
-              )}
-              <div className="flex items-center gap-2 min-w-0">
-                {branchChips}
-              </div>
+            {repos.length > 1 && (
+              <RepoSelector
+                repos={repos}
+                selectedRepoId={getSelectedRepoId() ?? null}
+                onRepoSelect={setSelectedRepoId}
+                disabled={isAttemptRunning}
+                placeholder={t('repos.selector.placeholder', 'Select repo')}
+              />
+            )}
+            <div className="flex flex-wrap items-center gap-2 min-w-0">
+              {branchChips}
+              {statusChips}
             </div>
-            {statusChips}
           </>
         ) : (
           <>