Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

fix: add responsive design to NodePalette#223

Merged
breaking-brake merged 1 commit intomainbreaking-brake/cc-wf-studio:mainfrom
fix/node-palette-responsivebreaking-brake/cc-wf-studio:fix/node-palette-responsiveCopy head branch name to clipboard
Dec 6, 2025
Merged

fix: add responsive design to NodePalette#223
breaking-brake merged 1 commit intomainbreaking-brake/cc-wf-studio:mainfrom
fix/node-palette-responsivebreaking-brake/cc-wf-studio:fix/node-palette-responsiveCopy head branch name to clipboard

Conversation

@breaking-brake
Copy link
Copy Markdown
Owner

Problem

When the viewport width is 900px or less, the NodePalette panel takes up too much horizontal space due to:

  • Fixed 200px width
  • Long description text for each node button
  • Quick Start section taking additional space

Solution

Added responsive design to NodePalette using the existing useIsCompactMode hook (900px breakpoint).

Changes

File: src/webview/src/components/NodePalette.tsx

  1. Panel width: 200px → 100px in compact mode
  2. Node descriptions: Hidden in compact mode (title only)
  3. Quick Start section: Hidden in compact mode
  4. Font sizes: Reduced in compact mode
    • Header: 13px → 11px
    • Section headers: 11px → 10px
    • Button text: 13px → 11px
  5. Padding/margins: Reduced in compact mode
    • Panel padding: 16px → 8px
    • Button padding: 12px → 8px
    • Margins adjusted proportionally

Impact

  • Improved usability on narrow viewports
  • Consistent with other responsive changes (Toolbar, MiniMap, AI Edit button)
  • No breaking changes

Testing

  • Manual E2E testing completed
  • Code quality checks passed (npm run format && npm run lint && npm run check)
  • Build successful (npm run build)

🤖 Generated with Claude Code

- Reduce panel width from 200px to 100px when viewport <= 900px
- Hide node descriptions in compact mode (show title only)
- Hide Quick Start section in compact mode
- Adjust font sizes for compact mode (13px→11px, 11px→10px)
- Adjust padding and margins for compact layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@breaking-brake breaking-brake merged commit 39432af into main Dec 6, 2025
3 checks passed
@breaking-brake breaking-brake deleted the fix/node-palette-responsive branch December 6, 2025 01:35
@breaking-brake breaking-brake mentioned this pull request Dec 6, 2025
github-actions Bot added a commit that referenced this pull request Dec 6, 2025
## [3.2.4](v3.2.3...v3.2.4) (2025-12-06)

### Bug Fixes

* add responsive design to NodePalette ([#223](#223)) ([39432af](39432af))
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Dec 6, 2025

🎉 This PR is included in version 3.2.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Morty Proxy This is a proxified and sanitized view of the page, visit original site.