fix(diagram): fix scroll in walkthrough notes panel by davydkov · Pull Request #2784 · likec4/likec4

davydkov · 2026-03-20T09:45:24Z

Summary

Fix scrolling issues in the walkthrough notes panel by restructuring the layout
Moves styling from inner ScrollAreaAutosize to the outer container for proper scroll behavior

🤖 Generated with Claude Code

Summary by CodeRabbit

Bug Fixes
- Fixed scrolling behavior in the walkthrough notes panel.
Chores
- Recorded a patch release for the diagram package via a changeset.
- Updated editor search settings to include previously excluded Yarn files.
- Added a local worktrees path to the ignore list.

Restructure WalkthroughPanel layout to fix scrolling issues with notes content. Moves styling from inner ScrollAreaAutosize to the outer container. Fixes #2729 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

changeset-bot · 2026-03-20T09:45:31Z

🦋 Changeset detected

Latest commit: faf6132

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 20 packages

Name	Type
@likec4/diagram	Patch
@likec4/playground	Patch
likec4	Patch
@likec4/react	Patch
@likec4/vscode-preview	Patch
likec4-vscode	Patch
@likec4/docs-astro	Patch
@likec4/style-preset	Patch
@likec4/styles	Patch
@likec4/config	Patch
@likec4/core	Patch
@likec4/generators	Patch
@likec4/language-server	Patch
@likec4/language-services	Patch
@likec4/layouts	Patch
@likec4/leanix-bridge	Patch
@likec4/log	Patch
@likec4/mcp	Patch
@likec4/tsconfig	Patch
@likec4/vite-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-03-20T09:52:03Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 28b04119-3075-469f-ab72-7732c8e25db9

📥 Commits

Reviewing files that changed from the base of the PR and between e3c2651 and faf6132.

📒 Files selected for processing (1)

packages/diagram/src/navigationpanel/walkthrough/WalkthroughPanel.tsx

📝 Walkthrough

Walkthrough

Fixes vertical scrolling in the walkthrough notes panel by restructuring the panel container and simplifying the scroll container so long notes can overflow and be scrolled instead of being clipped.

Changes

Cohort / File(s)	Summary
Changeset `.changeset/fix-walkthrough-notes-scroll.md`	Added a changeset for `@likec4/diagram` (patch) recording "Fix scroll in walkthrough notes panel" (refs `#2729`).
Editor & VCS config `.gitignore`, `.vscode/settings.json`	Added `.claude/worktrees` to `.gitignore`; removed Yarn-related exclusions from VS Code `search.exclude`.
UI: Walkthrough panel `packages/diagram/src/navigationpanel/walkthrough/WalkthroughPanel.tsx`	Removed `css` import usage and replaced outer container with `vstack(...)` including spacing, layer styling, sizing and overflow rules; simplified `ScrollAreaAutosize` props (removed absolute sizing and layout-driven width logic, left as `type="scroll" overscrollBehavior="contain"`); removed `userSelect` override on `Markdown`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰
Notes once tucked, too small to peep,
I nudged the layout from its sleep.
Now pages glide and secrets roll—
each long note finds its scrolling soul. 🥕

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is concise but incomplete. It lacks a properly filled checklist as specified in the template; no items are checked off.	Complete the required checklist from the template by checking applicable items and confirming adherence to contribution guidelines, test coverage, and documentation updates.
Out of Scope Changes check	⚠️ Warning	The PR includes minor out-of-scope changes: updates to .gitignore and .vscode/settings.json that are unrelated to the core scrolling fix objective.	Remove or explain the .gitignore and .vscode/settings.json changes, or move them to a separate PR focused on configuration updates.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and concisely describes the main change: fixing scroll behavior in the walkthrough notes panel, which directly addresses the core issue.
Linked Issues check	✅ Passed	The code changes directly address the linked issue `#2729` by restructuring the WalkthroughPanel layout to enable proper vertical scrolling for long notes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix-scroll-in-notes

📝 Coding Plan

Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/diagram/src/navigationpanel/walkthrough/WalkthroughPanel.tsx`:
- Line 80: The ScrollAreaAutosize in WalkthroughPanel.tsx currently lacks an
explicit max height so it can grow unbounded and won't scroll; update the
component usage (ScrollAreaAutosize) to include a fixed height constraint (use
the same `mah` prop pattern as in SearchInput.tsx) so the scroll container has a
bounded height when `type="scroll"` and vertical scrolling will work correctly.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 80da4676-9ddd-4cdf-9c32-c47feed102db

📥 Commits

Reviewing files that changed from the base of the PR and between f254bea and ac1fe88.

📒 Files selected for processing (4)

.changeset/fix-walkthrough-notes-scroll.md
.gitignore
.vscode/settings.json
packages/diagram/src/navigationpanel/walkthrough/WalkthroughPanel.tsx

💤 Files with no reviewable changes (1)

.vscode/settings.json

…nel.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Denis Davydkov <denis@davydkov.com>

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/diagram/src/navigationpanel/walkthrough/WalkthroughPanel.tsx`:
- Line 80: The ScrollAreaAutosize usage in WalkthroughPanel sets mah="100%"
which relies on an indeterminate parent height; change the max-height constraint
to match the panel's actual constraint (e.g., replace mah="100%" with
mah="calc(100cqh - 100px)" or set an explicit maxHeight style) so
ScrollAreaAutosize calculates bounds against the same maxHeight as the parent
container; locate the ScrollAreaAutosize in WalkthroughPanel.tsx and update its
mah prop or add a matching style/maxHeight prop to align with the parent's
maxHeight.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8bebf621-9ea0-4e90-8f78-eb1939922444

📥 Commits

Reviewing files that changed from the base of the PR and between ac1fe88 and e3c2651.

📒 Files selected for processing (1)

packages/diagram/src/navigationpanel/walkthrough/WalkthroughPanel.tsx

fix(diagram): fix scroll in walkthrough notes panel

ac1fe88

Restructure WalkthroughPanel layout to fix scrolling issues with notes content. Moves styling from inner ScrollAreaAutosize to the outer container. Fixes #2729 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

coderabbitai Bot reviewed Mar 20, 2026

View reviewed changes

Comment thread packages/diagram/src/navigationpanel/walkthrough/WalkthroughPanel.tsx

Update packages/diagram/src/navigationpanel/walkthrough/WalkthroughPa…

e3c2651

…nel.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Denis Davydkov <denis@davydkov.com>

coderabbitai Bot reviewed Mar 20, 2026

View reviewed changes

Comment thread packages/diagram/src/navigationpanel/walkthrough/WalkthroughPanel.tsx Outdated

revert

faf6132

davydkov merged commit 16386c5 into main Mar 20, 2026
8 of 9 checks passed

davydkov deleted the fix-scroll-in-notes branch March 20, 2026 10:45

likec4-ci Bot mentioned this pull request Mar 20, 2026

release: v1.53.0 #2743

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(diagram): fix scroll in walkthrough notes panel#2784

fix(diagram): fix scroll in walkthrough notes panel#2784
davydkov merged 3 commits into
mainfrom
fix-scroll-in-notes

davydkov commented Mar 20, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Mar 20, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Mar 20, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (2 warnings)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

davydkov commented Mar 20, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (2 warnings)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

davydkov commented Mar 20, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented Mar 20, 2026 •

edited

Loading

coderabbitai Bot commented Mar 20, 2026 •

edited

Loading