docs(code-preview): update overflow to auto#2599
Conversation
|
✅ Deploy Preview for ix-storybook canceled.
|
📝 WalkthroughWalkthroughThe ChangesGlobal CSS html rule update
Estimated code review effort: 1 (Trivial) | ~3 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the global CSS across multiple test applications (Angular Standalone, Angular, HTML, React, and Vue) by changing the html element's overflow property from hidden to auto. The reviewer correctly pointed out that combining width: 100vw with overflow: auto triggers an unwanted horizontal scrollbar when vertical scrolling is active, as 100vw includes the scrollbar width. To fix this layout issue, it is recommended to change width: 100vw to width: 100%.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
packages/react-test-app/src/preview-examples/global.css (1)
16-25: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winSame
#root: width: 100vwvs.html: width: 100%mismatch as noted in the other test apps.Once
overflow: autoallows scrollbars,#rootat100vwcan overflow horizontally past the scrollbar-adjusted viewport. Recommend aligning#roottowidth: 100%for consistency with thehtmlfix.🤖 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 `@packages/react-test-app/src/preview-examples/global.css` around lines 16 - 25, The global layout styles have a width mismatch between html and `#root` that can cause horizontal overflow when overflow:auto introduces scrollbars. Update the `#root` rule in global.css to use the same width behavior as html by aligning it to width: 100%, keeping the sizing consistent across the preview app.packages/angular-standalone-test-app/src/preview-examples/global.css (1)
16-25: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winPotential horizontal overflow:
#rootstill useswidth: 100vwwhilehtmloverflow is nowauto.With
overflow: hiddenremoved, browser scrollbars can now appear.100vwincludes the scrollbar's width, so once a vertical scrollbar shows,#rootat100vwwill overflow horizontally, causing an unwanted horizontal scrollbar — partially reintroducing the clipping/overflow problem this change is meant to fix. Sincehtmlwas switched towidth: 100%for this exact reason, consider applying the same fix to#root.💡 Suggested fix
`#root` { height: 100vh; - width: 100vw; + width: 100%; }🤖 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 `@packages/angular-standalone-test-app/src/preview-examples/global.css` around lines 16 - 25, The layout in global styles still risks horizontal overflow because `#root` uses width: 100vw while html now allows scrollbars with overflow: auto. Update the `#root` rule in global.css to use a viewport-safe width approach consistent with html width: 100%, and keep the sizing aligned with the root container so scrollbar width does not create an extra horizontal scroll.packages/vue-test-app/src/preview-examples/global.css (1)
16-25: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winSame
#root: width: 100vwvs.html: width: 100%mismatch as noted in the other test apps.Same horizontal-overflow risk as flagged in
packages/angular-standalone-test-app/src/preview-examples/global.cssandpackages/react-test-app/src/preview-examples/global.css—#rootshould likely move towidth: 100%alongside thehtmlchange.🤖 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 `@packages/vue-test-app/src/preview-examples/global.css` around lines 16 - 25, The global layout styles in the preview example have a width mismatch between html and `#root` that can cause horizontal overflow. Update the `#root` rule in global.css to use the same width behavior as html by changing it from a viewport width to a full parent width, keeping the existing html and `#root` selectors aligned with the patterns used in the other test apps.
🤖 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.
Outside diff comments:
In `@packages/angular-standalone-test-app/src/preview-examples/global.css`:
- Around line 16-25: The layout in global styles still risks horizontal overflow
because `#root` uses width: 100vw while html now allows scrollbars with overflow:
auto. Update the `#root` rule in global.css to use a viewport-safe width approach
consistent with html width: 100%, and keep the sizing aligned with the root
container so scrollbar width does not create an extra horizontal scroll.
In `@packages/react-test-app/src/preview-examples/global.css`:
- Around line 16-25: The global layout styles have a width mismatch between html
and `#root` that can cause horizontal overflow when overflow:auto introduces
scrollbars. Update the `#root` rule in global.css to use the same width behavior
as html by aligning it to width: 100%, keeping the sizing consistent across the
preview app.
In `@packages/vue-test-app/src/preview-examples/global.css`:
- Around line 16-25: The global layout styles in the preview example have a
width mismatch between html and `#root` that can cause horizontal overflow. Update
the `#root` rule in global.css to use the same width behavior as html by changing
it from a viewport width to a full parent width, keeping the existing html and
`#root` selectors aligned with the patterns used in the other test apps.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 489d9406-1004-404f-a1da-a81f7bf252c6
📒 Files selected for processing (5)
packages/angular-standalone-test-app/src/preview-examples/global.csspackages/angular-test-app/src/preview-examples/global.csspackages/html-test-app/src/preview-examples/global.csspackages/react-test-app/src/preview-examples/global.csspackages/vue-test-app/src/preview-examples/global.css
nuke-ellington
changed the title
nuke-ellington
changed the title
4 participants
💡 What is the current behavior?
Preview example pages in all five test apps set
overflow: hiddenon thehtmlelement inglobal.css. When example content exceeds the viewport (common in embedded code previews), overflow is clipped and the page cannot be scrolled.GitHub Issue Number: IX-4305 (branch
feature/IX-4305)🆕 What is the new behavior?
html { overflow: hidden; }is changed tooverflow: autoinsrc/preview-examples/global.cssacross all test apps.packages/html-test-apppackages/react-test-apppackages/vue-test-apppackages/angular-test-apppackages/angular-standalone-test-app🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
pnpm test) — N/Apnpm lint)pnpm build, changes pushed)Summary by CodeRabbit