Fix git actions modal overflow for multi-repo projects (Vibe Kanban) (#1566)

* 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
```
This commit is contained in:
Alex Netsch
2025-12-16 17:13:54 +00:00
committed by GitHub
parent b0be64ed2f
commit 7f09d25af8

View File

@@ -426,8 +426,7 @@ function GitOperations({
<div className={containerClasses}>
{isVertical ? (
<>
<div className="flex items-center gap-2 min-w-0 overflow-hidden">
{repos.length > 0 && (
{repos.length > 1 && (
<RepoSelector
repos={repos}
selectedRepoId={getSelectedRepoId() ?? null}
@@ -436,11 +435,10 @@ function GitOperations({
placeholder={t('repos.selector.placeholder', 'Select repo')}
/>
)}
<div className="flex items-center gap-2 min-w-0">
<div className="flex flex-wrap items-center gap-2 min-w-0">
{branchChips}
</div>
</div>
{statusChips}
</div>
</>
) : (
<>