[8454] Improve the "More Items" alignment in the side bar

[jvega190]

Updated the 'N more items' entry of the tree to be a TreeItem instead of a Box so it gets indented properly with the rest of items.

craftercms/craftercms#8454

Summary by CodeRabbit

• Bug Fixes
  • Improved the “more” entry in the path navigator tree so it behaves like a proper tree item, making it easier to interact with and navigate.
  • Updated click handling to avoid unintended tree selection or expansion when loading additional items.
  • Refined tree item spacing, hover, focus, and label styling for a more consistent and polished sidebar experience.

[coderabbitai]

Warning

Review limit reached

@jvega190, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 39 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 42336e6e-bab6-45ad-be64-21e656adbe4c

📥 Commits

Reviewing files that changed from the base of the PR and between 5535e96 and 0958465.

📒 Files selected for processing (1)

• ui/app/src/components/PathNavigatorTree/PathNavigatorTreeItem.tsx

Walkthrough

The "more" entry in PathNavigatorTreeItem.tsx was changed from a Box-wrapped Button to a proper MUI TreeItem node with a dedicated itemId. The click handler now stops event propagation before invoking onMoreClick, and styling was rewritten to target TreeItem internal classnames.

Changes

More Entry TreeItem Refactor

Layer / File(s)	Summary
Replace Box/Button with TreeItem for more entry ui/app/src/components/PathNavigatorTree/PathNavigatorTreeItem.tsx	The "more" node is now a TreeItem with itemId ${path}::__more__ instead of a Box/Button pair; the click handler stops propagation before calling onMoreClick(path), and styles target treeItemClasses.* for padding, icon sizing, and hover/focus states.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related issues

• Improve the "More Items" alignment in the side bar craftercms#8454: Rendering the "more" entry as a nested TreeItem with revised spacing/alignment addresses the reported "More Items" alignment issue in the sidebar.

Suggested labels: ui, enhancement

Suggested reviewers: none

🐰 A "more" node hops from Box to Tree,
Its click now stops before it's free,
Padding tuned with careful hand,
Hover states now understand,
A tiny leaf, so neatly planned.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: improving More Items alignment in the sidebar.
Description check	✅ Passed	The description includes the required ticket reference for the change.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@ui/app/src/components/PathNavigatorTree/PathNavigatorTreeItem.tsx`:
- Around line 202-204: The focus styling for the selectable TreeItem is removing
all visible keyboard focus feedback, which is an accessibility regression.
Update the styling in PathNavigatorTreeItem so the `treeItemClasses.focused`
state still shows a clear focus indicator instead of suppressing it with
`background: 'none !important'`, and keep the behavior aligned with the
now-focusable `TreeItem` row.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 50b361ef-bb61-47bc-9564-d12538dd310f

📥 Commits

Reviewing files that changed from the base of the PR and between 7d8ec52 and 5535e96.

📒 Files selected for processing (1)

• ui/app/src/components/PathNavigatorTree/PathNavigatorTreeItem.tsx

[jvega190]

@coderabbitai can you check if everything looks good? Please give it a final review before I hand over for human review

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
gh pr view 4909 --repo craftercms/studio-ui --json title,body,files,additions,deletions,commits
echo "----DIFF----"
gh pr diff 4909 --repo craftercms/studio-ui

Length of output: 4372

---

🏁 Script executed:

#!/bin/bash
cd ui 2>/dev/null || true
fd PathNavigatorTreeItem.tsx
echo "---"
cat -n app/src/components/PathNavigatorTree/PathNavigatorTreeItem.tsx 2>/dev/null | sed -n '1,260p'

Length of output: 10212

---

🏁 Script executed:

#!/bin/bash
fd PathNavigatorTree.tsx
echo "---"
rg -n "selectedItem|onNodeSelect|selected|expandedItems|onItemSelectionToggle|apiRef|itemId" app/src/components/PathNavigatorTree/PathNavigatorTree.tsx | head -80

Length of output: 514

---

🏁 Script executed:

#!/bin/bash
rg -n "selectedItem|onNodeSelect|selected|expandedItems|onItemSelectionToggle|apiRef|itemId|SimpleTreeView|RichTreeView" ui/app/src/components/PathNavigatorTree/PathNavigatorTree.tsx | head -100

Length of output: 345

---

🏁 Script executed:

#!/bin/bash
rg -n "SimpleTreeView|RichTreeView|TreeView" ui/app/src/components/PathNavigatorTree/ -l
echo "---"
rg -n "selectedItem|onSelectedItemsChange|expandedItems|onExpandedItemsChange|itemId" ui/app/src/components/PathNavigatorTree/*.tsx

Length of output: 778

---

@jvega190 Reviewed the current diff — the change looks solid overall. A few notes:

Looks good:

• The SimpleTreeView in PathNavigatorTreeUI.tsx already has disableSelection, so the synthetic itemId={${path}::more} on the "more" node won't interfere with any real selection state — that was my main initial concern and it's already covered.
• Since the "more" node has no children, no spurious expand icon/behavior is introduced; the iconContainer width is just reserved for alignment, which is the whole point of the fix.
• event.stopPropagation() on the Button's onClick correctly prevents the click from bubbling into TreeItem's own handling.
• The second commit nicely refines the styling so hover background is suppressed on the "more" row without breaking the focused-state background — good attention to detail.

One minor thing worth a quick manual check (not blocking):

• The click handler is only bound to the inner Button. If a user reaches the "more" row via keyboard (roving tabindex arrow-key navigation lands on the TreeItem content, not necessarily the nested Button), pressing Enter/Space there may not trigger onMoreClick since that keypress isn't wired to the row itself. Might be worth a quick keyboard-only test to confirm the "more" action is still reachable without a mouse, though given disableSelection this is likely a pre-existing limitation rather than a regression from this change.

Otherwise this is a clean, well-scoped fix — good to hand off for human review.

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[jvega190]

@CodeRabbit you're right, since we have disableSelection then it is a pre-existing limitation, that's how we're handling it right now. Considering that, please give it a final review before I hand over for human review

[coderabbitai]

@jvega190 Sounds good — that context makes sense. Since the keyboard-navigation note was already a pre-existing, intentional limitation tied to disableSelection and not a regression from this change, there's nothing blocking here.

Final take: the fix is clean and well-scoped — using an actual TreeItem with a synthetic itemId for the "more" row correctly solves the indentation/alignment issue, the styling overrides properly target the right treeItemClasses for icon spacing and hover/focus states, and stopPropagation() on the button click avoids unintended TreeItem behavior. Good to hand off for human review.

✅ Action performed

Comments resolved. Approval is disabled; enable reviews.request_changes_workflow to allow explicit top-level @coderabbitai resolve or @coderabbitai approve commands.