Web: Add mobile-responsive layout for pool cards

[dimka90]

Summary

The pool cards on the main page do not render well on mobile viewports — text overflows, buttons overlap, and the layout is hard to navigate. Add responsive styles so the UI is usable on screens down to 360px wide.

Tasks

• Make pool cards stack vertically on small screens
• Truncate long titles/descriptions with ellipsis
• Ensure buttons are tappable (min 44px hit area)
• Test on 360px, 414px, and tablet viewports

Acceptance criteria

• Pool cards render without overflow on 360px-wide screens
• All interactive elements are tappable
• No horizontal scroll on mobile

[OluRemiFour]

@OluRemiFour has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I can take this on. I've gone through the details and will provide a well-tested solution aligned with the project standards.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @OluRemiFour to this issue.

[Glittersup]

@Glittersup has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I’m interested in handling this issue. I’ve built and tested web3 applications across contracts, backend services, and frontend flows.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Glittersup to this issue.

[VictorEzenma]

@VictorEzenma has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi maintainer, I would love to contribute to this issue by applying the necessary fixes and improvements to get it done

ℹ️ Repo Maintainers: To accept this application, review their application or assign @VictorEzenma to this issue.

[drips-wave]

Congratulations, @VictorEzenma! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @VictorEzenma: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been marked as completed by a Drips Wave moderator for @VictorEzenma as part of the Stellar Wave Program's 6th Wave 🥳

Moderator's reason: [Auto-assessed] The PR #753 in dimka90/predinex-stellar reasonably addresses the issue by implementing responsive styles, increasing button hit areas to 44px, and adding text truncation to prevent layout overflow on mobile devices. There have been no maintainer objections or comments since the PR was opened 6 days ago, and the changes align directly with the acceptance criteria.

😎 @VictorEzenma: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.

ℹ️ Note: This issue was marked complete via moderation. Points were issued even though the GitHub issue remains open.