[docs] Demo chrome tweaks

[aarongarciah]

Preview:

• Demo: https://deploy-preview-4983--base-ui.netlify.app/react/components/accordion
• Installation block: https://deploy-preview-4983--base-ui.netlify.app/react/overview/quick-start

Changes:

• Demos
  • Removes compact demos.
  • Reduces the height of the code block when collapsed, so only 4 lines are displayed.
  • The whole code block is clickable to expand the demo code block when collapsed.
  • New tabs style.
  • New "Show code" button styles.
  • Removes the "Hide code" button once it's expanded.
  • Moves the copy code button from the demo toolbar to the demo code block.
  • Hides file tabs when there's only one file (that's the case for most Tailwind demos).
• Updated installation block (present in quick start page) styles so tabs have the same vibe as demo tabs.
• Removes the "Copy" visual label from regular code blocks.
• Updates regular code blocks, prop tables, etc., to match the demos' border radius.

before	after

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@4983
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@4983
  

commit: 9dd2591

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@base-ui/react	0B(0.00%)	0B(0.00%)

Details of bundle changes

Performance

Total duration: 1,229.50 ms -67.86 ms^(-5.2%) | Renders: 50 ⁽⁺⁰⁾ | Paint: 1,845.67 ms -82.03 ms^(-4.3%)

No significant changes — details

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	9dd2591
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6a2c0152c3e6240008244827
😎 Deploy Preview	https://deploy-preview-4983--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[atomiks]

Reduces the height of the code block when collapsed, so only 4 lines are displayed.

I'd match the non-collapsed line count (on Button it seems to be 7). It feels slightly off to only show imports instead of the export default function ExampleComponent() {... line in the collapsed state and for non-collapsed/collapsed heights to be different.

[aarongarciah]

I'd match the non-collapsed line count (on Button it seems to be 7)

Not sure about that. I think 7 lines for the collapsed version might be too much. Do you see a clear benefit?

It feels slightly off to only show imports instead of the export default function ExampleComponent() {... line

I wanted to explore that in a follow-up PR, and use the ESLint rule from code-infra to lint // @focus-start and // @focus-end comments if we want to focus the main function on each demo. To be honest, I don't know how helpful it is to focus export default function ExampleComponent() { instead of just the begining of the file, because when the user expands the code block, the line the user was looking at will be elsewhere (unless we do some scroll magic). For example:

collapsed	expanded

for non-collapsed/collapsed heights to be different.

Not sure what you mean by "non-collapsed/collapsed heights to be different". Non-collapsed demo code blocks just display the whole thing. Right now, only demos with less than 12 lines are non-collapsed automatically.

[atomiks]

Not sure about that. I think 7 lines for the collapsed version might be too much. Do you see a clear benefit?

Maybe I'm over-indexing on consistency with non-collapsible blocks. 4 vs 7 lines is 96px vs 156px from what I see (with Button), which doesn't doesn't feel too much extra? But if you said 12 lines is the limit, then some non-collapsible blocks would be inconsistent anyway, I guess...

It's just that, 4 just looks weirdly short to the point where it seems somewhat pointless to even show a partially expanded state, while 7 is somewhat justified given it shows the top of the component function.

Not sure what you mean by "non-collapsed/collapsed heights to be different".

Yeah I meant non-collapsed as in non-collapsible here, code blocks short enough that they don't collapse at all

[colmtuite]

• Tab label needs to be aligned with code block like it is on prod.
• All toolbar text should be aligned like it is on prod
• We need an extra LOC visible, or something, so there is never a blank code line visible which looks weird

[aarongarciah]

• Tab label needs to be aligned with code block like it is on prod.
• All toolbar text should be aligned like it is on prod
• We need an extra LOC visible, or something, so there is never a blank code line visible which looks weird

Updated