a82c7e37e7
* All changes are complete and tests pass. Here's a summary of what was done: ## Summary Fixed the GitHub Comments Dialog overflow issue with two files modified: ### 1. `frontend/src/components/ui/github-comment-card.tsx` - Made the layout classes (`inline-block`, `align-bottom`, `max-w-md`) conditional - They only apply when no custom layout className is provided (checked for `flex-`, `block`, or `w-` in className) - This preserves the WYSIWYG editor behavior while allowing the dialog to override ### 2. `frontend/src/components/dialogs/tasks/GitHubCommentsDialog.tsx` - Added `min-w-0` to the scrollable content container (line 108) - Added `min-w-0` to each comment row flex container (line 145) - Simplified the GitHubCommentCard className to `"flex-1 min-w-0"` (line 175) The `min-w-0` classes are essential for proper flex containment - they override the default `min-width: auto` behavior that prevents flex items from shrinking below their content size. Both TypeScript type checking and ESLint pass successfully. * All changes are complete and tests pass. Here's a summary of what was fixed: ## Summary **Root cause**: The Dialog component's API was being misused. Width classes (`max-w-2xl`) were being passed to `DialogContent` instead of `Dialog`. Since `DialogContent` is nested inside the Dialog's inner container (which has default `max-w-lg`), the width override was ineffective. **Changes made**: 1. **`GitHubCommentsDialog.tsx`**: Moved sizing classes from `DialogContent` to `Dialog`: - `Dialog` now has `className="max-w-2xl p-0 max-h-[80vh] overflow-hidden"` - `DialogContent` now has `className="flex flex-col h-full"` 2. **`github-comment-card.tsx`**: Added `overflow-hidden` to the FullCard container so inner elements (DiffHunk `<pre>`) can scroll properly within the card boundaries. The dialog should now: - Be properly sized at `max-w-2xl` (672px) instead of being constrained to `max-w-lg` (512px) - Properly contain content without horizontal overflow - Allow diff hunks to scroll horizontally within the cards * All changes are complete and tests pass. Summary of the fix for vertical scrolling: 1. **`dialog.tsx`**: Changed `grid` to `flex flex-col` in the Dialog inner container - this enables proper flex-based height constraints for child elements 2. **`GitHubCommentsDialog.tsx`**: Added `min-h-0` to the scrollable content div - this overrides the default `min-height: auto` which was preventing the flex item from shrinking below its content size The dialog should now scroll vertically when there are many comments. * All changes are complete and tests pass. Here's a summary of what was done: **Changes to fix vertical scrolling:** The dialog now follows the same pattern as `ViewProcessesDialog`: 1. **Dialog**: `className="max-w-2xl p-0 overflow-hidden"` - removed height constraints 2. **DialogContent**: `className="p-0"` - removed `h-full` and flex classes 3. **Added wrapper div**: `className="max-h-[70vh] flex flex-col min-h-0"` - explicit height constraint on inner wrapper 4. **Scrollable content**: `className="p-4 overflow-auto flex-1 min-h-0"` - scrolls within the constrained wrapper The key insight was that putting the height constraint (`max-h-[70vh]`) on an **inner wrapper** rather than on the Dialog itself makes the flex-based scrolling work correctly. The header and footer remain outside this wrapper so they stay fixed. * Cleanup script changes for task attempt a7065bc4-aa62-4dab-90c7-d15524acc50f * Done! The hacky string matching has been replaced with an explicit `layout` prop: **Changes:** 1. **`github-comment-card.tsx`**: - Added `layout?: 'inline' | 'block'` prop to `GitHubCommentCardProps` - Replaced the string matching logic with a simple `layout === 'inline'` check - Default is `'inline'` for backwards compatibility (WYSIWYG editor) 2. **`GitHubCommentsDialog.tsx`**: - Added `layout="block"` prop to `GitHubCommentCard` The WYSIWYG editor (`github-comment-node.tsx`) doesn't need changes since it uses the default `layout="inline"`. * Done! The hacky string matching has been replaced with an explicit `layout` prop: **Summary of changes:** 1. **`github-comment-card.tsx`**: - Consolidated `variant` and `layout` into a single required `variant` prop - Three values: `'compact'` (inline chip), `'full'` (inline card with max-width), `'list'` (block card) - Removed the `layout` prop entirely - Made `variant` required (no default) 2. **`GitHubCommentsDialog.tsx`**: - Changed from `variant="full" layout="block"` to just `variant="list"` 3. **`github-comment-node.tsx`**: - Already had `variant="full"` explicitly set, no change needed
Get 10X more out of Claude Code, Gemini CLI, Codex, Amp and other coding agents...
We're hiring!
Overview
AI coding agents are increasingly writing the world's code and human engineers now spend the majority of their time planning, reviewing, and orchestrating tasks. Vibe Kanban streamlines this process, enabling you to:
- Easily switch between different coding agents
- Orchestrate the execution of multiple coding agents in parallel or in sequence
- Quickly review work and start dev servers
- Track the status of tasks that your coding agents are working on
- Centralise configuration of coding agent MCP configs
- Open projects remotely via SSH when running Vibe Kanban on a remote server
You can watch a video overview here.
Installation
Make sure you have authenticated with your favourite coding agent. A full list of supported coding agents can be found in the docs. Then in your terminal run:
npx vibe-kanban
Documentation
Please head to the website for the latest documentation and user guides.
Support
We use GitHub Discussions for feature requests. Please open a discussion to create a feature request. For bugs please open an issue on this repo.
Contributing
We would prefer that ideas and changes are first raised with the core team via GitHub Discussions or Discord, where we can discuss implementation details and alignment with the existing roadmap. Please do not open PRs without first discussing your proposal with the team.
Development
Prerequisites
Additional development tools:
cargo install cargo-watch
cargo install sqlx-cli
Install dependencies:
pnpm i
Running the dev server
pnpm run dev
This will start the backend. A blank DB will be copied from the dev_assets_seed folder.
Building the frontend
To build just the frontend:
cd frontend
pnpm build
Build from source
- Run
build-npm-package.sh - In the
npx-clifolder runnpm pack - You can run your build with
npx [GENERATED FILE].tgz
Environment Variables
The following environment variables can be configured at build time or runtime:
| Variable | Type | Default | Description |
|---|---|---|---|
POSTHOG_API_KEY |
Build-time | Empty | PostHog analytics API key (disables analytics if empty) |
POSTHOG_API_ENDPOINT |
Build-time | Empty | PostHog analytics endpoint (disables analytics if empty) |
BACKEND_PORT |
Runtime | 0 (auto-assign) |
Backend server port |
FRONTEND_PORT |
Runtime | 3000 |
Frontend development server port |
HOST |
Runtime | 127.0.0.1 |
Backend server host |
DISABLE_WORKTREE_ORPHAN_CLEANUP |
Runtime | Not set | Disable git worktree cleanup (for debugging) |
Build-time variables must be set when running pnpm run build. Runtime variables are read when the application starts.
Remote Deployment
When running Vibe Kanban on a remote server (e.g., via systemctl, Docker, or cloud hosting), you can configure your editor to open projects via SSH:
- Access via tunnel: Use Cloudflare Tunnel, ngrok, or similar to expose the web UI
- Configure remote SSH in Settings → Editor Integration:
- Set Remote SSH Host to your server hostname or IP
- Set Remote SSH User to your SSH username (optional)
- Prerequisites:
- SSH access from your local machine to the remote server
- SSH keys configured (passwordless authentication)
- VSCode Remote-SSH extension
When configured, the "Open in VSCode" buttons will generate URLs like vscode://vscode-remote/ssh-remote+user@host/path that open your local editor and connect to the remote server.
See the documentation for detailed setup instructions.