fix: improve mobile poll layout for narrow screens #2083

bimakw · 2025-12-21T15:36:49Z

Summary

Fixes layout issues on mobile devices with narrow screens (<300px) where the vote selector button would get cut off when time slot options have long duration labels (e.g., "1h 30m").

Problem

On devices with low screen widths, the vote selector button becomes partially or fully hidden when polls display date options with extended duration text. Users cannot access the voting functionality on very narrow screens.

Solution

Instead of adding horizontal scrolling (which may not be intuitive for users), this fix uses CSS flexbox properties to ensure proper content sizing:

Changes in `poll-option.tsx`:

Add min-w-0 to flex containers to allow children to shrink below content size
Add shrink-0 to the vote selector container to prevent it from being cut off
Change children container from shrink-0 to shrink with min-w-0 to allow graceful shrinking

Changes in `time-slot-option.tsx`:

Add min-w-0 to allow the time slot content to shrink
Add shrink-0 to keep start time always visible
Add truncate to duration text for graceful text overflow
Reduce gaps on mobile (gap-x-2, gap-x-1) with larger gaps on sm+ screens (sm:gap-x-4, sm:gap-x-1.5)

Test Plan

Test on viewport width of 300px or less
Test with time slot options with extended durations (1h 30m, 2h 15m, etc.)
Verify vote selector button is always accessible
Test on both editable and view-only modes
Test on different mobile browsers (Safari, Chrome)

Screenshots

Testing should be done on narrow viewports - the vote button should remain visible and accessible.

Fixes #1437

Summary by CodeRabbit

Style
- Enhanced mobile poll display with refined layout spacing and improved text handling to prevent overflow on poll options and time slot selections.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Fixes layout issues on mobile devices with narrow screens (<300px) where the vote selector button would get cut off when time slot options have long duration labels (e.g., "1h 30m"). Changes: - Add min-w-0 to flex containers to allow proper shrinking - Add shrink-0 to vote selector to prevent it from being cut off - Add truncate to duration text for graceful overflow handling - Reduce gaps on mobile (gap-x-2) with larger gaps on sm+ screens Fixes lukevella#1437

vercel · 2025-12-21T15:36:53Z

@bimakw is attempting to deploy a commit to the rallly Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2025-12-21T15:36:59Z

Walkthrough

Two mobile poll components receive Tailwind layout refinements to prevent overflow on narrow screens. The poll-option and time-slot-option components gain min-w-0 and shrink-0 classes alongside adjusted gap spacing to maintain responsive behavior and ensure the vote selector button remains accessible on devices with constrained viewport widths.

Changes

Cohort / File(s)	Summary
Mobile Poll Layout Adjustments `apps/web/src/components/poll/mobile-poll/poll-option.tsx`	Added `min-w-0` to outer container and adjusted `shrink-0` positioning across child wrappers and action container to prevent flex item overflow.
	Added `shrink-0` to vote visibility container while maintaining size constraints.
Mobile Time Slot Responsive Layout `apps/web/src/components/poll/mobile-poll/time-slot-option.tsx`	Replaced vertical spacing with constrained horizontal layout by adding `min-w-0` to parent row.
	Applied `shrink-0` to start time and clock icon; wrapped duration text in span with `truncate` class to enable text overflow handling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Layout-only changes following consistent Tailwind patterns (min-w-0, shrink-0, truncate).
Minor structural wrapping in time-slot-option for text truncation behavior.
No logic or behavioral changes; verify visual alignment on narrow viewports during review.

Possibly related PRs

Fix time slot checkbox being pushed out of viewport #1408 — Concurrent modifications to TimeSlotOption component's JSX structure around start time, duration, and clock icon with similar flex/shrink behavior adjustments.
✨ Show duration #1098 — Prior changes to the same time-slot-option.tsx file related to duration and ClockIcon rendering.

Poem

🐰 Flex shrinks, min-widths bloom,
No more buttons trapped in gloom!
Truncate dances, gaps align,
Mobile scrolls now work just fine! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing mobile poll layout issues on narrow screens through CSS flexbox adjustments.
Linked Issues check	✅ Passed	Changes directly address issue #1437 by adding min-w-0 and shrink-0 to prevent vote selector button cutoff on narrow screens without horizontal scrolling.
Out of Scope Changes check	✅ Passed	All changes are scoped to poll-option.tsx and time-slot-option.tsx layout adjustments directly addressing the narrow screen layout issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 708f797 and 5b5e106.

📒 Files selected for processing (2)

apps/web/src/components/poll/mobile-poll/poll-option.tsx (2 hunks)
apps/web/src/components/poll/mobile-poll/time-slot-option.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (9)

**/*.{ts,tsx}