Fix #4313 : Align footer content width with main page layout #4334
Fix #4313 : Align footer content width with main page layout #4334Saurabh-2607 wants to merge 6 commits intoOWASP:mainfrom
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
Summary by CodeRabbit
WalkthroughRefactors Footer layout to a single centered responsive grid, changes section rendering to use a normalized sections list (detecting social sections), renders social links with icons inline (removing previous icon-only block), and adds a fallback Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
frontend/src/utils/constants.ts (1)
105-108: Keep socials fully data-driven.This map drops the icon identity and is why
frontend/src/components/Footer.tsxhas to recover it by matchinglink.textback againstfooterIcons. That works today, but a copy change will silently remove the icon. Prefer carrying a stable social key or the icon itself on each generated link.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/utils/constants.ts` around lines 105 - 108, The footer mapping drops icon identity by mapping footerIcons to { href, text }, causing Footer.tsx to re-infer icons from link.text; change the mapping in the footer data (where footerIcons is transformed into the links array) to carry a stable identifier or the icon itself (e.g., include a key like social.key or an icon reference) so Footer.tsx can use that explicit field instead of matching on link.text; update any consumers (Footer.tsx) to read the new property (e.g., link.key or link.icon) and remove the brittle text-based lookup.frontend/src/components/Footer.tsx (1)
33-33: Avoid hardcoding the current section count into the grid template.
footerSectionsis data-driven now, but this class is pinned to five tracks. The next add/remove will need a matching class edit here, which is easy to miss. An auto-fit template would keep the layout aligned with the data.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/Footer.tsx` at line 33, The grid template is hardcoded to five columns; update the div in Footer.tsx (the element with class "grid w-full ... md:grid-cols-[repeat(5,max-content)]") to use an auto-fitting template so columns follow the footerSections data. Replace md:grid-cols-[repeat(5,max-content)] with an auto-fit/minmax variant such as md:grid-cols-[repeat(auto-fit,minmax(0,max-content))] (or md:grid-cols-[repeat(auto-fit,max-content)]), so the grid automatically creates columns to match footerSections without manual edits.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@frontend/src/components/Footer.tsx`:
- Line 33: The grid template is hardcoded to five columns; update the div in
Footer.tsx (the element with class "grid w-full ...
md:grid-cols-[repeat(5,max-content)]") to use an auto-fitting template so
columns follow the footerSections data. Replace
md:grid-cols-[repeat(5,max-content)] with an auto-fit/minmax variant such as
md:grid-cols-[repeat(auto-fit,minmax(0,max-content))] (or
md:grid-cols-[repeat(auto-fit,max-content)]), so the grid automatically creates
columns to match footerSections without manual edits.
In `@frontend/src/utils/constants.ts`:
- Around line 105-108: The footer mapping drops icon identity by mapping
footerIcons to { href, text }, causing Footer.tsx to re-infer icons from
link.text; change the mapping in the footer data (where footerIcons is
transformed into the links array) to carry a stable identifier or the icon
itself (e.g., include a key like social.key or an icon reference) so Footer.tsx
can use that explicit field instead of matching on link.text; update any
consumers (Footer.tsx) to read the new property (e.g., link.key or link.icon)
and remove the brittle text-based lookup.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 4b7cc780-6aa2-4153-bb9a-471f88c085da
📒 Files selected for processing (2)
frontend/src/components/Footer.tsxfrontend/src/utils/constants.ts
Saurabh-2607
dismissed stale reviews from coderabbitai[bot] and cubic-dev-ai[bot]
via
4b88fbf
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4334 +/- ##
==========================================
- Coverage 99.36% 99.33% -0.03%
==========================================
Files 520 520
Lines 16453 16465 +12
Branches 2247 2304 +57
==========================================
+ Hits 16348 16355 +7
- Misses 62 63 +1
- Partials 43 47 +4
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report in Codecov by Sentry.
🚀 New features to boost your workflow:
|
kasya
left a comment
kasya
left a comment
There was a problem hiding this comment.
Hi @Saurabh-2607 !
Thanks for working on this! I like the width update idea 👍🏼
Left a comment bellow ⬇️
And could you also resolve conflicts that show up right now? Thanks!
Saurabh-2607
dismissed stale reviews from coderabbitai[bot] and cubic-dev-ai[bot]
via
c2e9c76
|
|
@kasya Fixed 
|
2 participants
Proposed change
Resolves #4313
The footer content currently uses a smaller width compared to the main page sections, which causes the footer to appear visually misaligned with the rest of the page content.
This PR updates the footer container to use the same max-width and horizontal padding as the main layout components, ensuring consistent alignment across the page.
Changes made
Result
The footer content now aligns properly with the rest of the page components, improving visual consistency and layout balance.
Screenshots
Before
After
Checklist
make check-testlocally: all warnings addressed, tests passed