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:
@@ -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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user