Conversation
There was a problem hiding this comment.
🔵 Needs a closer look
These are visual responsive-layout changes involving multi-breakpoint CSS grid line juggling whose correctness can only be reliably confirmed by human review on actual devices.
Pull request overview
This PR makes the YAPTIDE web UI responsive for mobile and smaller viewports. The core layout in WrapperApp uses a CSS grid with fixed drawer/content/sidebar columns; the change introduces breakpoint-based overrides so that, on small screens, the desktop navigation drawer is replaced by an off-canvas overlay opened via a hamburger button, and the sidebars flow below the main content instead of remaining fixed-width columns. Several header, results, and example panels get responsive flex/width adjustments to avoid overflow on narrow screens.
Changes:
- Add a mobile navigation experience in
WrapperApp(fixed hamburgerIconButton+Draweroverlay) and responsive grid template columns/rows viamd/lgbreakpoints, gated byuseMediaQuery(down('md')). - Move the editor and simulation sidebars to a stacked row below the content on mobile using responsive
gridRowvalues. - Apply responsive flex/width/typography tweaks in
HeaderPanel,EditorTitlebar,ResultsPanel, andExamplePanelto prevent overflow on small screens.
File summaries
| File | Description |
|---|---|
| src/WrapperApp/WrapperApp.tsx | Adds mobile nav overlay + hamburger, responsive grid columns/rows, and stacked sidebars below content on mobile. |
| src/WrapperApp/components/Header/HeaderPanel.tsx | Allows the header to wrap and centers items on small screens via responsive flex props. |
| src/ThreeEditor/components/Editor/Header/EditorTitlebar.tsx | Lets the project title wrap and caps its width per breakpoint to avoid overflow. |
| src/WrapperApp/components/Results/ResultsPanel.tsx | Stacks the results header row vertically on xs with responsive alignment/gap. |
| src/WrapperApp/components/Panels/ExamplePanel.tsx | Makes example cards full-width with a 500px max so they no longer overflow narrow viewports. |
Review details
- Files reviewed: 5/5 changed files
- Comments generated: 1
- Review effort level: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| gridTemplateColumns: | ||
| '[drawer-start drawer-end content-start sidebar-start] 1fr [content-end sidebar-end]', | ||
| gridTemplateRows: | ||
| '[header-start] minmax(52px, auto) [header-end content-start] minmax(calc(100vh - 180px), 1fr) [content-end sidebar-row-start] auto [sidebar-row-end]' |
This pull request introduces several improvements to the application's responsive design, focusing on enhancing the mobile user experience. The main changes include adding a mobile navigation drawer with a hamburger menu, updating grid layouts and panels to adjust their positioning and sizing on smaller screens, and improving text wrapping and alignment for better readability. These updates ensure the interface remains user-friendly and visually coherent across different device sizes.
Mobile navigation and layout improvements:
Drawerand a floating hamburgerIconButtonthat appears only on mobile; the navigation panel now overlays the content on small screens and closes when a tab is selected or the backdrop is clicked. (src/WrapperApp/WrapperApp.tsx, [1] [2] [3] [4]StyledAppGrid) to adjust row and column structure based on screen size, allowing sidebars to drop below content on mobile instead of remaining as fixed columns. (src/WrapperApp/WrapperApp.tsx, src/WrapperApp/WrapperApp.tsxL40-R64)Responsive sidebar and panel adjustments:
gridRowsettings. (src/WrapperApp/WrapperApp.tsx, [1] [2]HeaderPaneland its child components to wrap and center content on mobile, ensuring menus and titles are accessible and well-aligned. (src/WrapperApp/components/Header/HeaderPanel.tsx, src/WrapperApp/components/Header/HeaderPanel.tsxR21-R43)ResultsPanellayout to stack controls vertically on small screens and horizontally on larger ones, improving usability. (src/WrapperApp/components/Results/ResultsPanel.tsx, src/WrapperApp/components/Results/ResultsPanel.tsxR112-R115)Text and content wrapping:
src/ThreeEditor/components/Editor/Header/EditorTitlebar.tsx, [1];src/WrapperApp/components/Panels/ExamplePanel.tsx, [2]