[Programs] Fix LFX 2026 layout and sidebar alignment - #7923
Conversation
Signed-off-by: hiyach28 <hiyach28@gmail.com>
📝 WalkthroughWalkthroughThe LFX 2026 mentorship page replaces inline layout styles with responsive CSS classes. The sidebar now groups the logo and navigation in a dedicated column with responsive spacing and sizing. ChangesLFX responsive layout
Possibly related issues
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 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 |
![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 (1)
src/collections/programs/Programs.style.js (1)
37-47: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse theme spacing values for the new gaps.
Lines 37 and 47 hard-code
2reminside a styled-component. Replace both values with the repository’s spacing token. Add a theme token first if no suitable token exists.As per coding guidelines, use theme values for styled-components.
🤖 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/collections/programs/Programs.style.js` around lines 37 - 47, Update the gap declarations in the styled component containing .lfx-sidebar-col to use the repository’s theme spacing token instead of hard-coded 2rem values. If no suitable spacing token exists, add one to the theme and reference it consistently for both gaps.Source: Coding guidelines
🤖 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.
Inline comments:
In `@src/collections/programs/Programs.style.js`:
- Around line 39-40: Align the mobile visual and DOM order for accessibility: in
src/collections/programs/Programs.style.js lines 39-40, replace the reverse flex
direction with normal column order, and in
src/collections/programs/lfx-2026/lfx-2026.mdx lines 402-412, move the
.lfx-sidebar-col block before the timeline so keyboard and assistive-technology
traversal matches the intended visual order.
---
Nitpick comments:
In `@src/collections/programs/Programs.style.js`:
- Around line 37-47: Update the gap declarations in the styled component
containing .lfx-sidebar-col to use the repository’s theme spacing token instead
of hard-coded 2rem values. If no suitable spacing token exists, add one to the
theme and reference it consistently for both gaps.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: f95d8eeb-e953-44a9-a67c-b8dc5081afcd
📒 Files selected for processing (2)
src/collections/programs/Programs.style.jssrc/collections/programs/lfx-2026/lfx-2026.mdx
Maanvi212006
left a comment
Maanvi212006
left a comment
There was a problem hiding this comment.
Add the issue being resolved here as when this PR gets merged, the issue too gets closed
|
Rightt! missed it, thanks for pointing it out. |
3 participants
Description
This PR fixes #7921
This PR resolves layout and visual discrepancies on the LFX 2026 Programs page, aligning its aesthetics with the established LFX 2025 page while correctly preserving the functionality of the sticky navigation sidebar.
Problem
Users observed several visual and functional issues on the LFX 2026 Programs page:
This was more than a simple spacing issue. The page's underlying HTML structure introduced conflicting CSS constraints where Flexbox rules collided with Block Formatting Context (BFC) rules and float behaviors, making superficial margin adjustments ineffective.
Cause of issue:
overflow: hiddencontainer. This established a new Block Formatting Context (BFC) that broke native inline float behavior, forcing the logo to drop below the adjacent timeline text.250pxwidth. The logo shrunk to fit this artificial constraint instead of rendering at its intended19vw.LfxPageNavcomponent was placed directly as a child of a flex column. Its CSS propertyflex: 0 0 250pxmistakenly targeted the vertical main-axis, forcing the component's height to a fixed 250px and leaving empty space underneath it.position: stickyrequires its containing block to be taller than the sticky element itself. If the right-hand column didn't explicitly stretch to match the height of the left-hand text column, the sidebar would immediately stop sticking on scroll.Solution
The implementation fundamentally restructures the page using standard CSS Flexbox properties
overflow: hiddencontainer to restore native inline alignment with the timeline heading..lfx-sidebar-colright-hand flex column.flex-shrink: 0, preventing the column from collapsing and allowing the logo to strictly maintain its intended19vwwidth.align-self: stretchto match the height of the timeline content. Inside it, a newdivwithflex-grow: 1wraps the sidebar, ensuring the containing block spans to the bottom of the page to maximize sticky scroll distance.LfxPageNavinside a standard blockdivwrapper, theflex: 0 0 250pxrule is evaluated in a block context, preventing it from incorrectly stretching the vertical height.Screenshots
Before
After
Validation
< 900px.19vwwithout shrinking.Signed commits
Summary by CodeRabbit