Mobile: introduce forecaster tab bar + styling-parity pass#4682
Open
ncarazon wants to merge 15 commits intofeat/question-page-redesign-1st-iterationfrom
Open
Conversation
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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. Comment |
Contributor
🚀 Preview EnvironmentYour preview environment is ready!
Details
ℹ️ Preview Environment InfoIsolation:
Limitations:
Cleanup:
|
ncarazon
force-pushed
the
feat/integrate-the-shell-widen-the-main-column-strip-old-layouts
branch
from
6285beb to
31e3be1
Compare
Base automatically changed from
feat/integrate-the-shell-widen-the-main-column-strip-old-layouts
to
feat/question-page-redesign-1st-iteration
May 1, 2026 10:41
…estion types, fix comments tab blank below lg
…izontal scroll, and timeline in tab on mobile
…cast Timeline label across all views
…r author section on mobile, shared chip helpers with TrophyIcon, fix continuous graph clipping, and consumer title right padding
…and show compact bar chart for date groups instead of scatter
ncarazon
force-pushed
the
feat/mobile-introduce-forecaster-tab-bar-styling-parity-pass
branch
from
6240839 to
e4a8c28
Compare
…on toggle arrow, and key factors link
…fix CommunityDisclaimer to only show for Community tournament type
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
front_end/src/app/(main)/questions/[id]/components/question_page_shell/tabs/comments.tsx (1)
5-5: Deleteresponsive_comment_feed.tsx— it is now unused dead code.The swap from
ResponsiveCommentFeedtoCommentFeedis correct and complete. Theresponsive_comment_feed.tsxfile (located atfront_end/src/app/(main)/questions/[id]/components/question_layout/consumer_question_layout/responsive_comment_feed.tsx) has no remaining imports or references in the codebase and can be safely removed to avoid confusion.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@front_end/src/app/`(main)/questions/[id]/components/question_page_shell/tabs/comments.tsx at line 5, Remove the now-unused responsive_comment_feed.tsx file: delete the file named responsive_comment_feed.tsx (previously exporting ResponsiveCommentFeed) since imports have been switched to CommentFeed (see import CommentFeed in comments.tsx) and there are no remaining references; ensure no other modules import ResponsiveCommentFeed before deleting and run the project/tests to confirm no breakage.front_end/src/app/(main)/questions/[id]/components/question_page_shell/tabs.tsx (1)
59-64: 💤 Low valueConsider gating the fetch behind a viewport check to avoid unused desktop API calls.
hasSimilarQuestionsTabintab_bar.tsxalready gates the tab behind!isSm(mobile only), but the fetch here fires unconditionally for every APPROVED post on any screen size. Desktop users trigger the API call and result is never displayed.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@front_end/src/app/`(main)/questions/[id]/components/question_page_shell/tabs.tsx around lines 59 - 64, The effect that fetches similar questions should be gated by the same viewport/mobile check used for rendering the tab to avoid unnecessary desktop API calls: import or access the same isSm (or the hasSimilarQuestionsTab logic) used in tab_bar.tsx, add isSm to the useEffect dependency array, and change the guard to only call ClientPostsApi.getSimilarPosts(post.id).then(setSimilarQuestions) when post.curation_status === PostStatus.APPROVED && !isSm (i.e., mobile only); ensure you reference the existing symbols useEffect, setSimilarQuestions, similarQuestions, and ClientPostsApi.getSimilarPosts when making this change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@front_end/src/app/`(main)/questions/[id]/components/question_page_shell/tabs.tsx:
- Around line 60-64: The useEffect calling
ClientPostsApi.getSimilarPosts(post.id) must handle errors and avoid race
conditions: add a local cancellation flag (e.g., let cancelled = false) and
return a cleanup that sets it true; call ClientPostsApi.getSimilarPosts inside
the effect, attach .catch to log or handle errors, and only call
setSimilarQuestions with the result if !cancelled and post.curation_status ===
PostStatus.APPROVED (or keep the existing guard) to prevent stale responses
overwriting current state; ensure you reference the existing useEffect,
ClientPostsApi.getSimilarPosts, setSimilarQuestions, post.id and
post.curation_status symbols when making the change.
---
Nitpick comments:
In
`@front_end/src/app/`(main)/questions/[id]/components/question_page_shell/tabs.tsx:
- Around line 59-64: The effect that fetches similar questions should be gated
by the same viewport/mobile check used for rendering the tab to avoid
unnecessary desktop API calls: import or access the same isSm (or the
hasSimilarQuestionsTab logic) used in tab_bar.tsx, add isSm to the useEffect
dependency array, and change the guard to only call
ClientPostsApi.getSimilarPosts(post.id).then(setSimilarQuestions) when
post.curation_status === PostStatus.APPROVED && !isSm (i.e., mobile only);
ensure you reference the existing symbols useEffect, setSimilarQuestions,
similarQuestions, and ClientPostsApi.getSimilarPosts when making this change.
In
`@front_end/src/app/`(main)/questions/[id]/components/question_page_shell/tabs/comments.tsx:
- Line 5: Remove the now-unused responsive_comment_feed.tsx file: delete the
file named responsive_comment_feed.tsx (previously exporting
ResponsiveCommentFeed) since imports have been switched to CommentFeed (see
import CommentFeed in comments.tsx) and there are no remaining references;
ensure no other modules import ResponsiveCommentFeed before deleting and run the
project/tests to confirm no breakage.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 3f44e806-2135-477f-9b2c-b6149fa8b075
📒 Files selected for processing (24)
front_end/src/app/(main)/questions/[id]/components/key_factors/key_factors_question_consumer_section.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/index.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/meta_row.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/project_chip_helpers.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/tab_bar.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/tabs.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/tabs/comments.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/tabs/question_info.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/tabs/similar_questions.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/tabs/timeline.tsxfront_end/src/app/(main)/questions/[id]/components/question_page_shell/title_row.tsxfront_end/src/app/(main)/questions/[id]/components/question_view/action_row.tsxfront_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/prediction/group_of_questions_prediction/index.tsxfront_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/prediction/single_question_prediction/binary_question_prediction.tsxfront_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/prediction/single_question_prediction/continuous_question_prediction.tsxfront_end/src/app/(main)/questions/[id]/components/question_view/consumer_question_view/timeline/index.tsxfront_end/src/app/(main)/questions/[id]/components/sidebar/index.tsxfront_end/src/components/charts/group_chart.tsxfront_end/src/components/charts/primitives/x_tick_label.tsxfront_end/src/components/comment_feed/comment.tsxfront_end/src/components/comment_feed/index.tsxfront_end/src/components/post_card/basic_post_card/post_voter.tsxfront_end/src/components/ui/section_toggle.tsxposts/views.py
…d in SimilarQuestionsTab
ncarazon
deleted the
feat/mobile-introduce-forecaster-tab-bar-styling-parity-pass
branch
ncarazon
restored the
feat/mobile-introduce-forecaster-tab-bar-styling-parity-pass
branch
cemreinanc
approved these changes
May 5, 2026
| enabled: post.curation_status === PostStatus.APPROVED, | ||
| }); | ||
|
|
||
| if (isFetching || !questions.length) return null; |
Contributor
There was a problem hiding this comment.
its better to add some loading and empty state
Contributor
Author
There was a problem hiding this comment.
Added a loading state and fallback to top questions (discussed with Atakan)
…g state, and error handling
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related to #4638
This PR introduces a full mobile styling and layout parity pass for both the consumer and forecaster question page views.
Implemented features & fixes:
Consumer mobile typography: question title centered/bold/gray-700 on mobile, scales to blue-800 at md+; comment count badge getsfont-boldon mobileForecaster mobile typography: question title adjusted size/weight/tracking/color on mobile, scales up at sm+; vote count badge adjusted size on mobile onlyForecast Timeline labelrestored across all views and screen sizes (removedhideTitlefromForecasterShell,ConsumerShell, andTimelineTab)Timeline tabadded to consumer tab bar on mobile only (< sm); inline timeline chart remains visible at sm+ next to the prediction blockSimilar Questions tabadded to both consumer and forecaster tab bars on mobile only (< sm, approved posts only); data fetched once on mount inQuestionPageShellTabsto avoid re-fetching on tab switch; sidebar author/dates section and Similar Questions removed from mobile layoutproject_chip_helpersextracted (getChipContent,getChipColor) so bothMetaRowandQuestionInfoTabuseTrophyIconconsistently instead of an emoji stringTab bar mobile sizing: adjusted pill size and padding with horizontal scroll enabledSection gapsadjusted between main and comments sections on mobilePrediction block: top padding removed on mobile for both binary and continuous question typesContinuous graph clipping fix: removed mobile scale to prevent overflow clipping againstoverflow-x-clipon the parent section; desktop scale preservedConsumer title right paddingremoved on mobileKey factors sectionordering fixed on mobile; top margin disabled on mobileAction rowordering on mobile: prediction shown above buttons below sm, full action row in document order at sm+Comment feed: adjusted header margin and list gap on mobileDemo videos
1.mp4
2.mp4
3.mp4
4.mp4
5.mp4
Summary by CodeRabbit
New Features
Bug Fixes
Style