Fix: dev docs layout on medium screen sizes [Fixes #8364] #12460
Conversation
todo: find solution that doesn't use flex=1/width=0
WalkthroughThe updates focus on refining the layout and responsiveness of the documentation navigation components. Adjustments were made to component widths, breakpoints for larger screens, and the overall spacing within the navigation elements. These changes aim to improve the consistency and user experience across different device sizes, particularly addressing layout issues in the documentation sections. Changes
Assessment against linked issues
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -150,7 +150,7 @@ const Content = (props: ChildOnlyProp) => { | |||
| <Box | |||
| as={MainArticle} | |||
| flex={`1 1 ${mdBreakpoint}`} | |||
| maxW={{ base: "full", lg: mdBreakpoint }} | |||
| w={{ base: "full", lg: "0" }} | |||
There was a problem hiding this comment.
@pettinarip Any thoughts on a better way to handle this? Not a fan of using a zero width, but it works exactly as I'd like so figured I'd commit it and see what others thought
There was a problem hiding this comment.
As alternatives we could set minW="0" or
| w={{ base: "full", lg: "0" }} | |
| overflow="auto" |
wackerow
requested review from
corwintines,
pettinarip,
minimalsm and
nhsz
as code owners
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files selected for processing (3)
- src/components/DocsNav.tsx (2 hunks)
- src/components/SideNav.tsx (1 hunks)
- src/layouts/Docs.tsx (1 hunks)
Additional comments: 3
src/components/SideNav.tsx (1)
- 159-160: The adjustments to the width and minimum width from
298pxto256pxare aligned with the objective to improve the layout for medium screen sizes. Ensure to verify the layout consistency across different screen sizes and components to maintain a uniform user experience.src/components/DocsNav.tsx (2)
- 61-62: The adjustments to the width and flex properties in the
CardLinkcomponent are aimed at improving layout responsiveness. Ensure to verify the impact on other screen sizes to maintain visual consistency across the board.- 148-155: The updates to the direction, breakpoints, and spacing in the
DocsNavcomponent are likely to enhance the layout's responsiveness and visual consistency. It's important to verify the layout consistency and user experience across different screen sizes to ensure these changes achieve the desired improvements.
Preview link
Related Issue
Summary by CodeRabbit