Bug Description
Bug Description
The Dapps section renders a broken Swiper carousel on mobile due to an invalid slidesPerView prop value.
1. Second Swiper receives slidesPerView={-1} on mobile
- In
Dapps.tsx, the second Swiper uses slidesPerView={props.slidesPerView - 2}. On mobile, slidesPerView is set to 1 in App.tsx, making this slidesPerView={-1}. Swiper does not handle negative values gracefully and breaks the carousel.
Proposed Approach
For Issue 1 — Guard against invalid slidesPerView:
- Clamp the value before passing it to Swiper:
slidesPerView={Math.max(1, props.slidesPerView - 2)}
- Or conditionally render the second Swiper only when
props.slidesPerView > 2
Steps to Reproduce
Steps to Reproduce*
- Open the site on a mobile device or resize browser to ≤ 640px
- Scroll down to the "Stablecoins based on the Djed Protocol" section
- Observe the second Swiper carousel (containing "Djed powered by COTI" and "Zephyr Stable Dollar") — it renders broken or invisible
- In the browser console, Swiper will log a warning/error about the invalid
slidesPerView value
Logs and Screenshots
No response
Environment Details
No response
Impact
Medium - Feature works but has issues
Code of Conduct
Bug Description
Bug Description
The
Dappssection renders a broken Swiper carousel on mobile due to an invalidslidesPerViewprop value.1. Second Swiper receives
slidesPerView={-1}on mobileDapps.tsx, the second Swiper usesslidesPerView={props.slidesPerView - 2}. On mobile,slidesPerViewis set to1inApp.tsx, making thisslidesPerView={-1}. Swiper does not handle negative values gracefully and breaks the carousel.Proposed Approach
For Issue 1 — Guard against invalid
slidesPerView:slidesPerView={Math.max(1, props.slidesPerView - 2)}props.slidesPerView > 2Steps to Reproduce
Steps to Reproduce*
slidesPerViewvalueLogs and Screenshots
No response
Environment Details
No response
Impact
Medium - Feature works but has issues
Code of Conduct