fix(Pre): sync root div min-height to pre height to fix Safari codeblock layout rendering by johnson-jnr · Pull Request #6565 · nuxt/ui

johnson-jnr · 2026-06-07T16:00:47Z

🔗 Linked issue

Resolves #6398
Note: Same issue occurs on Safari on Mac.

❓ Type of change

📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality)
✨ New feature (a non-breaking change that adds functionality)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

On the docs page, when Expand code button is clicked, pre element height changes from its initial 200px to auto (with a max height of 80vh).

ui/src/theme/prose/code-collapse.ts

Line 11 in aa10c90

root: '[&_pre]:h-auto [&_pre]:min-h-[200px] [&_pre]:max-h-[80vh] [&_pre]:pb-12'

This update is necessary for pre to fully contain the code.

In Chrome and Firefox, when the nested pre height changes, its parent container height updates accordingly as expected. However, in Safari there is a rendering issue because pre height change fails to propagate to its parent, so the outer parent div keeps the stale initial height of 200px.

CSS-only fixes i tried didn't work. The fix here gets pre's dynamic height using useElementSize (which uses ResizeObserver) and applies it as the min-height of pre's parent div.

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

…ock layout

coderabbitai · 2026-06-07T16:06:34Z

📝 Walkthrough

Walkthrough

The CodeCollapse component now dynamically measures the height of its first <pre> element and exposes it via the CSS custom property --ui-code-height. The measurement combines the element's rendered height with its top offset relative to the component root. The theme configuration applies this value as a minimum height constraint on the root element via the Tailwind class min-h-(--ui-code-height).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main fix: syncing root div min-height to pre height for Safari codeblock layout rendering, which matches the changeset.
Description check	✅ Passed	The description clearly explains the Safari rendering bug with code height propagation and details how the fix uses ResizeObserver to sync heights.
Linked Issues check	✅ Passed	The PR implements the required fix for issue `#6398`: using dynamic height measurement to ensure expanding codeblocks push surrounding content down on Safari/iOS as expected.
Out of Scope Changes check	✅ Passed	All changes are focused on fixing the CodeCollapse component and its theme configuration to address the Safari rendering issue—no out-of-scope modifications detected.
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 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

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

pkg-pr-new · 2026-06-07T16:11:44Z

npm i https://pkg.pr.new/@nuxt/ui@6565

commit: 789421b

benjamincanac

Nice catch on the root cause. I'm wondering if this should go in CodeCollapse instead of Pre though? A plain code block never changes height, so we'd be running a ResizeObserver on every pre on the page for something only the collapse toggle can trigger. Feels like it belongs next to the height logic.

Also you probably want { box: 'border-box' } on useElementSize, otherwise it measures the content box and the min-height ends up ~26px short of the actual pre height.

…ffset.

coderabbitai

🧹 Nitpick comments (1)

src/runtime/components/prose/CodeCollapse.vue (1)
77-77: ⚡ Quick win

Add data-slot="root" on the root slot element.

Line 77 applies the root theme slot class (ui.root(...)) but does not annotate the same element with data-slot="root".
Suggested patch
-  <div ref="rootRef" :style="{ '--ui-code-height': `${codeHeight}px` }" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <div ref="rootRef" data-slot="root" :style="{ '--ui-code-height': `${codeHeight}px` }" :class="ui.root({ class: [props.ui?.root, props.class] })">
As per coding guidelines: Add data-slot="name" attributes on all template elements in component slots. Based on learnings: add data-slot when the element itself carries the matching theme-slot class binding (ui.root(...) here).
🤖 Prompt for 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.

In `@src/runtime/components/prose/CodeCollapse.vue` at line 77, The root element
rendering the component's themed root class (the div with ref="rootRef" and
:class="ui.root({ class: [props.ui?.root, props.class] })") is missing the
required slot annotation; add data-slot="root" on that same div so the element
that carries ui.root(...) also has data-slot="root" (keep ref="rootRef" and the
existing :style and :class bindings intact).
Sources: Coding guidelines, Learnings

🤖 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.

Nitpick comments:
In `@src/runtime/components/prose/CodeCollapse.vue`:
- Line 77: The root element rendering the component's themed root class (the div
with ref="rootRef" and :class="ui.root({ class: [props.ui?.root, props.class]
})") is missing the required slot annotation; add data-slot="root" on that same
div so the element that carries ui.root(...) also has data-slot="root" (keep
ref="rootRef" and the existing :style and :class bindings intact).

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c80e0f57-65be-4fc6-807d-f012338c9679

📥 Commits

Reviewing files that changed from the base of the PR and between aa10c90 and 789421b.

📒 Files selected for processing (2)

src/runtime/components/prose/CodeCollapse.vue
src/theme/prose/code-collapse.ts

✅ Files skipped from review due to trivial changes (1)

src/theme/prose/code-collapse.ts

johnson-jnr · 2026-06-10T19:53:57Z

Thanks for the review @benjamincanac

I have moved the logic to CodeCollapse. I also added logic to account for offset because of cases where a filename bar sits above the <pre> block as a sibling element as shown here:

fix(Pre): sync root div min-height to pre height to fix Safari codebl…

aa10c90

…ock layout

johnson-jnr requested a review from benjamincanac as a code owner June 7, 2026 16:00

github-actions Bot added the v4 #4488 label Jun 7, 2026

vercel Bot deployed to Preview – ui June 7, 2026 16:13 View deployment

benjamincanac requested changes Jun 8, 2026

View reviewed changes

johnson-jnr added 2 commits June 10, 2026 12:57

fix: move height calculations logic to CodeCollapse and account for o…

0683a12

…ffset.

Merge branch 'v4' into fix/safari-codeblock-layout

789421b

coderabbitai Bot reviewed Jun 10, 2026

View reviewed changes

vercel Bot deployed to Preview – ui June 10, 2026 20:01 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(Pre): sync root div min-height to pre height to fix Safari codeblock layout rendering#6565

fix(Pre): sync root div min-height to pre height to fix Safari codeblock layout rendering#6565
johnson-jnr wants to merge 3 commits into
nuxt:v4from
johnson-jnr:fix/safari-codeblock-layout

johnson-jnr commented Jun 7, 2026

Uh oh!

coderabbitai Bot commented Jun 7, 2026 •

edited

Loading

Walkthrough

Estimated code review effort

Uh oh!

pkg-pr-new Bot commented Jun 7, 2026 •

edited

Loading

Uh oh!

benjamincanac left a comment

Uh oh!

coderabbitai Bot left a comment

Uh oh!

johnson-jnr commented Jun 10, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

johnson-jnr commented Jun 7, 2026

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

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

Uh oh!

Walkthrough

Estimated code review effort

Uh oh!

pkg-pr-new Bot commented Jun 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

benjamincanac left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

johnson-jnr commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai Bot commented Jun 7, 2026 •

edited

Loading

pkg-pr-new Bot commented Jun 7, 2026 •

edited

Loading

johnson-jnr commented Jun 10, 2026 •

edited

Loading