Fix issue #766 | Fixes unwanted scrollbars for the doc website #767
Conversation
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
docs/app/docs/layout.tsxOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. WalkthroughThe pull request involves modifications to the layout and scrolling behavior across multiple components in the documentation application. Changes primarily focus on adjusting height, overflow, and scrolling properties in key files like Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
docs/app/docs/layout.tsx (2)
11-11: Consider a more flexible height solution.While changing to
h-[94vh]helps prevent double scrollbars, it might be brittle:
- Fixed 94vh assumes specific header/footer heights
- Could break if header/footer dimensions change
Consider using CSS Grid or Flexbox for dynamic height calculation:
- className="lg:flex space-x-2 w-full h-[94vh]" + className="lg:flex space-x-2 w-full min-h-0 flex-1"Then ensure the parent container uses proper flex layout.
35-36: Remove unnecessary empty lines at the end of file.export default Layout; - -
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
docs/app/docs/layout.tsx(2 hunks)docs/app/page.tsx(1 hunks)docs/components/Main/Main.js(1 hunks)docs/components/navigation/Navigation.js(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/components/navigation/Navigation.js
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (3)
docs/components/Main/Main.js (1)
20-26: LGTM! Verify layout behavior across different viewport sizes.The removal of fixed height and overflow constraints should help eliminate unwanted scrollbars. The changes allow content to flow naturally while maintaining the theme-based background.
Please verify:
- Layout behavior on different screen sizes
- No content overflow issues when resizing the window
- Smooth scrolling experience without double scrollbars
docs/app/page.tsx (1)
27-27: LGTM! Clean layout structure for demo components.The layout structure for demo components is well-organized with appropriate spacing and positioning.
docs/app/docs/layout.tsx (1)
15-15: LGTM! Improved scrolling behavior.The change to
overflow-y-scrollon the content area is appropriate:
- Restricts scrolling to vertical axis only
- Prevents unwanted horizontal scrollbar
- Maintains consistent scrollbar visibility
| <div className='h-screen'> | ||
| <LandingBgPattern /> | ||
| <div className='lg:p-10 flex flex-col overflow-scroll'> | ||
| <div className='lg:p-10 flex flex-col'> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider removing h-screen for better content flow.
While removing overflow-scroll helps eliminate unwanted scrollbars, the h-screen class on the outer div might still cause issues:
- It forces the content to fit the viewport height
- Could create scrolling conflicts with parent containers
Consider this change:
- <div className='h-screen'>
+ <div className='min-h-screen'>This would:
- Ensure minimum full viewport height
- Allow content to expand naturally when needed
- Better integrate with the scrolling changes in other components
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className='h-screen'> | |
| <LandingBgPattern /> | |
| <div className='lg:p-10 flex flex-col overflow-scroll'> | |
| <div className='lg:p-10 flex flex-col'> | |
| <div className='min-h-screen'> | |
| <LandingBgPattern /> | |
| <div className='lg:p-10 flex flex-col'> |
There was a problem hiding this comment.
Isn't that a bg pattren?
There was a problem hiding this comment.
@StDensity You're right - LandingBgPattern is indeed a fixed-position background pattern! However, the h-screen class on the container still affects how the content (HeroSection and demos) is laid out. Changing to min-h-screen would help the content flow more naturally while maintaining at least full viewport height. Would you like to keep the current behavior or try the suggested change?
(｀･ω･´)ゞ
🔗 Analysis chain
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for LandingBgPattern implementation
ast-grep --pattern 'export default function LandingBgPattern() {
$$$
}'
# Also try to find the component if it's defined differently
rg -g '*.{tsx,jsx,js}' -A 5 'LandingBgPattern'
Length of output: 15698
1 participant
#766
Successfully merging this pull request will close these issues: