fix: responsive layout, improved padding and alignment for Dapps, Co…#33
Open
reach2saksham wants to merge 4 commits intoDjedAlliance:mainfrom
Open
fix: responsive layout, improved padding and alignment for Dapps, Co…#33reach2saksham wants to merge 4 commits intoDjedAlliance:mainfrom
reach2saksham wants to merge 4 commits intoDjedAlliance:mainfrom
Conversation
…tributors, Footer and Navbar
📝 WalkthroughWalkthroughRemoved navbar max-width, expanded navbar mobile breakpoint to 928px, increased navbar link gap, added responsive padding rules; refactored Dapps to remove slidesPerView prop and introduce desktop grid + mobile Swiper with pagination; adjusted Swiper pagination and contributor card hover styling; footer spacing/layout updated. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/App.tsx (1)
33-61:⚠️ Potential issue | 🟡 MinorMissing cleanup for IntersectionObserver.
The
IntersectionObservercreated in this effect is never disconnected when the component unmounts, which can cause memory leaks and attempts to update state on unmounted components.Proposed fix
useEffect(() => { const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => { entries.forEach((entry) => { if (entry.isIntersecting) { switch (entry.target.id) { case 'home': document.getElementsByClassName('active')[0].classList.remove('active'); document.getElementById('homeLink')?.classList.add('active'); break; case 'djed_apps': document.getElementsByClassName('active')[0].classList.remove('active'); document.getElementById('appsLink')?.classList.add('active'); break; case 'contributors': document.getElementsByClassName('active')[0].classList.remove('active'); document.getElementById('contributorsLink')?.classList.add('active'); } } }); }, { threshold: 0.8 }); const homeElementToObserve = document.querySelector('#home'); const appsElementToObserve = document.querySelector('#djed_apps'); const contributorElementToObserve = document.querySelector('#contributors'); if (homeElementToObserve && appsElementToObserve && contributorElementToObserve) { observer.observe(homeElementToObserve); observer.observe(appsElementToObserve); observer.observe(contributorElementToObserve); } + + return () => observer.disconnect(); }, []);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/App.tsx` around lines 33 - 61, The effect creates an IntersectionObserver (observer) but never cleans it up; update the useEffect to return a cleanup function that disconnects the observer (or unobserves the tracked nodes) to avoid memory leaks: after you set up observer.observe(...) for homeElementToObserve, appsElementToObserve, and contributorElementToObserve, add a return () => { if (observer) { observer.disconnect(); /* or call observer.unobserve(...) for each of homeElementToObserve/appsElementToObserve/contributorElementToObserve if you prefer finer-grained cleanup */ } } so the observer is properly removed when the component unmounts.
🧹 Nitpick comments (3)
src/components/pages/dapps/Dapps.tsx (2)
24-33: Pagination styles duplicated with Contributors.tsx.The pagination bullet styling is nearly identical between Dapps and Contributors (only the ID selector differs). Consider extracting shared pagination styles to
App.cssusing a common class.Example shared style in App.css
/* Shared gold pagination styling */ .gold-pagination .swiper-pagination-bullet { background: `#b8973a`; opacity: 0.4; } .gold-pagination .swiper-pagination-bullet-active { background: `#d4a843`; opacity: 1; }Then apply
gold-paginationclass to both Swiper containers.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/pages/dapps/Dapps.tsx` around lines 24 - 33, Move the duplicated inline pagination CSS in Dapps.tsx (the style block targeting `#djed_apps` .swiper-pagination-bullet and .swiper-pagination-bullet-active) into a shared rule in App.css (e.g. create a .gold-pagination selector with the two .swiper-pagination-bullet and .swiper-pagination-bullet-active rules), then remove the inline <style> from Dapps.tsx and apply the .gold-pagination class to the Swiper container in both Dapps.tsx and Contributors.tsx so they reuse the shared styling.
74-98: Remove commented-out code.This block of dead code should be removed. If needed for reference, it's preserved in version control history.
Proposed fix
- -// import DappCard from '../../elements/cards/DappCard'; -// import ContributorCard from '../../elements/cards/ContributorCard'; -// import ErgoImage from '../../../assets/ergo.png'; - -// export default function Dapps(): JSX.Element { -// const cardTextErgo = 'Interact with SigmaUSD,\nthe first deployment of Djed,\non the Ergo Blockchain.'; -// const cardTextCOTI = 'Interact with COTI\'s Djed\nimplemented in Plutus\non the Cardano Blockchain.'; -// const cardTextMilkomeda = 'Interact with Djed on\nthe Milkomeda-C1\nEVM Sidechain of Cardano.'; -// const cardTextZephyr = 'Interact with Zephyr Protocol, \na privacy focused, native chain \nDjed Implementation'; - -// return ( -// <div className="py-20 my-20 items-center justify-center" id="djed_apps"> -// <h4 className="dappsSubtitle my-3">Deployments of</h4> -// <h2 className="dappsTitle mb-20">Djed</h2> -// <div className="sm:flex-row lg:flex align-middle justify-center md:flex"> -// <DappCard cardTitle="SigmaUSD" href="https://sigmausd.io/#/" cardText={cardTextErgo} /> -// <DappCard cardTitle="Djed powered by COTI" href="https://djed.xyz/" cardText={cardTextCOTI} /> -// <DappCard cardTitle="Milkomeda Djed Osiris" href="https://milkomeda-c1.djed.one/" cardText={cardTextMilkomeda} /> -// <DappCard cardTitle="Zephyr Protocol" href="https://zephyrprotocol.com/" cardText={cardTextZephyr} /> -// <ContributorCard contributor="Ergo" imageSrc={ErgoImage} contributorWeb="https://ergoplatform.org/en/" /> -// <ContributorCard contributor="Ergo" imageSrc={ErgoImage} contributorWeb="https://ergoplatform.org/en/" /> -// </div> -// </div> -// ); -// }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/pages/dapps/Dapps.tsx` around lines 74 - 98, Remove the entire commented-out block in Dapps.tsx (the commented imports: DappCard, ContributorCard, ErgoImage and the commented default export function Dapps with its JSX) since it's dead code; keep the file clean by deleting those comment lines referencing DappCard, ContributorCard, ErgoImage and the function Dapps, leaving only active code or an empty/updated export as intended (use version control history to recover if needed).src/App.css (1)
135-150: Misleading comments in media queries.The comments don't accurately describe the breakpoints:
- Line 143: Comment says "md:px-16 equivalent" but this is at
768px(md breakpoint) with4rempadding- Line 148: Comment says "md:px-16 equivalent" but this is at
1024px(lg breakpoint)Suggested comment corrections
`@media` (min-width: 768px) { .navbar-container { - padding: 1rem 4rem; /* md:px-16 equivalent */ + padding: 1rem 4rem; /* md breakpoint */ } } `@media` (min-width: 1024px) { .navbar-container { - padding: 1rem 6rem; /* md:px-16 equivalent */ + padding: 1rem 6rem; /* lg breakpoint */ } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/App.css` around lines 135 - 150, Comments on the media queries for .navbar-container are inaccurate; update them to match the actual padding values: the 640px block (padding 1rem 4rem) should indicate sm:px-16, the 768px block (padding 1rem 4rem) should indicate md:px-16, and the 1024px block (padding 1rem 6rem) should indicate lg:px-24 so the comments reflect the true Tailwind equivalents for .navbar-container.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/elements/cards/ContributorCard.tsx`:
- Line 16: The <img> in the ContributorCard component is missing an alt
attribute; update the ContributorCard component to supply a meaningful alt text
for the image (preferably using the contributor's name or a descriptive
fallback) and ensure the prop/variable (e.g., name or title) used for the alt is
available and non-empty so screen readers can describe the image; if no name
exists, use a neutral fallback like "Contributor photo" to satisfy WCAG 1.1.1.
In `@src/components/pages/contributors/Contributors.tsx`:
- Line 39: In Contributors.tsx fix the Swiper prop assignment so loopedSlides is
never zero: when computing loopedSlides from props.slidesPerView (the current
line setting loopedSlides={props.slidesPerView - 1}), change the logic to ensure
it is at least 1 (e.g., use a max(1, ...) style guard) so that when
props.slidesPerView === 1 loopedSlides becomes 1; update the assignment where
loopedSlides is set to reference props.slidesPerView and enforce the minimum.
---
Outside diff comments:
In `@src/App.tsx`:
- Around line 33-61: The effect creates an IntersectionObserver (observer) but
never cleans it up; update the useEffect to return a cleanup function that
disconnects the observer (or unobserves the tracked nodes) to avoid memory
leaks: after you set up observer.observe(...) for homeElementToObserve,
appsElementToObserve, and contributorElementToObserve, add a return () => { if
(observer) { observer.disconnect(); /* or call observer.unobserve(...) for each
of homeElementToObserve/appsElementToObserve/contributorElementToObserve if you
prefer finer-grained cleanup */ } } so the observer is properly removed when the
component unmounts.
---
Nitpick comments:
In `@src/App.css`:
- Around line 135-150: Comments on the media queries for .navbar-container are
inaccurate; update them to match the actual padding values: the 640px block
(padding 1rem 4rem) should indicate sm:px-16, the 768px block (padding 1rem
4rem) should indicate md:px-16, and the 1024px block (padding 1rem 6rem) should
indicate lg:px-24 so the comments reflect the true Tailwind equivalents for
.navbar-container.
In `@src/components/pages/dapps/Dapps.tsx`:
- Around line 24-33: Move the duplicated inline pagination CSS in Dapps.tsx (the
style block targeting `#djed_apps` .swiper-pagination-bullet and
.swiper-pagination-bullet-active) into a shared rule in App.css (e.g. create a
.gold-pagination selector with the two .swiper-pagination-bullet and
.swiper-pagination-bullet-active rules), then remove the inline <style> from
Dapps.tsx and apply the .gold-pagination class to the Swiper container in both
Dapps.tsx and Contributors.tsx so they reuse the shared styling.
- Around line 74-98: Remove the entire commented-out block in Dapps.tsx (the
commented imports: DappCard, ContributorCard, ErgoImage and the commented
default export function Dapps with its JSX) since it's dead code; keep the file
clean by deleting those comment lines referencing DappCard, ContributorCard,
ErgoImage and the function Dapps, leaving only active code or an empty/updated
export as intended (use version control history to recover if needed).
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/App.csssrc/App.tsxsrc/components/elements/cards/ContributorCard.tsxsrc/components/pages/contributors/Contributors.tsxsrc/components/pages/dapps/Dapps.tsxsrc/components/pages/footer/Footer.tsx
… loopslide in Contributors
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/pages/contributors/Contributors.tsx (1)
27-36: Consider moving pagination styles to a CSS file.The inline
<style>tag works but has drawbacks:
- Styles are re-injected on every render
- Harder to maintain alongside other component styles
- The scoped
#contributorsselector aligns with PR objectives for isolated pagination stylingSince
src/App.cssalready exists and the PR adds similar pagination styling, consider consolidating these rules there.♻️ Suggested approach
Move to
App.cssor a dedicated CSS file:/* Scoped pagination for contributors section */ `#contributors` .swiper-pagination-bullet { background: `#b8973a`; opacity: 0.4; } `#contributors` .swiper-pagination-bullet-active { background: `#d4a843`; opacity: 1; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/pages/contributors/Contributors.tsx` around lines 27 - 36, Move the inline <style> block out of Contributors.tsx and into a stylesheet (e.g., App.css or a new contributors CSS file) so the pagination rules are not re-injected on each render; locate the inline rules targeting "#contributors .swiper-pagination-bullet" and "#contributors .swiper-pagination-bullet-active" in the Contributors component and copy those selectors and declarations into the chosen CSS file, then remove the <style> element from Contributors.tsx and ensure the CSS file is imported at the app level so the scoped pagination styles remain applied.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/pages/contributors/Contributors.tsx`:
- Around line 27-36: Move the inline <style> block out of Contributors.tsx and
into a stylesheet (e.g., App.css or a new contributors CSS file) so the
pagination rules are not re-injected on each render; locate the inline rules
targeting "#contributors .swiper-pagination-bullet" and "#contributors
.swiper-pagination-bullet-active" in the Contributors component and copy those
selectors and declarations into the chosen CSS file, then remove the <style>
element from Contributors.tsx and ensure the CSS file is imported at the app
level so the scoped pagination styles remain applied.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/elements/cards/ContributorCard.tsxsrc/components/pages/contributors/Contributors.tsxsrc/components/pages/footer/Footer.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/pages/footer/Footer.tsx
8 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Responsive layout, alignment and padding fixes for the Dapps section, Contributors section, Footer, and Navbar. Fixes broken carousel layouts on mobile, inconsistent card heights, cramped grid columns at mid-range breakpoints, and the Djed logo disappearing in the navbar between 768–928px viewports. Inconsistent gaps in mobile navbar UI.
Addressed Issues:
Fixes #30
Screenshots/Recordings:
Before:
After:
Additional Notes:
#d4a843) are scoped to their respective section IDs (#djed_apps,#contributors) so they don't bleed into other Swiper instances.Checklist
Summary by CodeRabbit
New Features
Style