daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
1 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/tasks/Toolbar/GitOperations.tsx
View File

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