fix: show binary question group menu on mobile

[SylvainChevalier]

Fix the missing ··· menu on mobile for binary question group subquestions.

The three-dot menu was only rendered in the desktop-only table cell. Now it also appears to the right of the slider in the mobile row.

Closes #4333

Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes

  • Improved forecast slider layout with enhanced alignment and spacing across desktop and mobile views.

• Style

  • Optimized menu positioning to display alongside sliders for better visual organization and usability.

[coderabbitai]

📝 Walkthrough

Walkthrough

The ForecastChoiceOption component was modified to wrap the SliderElement in a flex container and conditionally render an accompanying menu item to its right across both desktop and mobile layouts.

Changes

Cohort / File(s)	Summary
Mobile Menu Fix front_end/src/components/forecast_maker/forecast_choice_option.tsx	Wrapped SliderElement in flex containers on both large-row and mobile/sm-hidden paths. Optional menu now displays alongside the slider instead of being hidden on mobile, improving accessibility of the binary question group menu.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Suggested reviewers

• ncarazon

Poem

🐰 A slider stands with menu to its side,
No longer lost where mobile folks reside,
Flex wraps them tight, left and right align,
The ··· menu shines in layouts so divine! ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: show binary question group menu on mobile' directly and specifically describes the main change—making the menu visible on mobile by rendering it alongside the slider.
Linked Issues check	✅ Passed	The PR successfully implements the requirements from issue #4333: the binary question group menu is now available on mobile and positioned to the right of the slider.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objective of showing the binary question group menu on mobile. No unrelated modifications are present.

_{✏️ 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 claude/issue-4333-binary-question-groups-menu

---

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.}

[github-actions]

Cleanup: Preview Environment Removed

The preview environment for this PR has been destroyed.

Resource	Status
🌐 Preview App	Deleted
🗄️ PostgreSQL Branch	Deleted
⚡ Redis Database	Deleted
🔧 GitHub Deployments	Removed
📦 Docker Image	Retained (auto-cleanup via GHCR policies)

---

Cleanup triggered by PR close at 2026-02-26T12:16:31Z

[SylvainChevalier]

@claude spacing is wrong, the slider overlaps with the ··· button.

[claude]

Claude finished @SylvainChevalier's task in 1m 24s —— View job

---

Fixing slider/menu overlap on mobile

• Read the current code and understand the layout
• Fix the spacing between the slider and the ··· menu button
• Commit and push the fix

Summary

The slider container was using w-full which forces 100% width, leaving no room for the menu button. Fixed by:

• Slider wrapper: Changed w-full to min-w-0 flex-1 — this lets the slider fill available space while still respecting the menu button's size
• Menu wrapper: Added shrink-0 to prevent the menu button from being compressed

Pushed as d3106e7.
| Branch

[SylvainChevalier]

@claude they're still too close to each other. There should be some space between them.

[claude]

Claude finished @SylvainChevalier's task in 45s —— View job

---

Adding spacing between slider and menu button

• Read current code and understand the layout
• Add spacing between slider and menu button
• Commit and push the fix

Summary

Added gap-2 to the mobile flex container (line 338) so there's visible spacing between the slider and the ··· menu button.

Pushed as 3bf6b7b | | Branch

[SylvainChevalier]

lgtm.

[coderabbitai]

🧹 Nitpick comments (1)

front_end/src/components/forecast_maker/forecast_choice_option.tsx (1)

306-311: Consider aligning desktop implementation for consistency.

The desktop implementation uses a different pattern (w-full and unconditional menu rendering) compared to the mobile fix. While this works fine on larger screens, unifying the approach would improve consistency and maintainability.

♻️ Optional: Align desktop with mobile pattern

 <td className="hidden w-full border-t border-gray-300 p-2 dark:border-gray-300-dark sm:table-cell">
-  <div className="flex">
-    <div className="w-full">{SliderElement}</div>
-    <div>{menu}</div>
+  <div className="flex items-center gap-2">
+    <div className="min-w-0 flex-1">{SliderElement}</div>
+    {menu && <div className="shrink-0">{menu}</div>}
   </div>
 </td>

🤖 Prompt for AI Agents

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

In `@front_end/src/components/forecast_maker/forecast_choice_option.tsx` around
lines 306 - 311, The desktop table cell renders SliderElement and menu
unconditionally and uses a different layout pattern (w-full plus separate menu
div) than the mobile fix; update the desktop rendering in
forecast_choice_option.tsx to match the mobile pattern by conditionally
rendering the menu alongside SliderElement (use the same wrapper/visibility
logic used for mobile) and consolidate the sizing classes (replace separate
w-full div + menu div with a unified flex container that applies the same
width/visibility behavior), targeting the elements named SliderElement and menu
so the desktop and mobile implementations are consistent and maintainable.

🤖 Prompt for all review comments with AI agents

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

Nitpick comments:
In `@front_end/src/components/forecast_maker/forecast_choice_option.tsx`:
- Around line 306-311: The desktop table cell renders SliderElement and menu
unconditionally and uses a different layout pattern (w-full plus separate menu
div) than the mobile fix; update the desktop rendering in
forecast_choice_option.tsx to match the mobile pattern by conditionally
rendering the menu alongside SliderElement (use the same wrapper/visibility
logic used for mobile) and consolidate the sizing classes (replace separate
w-full div + menu div with a unified flex container that applies the same
width/visibility behavior), targeting the elements named SliderElement and menu
so the desktop and mobile implementations are consistent and maintainable.

---

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6f0ed3c and 3bf6b7b.

📒 Files selected for processing (1)

• front_end/src/components/forecast_maker/forecast_choice_option.tsx