UI: Ensure consistent right padding in TreeNode

[Sidnioulz]

What I did

Fixed a layout issue in Sidebar TreeNode that affects positioning of labels with renderLabel.

MDX are HTML anchors whereas stories are buttons. This causes a different default padding to apply, resulting in a 6px right padding for stories but not for links. Now that we have ContextMenu and test statuses, this makes it difficult for renderLabel users to compute margins.

Before

After

Checklist for Contributors

Testing

Manual testing

Verify that the padding is now consistent between docs and story entries in your sidebar.

Documentation

ø

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Style
  • Improved spacing in the sidebar tree nodes for better visual layout and readability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 8f998d1

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	✅ Succeeded	12m 59s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-12-10 09:33:31 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds right padding of 6 units to the commonNodeStyles in TreeNode.tsx, adjusting horizontal spacing for sidebar tree nodes. This is a styling-only modification with no functional or logic changes.

Changes

Cohort / File(s)	Summary
Sidebar styling adjustment code/core/src/manager/components/sidebar/TreeNode.tsx	Add 6 units of right padding to commonNodeStyles for increased horizontal spacing in tree nodes

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6127326 and 8f998d1.

📒 Files selected for processing (1)

• code/core/src/manager/components/sidebar/TreeNode.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use ESLint and Prettier configurations that are enforced in the codebase

Files:

• code/core/src/manager/components/sidebar/TreeNode.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode

Files:

• code/core/src/manager/components/sidebar/TreeNode.tsx

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{ts,tsx,js,jsx,mjs}: Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Use client-side logger from 'storybook/internal/client-logger' for browser code
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/core/src/manager/components/sidebar/TreeNode.tsx

code/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions that need to be tested from their modules

Files:

• code/core/src/manager/components/sidebar/TreeNode.tsx

code/**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier with --write flag to format code before committing
Run ESLint with yarn lint:js:cmd to check for linting issues and fix errors before committing

Files:

• code/core/src/manager/components/sidebar/TreeNode.tsx

🧠 Learnings (1)

📓 Common learnings

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: normal
• GitHub Check: nx
• GitHub Check: nx
• GitHub Check: Core Unit Tests, windows-latest
• GitHub Check: nx

🔇 Additional comments (1)

code/core/src/manager/components/sidebar/TreeNode.tsx (1)

40-64: Consistent right padding across button/anchor nodes looks good

Adding paddingRight: 6 to commonNodeStyles is a clean way to normalize the UA‑style differences between BranchNode (button) and LeafNode (anchor). The value is consistent with existing 6px gaps in this file and should give predictable spacing for renderLabel consumers and status/context menu affordances without affecting logic.

---

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