Mobile leaderboard responsiveness

[simo6529]

Summary by CodeRabbit

Release Notes

• Style

  • Updated layout styling across mobile and leaderboard views for improved responsive behavior and overflow handling.
  • Enhanced spacing and alignment in wave leaderboard gallery item displays.

• Bug Fixes

  • Simplified rank label display, removing "CURRENT" prefix from non-leading rank positions.
  • Improved touch interaction behavior to preserve native scrolling during long-press actions.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request applies consistent layout constraints and styling improvements across multiple components, adds test coverage for voting and touch interactions, updates rank label text, and adjusts long-press default behavior handling. Changes are primarily presentational with minimal logic modifications.

Changes

Cohort / File(s)	Summary
Test Coverage Expansion __tests__/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.interaction.test.tsx	Quote normalization, expanded module mocks with path aliases, explicit component mocks for voting/modal/header/footer elements, and new test cases validating voting modal behavior, mobile dropdown options, and native touch scrolling preservation.
Long-press Behavior Configuration components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx	Added preventDefault: false to useLongPressInteraction options, allowing default touch actions to proceed during long-press interactions.
Layout & Minimum-width Styling components/brain/BrainMobile.tsx, components/brain/my-stream/MyStreamWave.tsx, components/brain/my-stream/MyStreamWaveLeaderboard.tsx, components/waves/leaderboard/gallery/WaveLeaderboardGallery.tsx, components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx, components/waves/leaderboard/gallery/WaveLeaderboardGalleryItemVotes.tsx	Systematic addition of tw-min-w-0 and tw-w-full utilities across container and wrapper elements to enforce minimum-width constraints, improve flex overflow behavior, and enhance responsive layout stability. Quote normalization and responsive class adjustments (gap, flex-wrap, ml-auto, flex-shrink-0) in gallery item votes and layout sections.
Ranking Label Display components/home/next-mint-leading/LeadingCard.tsx	Updated non-leading rank label text from "CURRENT {ordinal} PLACE" to "{ordinal} PLACE" (rank 1 retains "LEADING" prefix).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• App ui/ux fixes #1582: Modifies BrainMobile.tsx with similar layout/className adjustments and introduces dropOverlayClass enhancements.
• Touchscreen v2 #1851: Changes long-press/touch behavior with allowLongPress gating in WaveDrop, complementary to preventDefault configuration.
• Reactions dialog #1718: Implements long-press-driven reactions and touch-device handling, extending the long-press interaction patterns modified here.

Suggested reviewers

• GelatoGenesis
• prxt6529

Poem

🐰 A stylish dance of min-w-0,
From gallery to brain we go,
Touch and scrolls now flow just right,
Flex containers shine so bright,
Tests confirm each tap and swipe! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Mobile leaderboard responsiveness' clearly reflects the main focus of the pull request, which involves multiple UI and styling adjustments across leaderboard components to improve responsive behavior on mobile devices.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch mobile-leaderboard-responsiveness

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@__tests__/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.interaction.test.tsx`:
- Around line 68-80: The test fixture for DefaultWaveLeaderboardDrop is
incorrect: the component expects drop.wave.id but the fixture provides a
separate top-level wave object; update the drop objects used in tests (e.g., the
const drop in DefaultWaveLeaderboardDrop.interaction.test.tsx and the similar
fixtures at the other noted ranges) to include a nested wave property (drop.wave
= { id: "w1" }) so the shapes match the component contract, and remove the
separate top-level wave variable or replace usages with the nested drop.wave
reference in render calls and assertions that target DefaultWaveLeaderboardDrop.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3c6bdc32-0388-4f2c-84e1-99154f08d20d

📥 Commits

Reviewing files that changed from the base of the PR and between 682fa5f and 982e4e8.

📒 Files selected for processing (9)

• __tests__/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.interaction.test.tsx
• components/brain/BrainMobile.tsx
• components/brain/my-stream/MyStreamWave.tsx
• components/brain/my-stream/MyStreamWaveLeaderboard.tsx
• components/home/next-mint-leading/LeadingCard.tsx
• components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.tsx
• components/waves/leaderboard/gallery/WaveLeaderboardGallery.tsx
• components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx
• components/waves/leaderboard/gallery/WaveLeaderboardGalleryItemVotes.tsx