fix: align docs footer with content and fix mobile text truncation#110
fix: align docs footer with content and fix mobile text truncation#110KhaledSaeed18 wants to merge 1 commit into
Conversation
|
@KhaledSaeed18 is attempting to deploy a commit to the UI-Layouts OSS Program Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe pull request refines the footer component by repositioning it within the page section's DOM hierarchy and updating its Tailwind styling. The footer now nests directly inside the main ChangesFooter Layout and Styling Update
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/ui-layout/components/website/footer.tsx (1)
5-29: 💤 Low valueUnnecessary
<>Fragment wrapping a single element.The component returns exactly one
<footer>, so the enclosing Fragment adds no value.♻️ Proposed simplification
- return ( - <> - <footer className='mt-8 not-prose py-6'> - ... - </footer> - </> - ); + return ( + <footer className='mt-8 not-prose py-6'> + ... + </footer> + );🤖 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 `@apps/ui-layout/components/website/footer.tsx` around lines 5 - 29, The fragment wrapper `<>...</>` around the single <footer> element is unnecessary; update the component (the JSX return that currently wraps <footer> with a fragment) to return the <footer> directly by removing the surrounding fragment tokens so the component returns the footer element alone.
🤖 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.
Nitpick comments:
In `@apps/ui-layout/components/website/footer.tsx`:
- Around line 5-29: The fragment wrapper `<>...</>` around the single <footer>
element is unnecessary; update the component (the JSX return that currently
wraps <footer> with a fragment) to return the <footer> directly by removing the
surrounding fragment tokens so the component returns the footer element alone.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ac3f4ca6-169f-4c2f-b045-ec2913796006
📒 Files selected for processing (2)
apps/ui-layout/app/(docs-page)/components/[...slug]/page.tsxapps/ui-layout/components/website/footer.tsx
1 participant
Summary
Fixed two layout bugs in the docs page footer ("Built by naymur. The source code is available on GitHub."):
<section>that holds all doc content, so it didn't inherit themx-auto+ responsivemax-w-*constraints causing it to overflow to the left and misalign with the content above it.text-balancewas collapsing the available line width, cutting the text off mid-sentence at the bottom.Changes
apps/ui-layout/app/(docs-page)/components/[...slug]/page.tsx: moved<Footer />inside the<section>so it shares the samemx-autoandmax-w-*alignment as all content above itapps/ui-layout/components/website/footer.tsx: removedtext-balance, added proper vertical paddingBefore / After
Large Screen
Mobile Screen
Root Cause
<Footer />was placed after the closing</section>tag inpage.tsx. The section usesmx-autowith breakpoint-specificmax-w-*values (lg:max-w-140,xl:max-w-190,2xl:max-w-210) to center and constrain content, but the footer sat in the parent div with no such constraints, stretching full width and starting at the left edge regardless of the content offset.Type of Change
Checklist
not-prosepreserved)Summary by CodeRabbit
Style
Refactor