531: Fix mobile topics filter

[ishratarshad]

531

Description of changes

Checklist before review

• I have done a thorough self-review of the PR
• Copilot has reviewed my latest changes, and all comments have been fixed and/or closed.
• If I have made database changes, I have made sure I followed all the db repo rules listed in the wiki here. (check if no db changes)
• All tests have passed
• I have successfully deployed this PR to staging
• I have done manual QA in both dev (and staging if possible) and attached screenshots below.

Screenshots

Dev

Staging

[greptile-apps]

Skipped: No reviewable files found.

[github-actions]

Commit Validation Failed

The following commits do not start with the required Notion ID 531:

Fix mobile topics filter

Please rebase and update your commit messages.
All messages should be of the following format: 531: Example commit

[github-actions]

Overall Project	75.69%	🍏

There is no coverage information present for the Files changed

[github-actions]

Overall Project	75.71%	🍏

There is no coverage information present for the Files changed

[github-actions]

Overall Project	75.69%	🍏

There is no coverage information present for the Files changed

[github-actions]

Overall Project	76.78%	🍏

There is no coverage information present for the Files changed

[github-actions]

Overall Project	77.14%	🍏

There is no coverage information present for the Files changed

[tahminator]

/deploy

[github-actions]

The command to deploy to staging for the commit aebf78e has been triggered. View action run

[github-actions]

Overall Project	75.79%	🍏

There is no coverage information present for the Files changed

[github-actions]

Staging deployment failed for commit aebf78e

View run

[github-actions]

Overall Project	76.73%	🍏

There is no coverage information present for the Files changed

[github-actions]

Overall Project	76.98%	🍏

There is no coverage information present for the Files changed

[ishratarshad]

/deploy

[github-actions]

The command to deploy to staging for the commit c963a94 has been triggered. View action run

[github-actions]

Overall Project	76.82%	🍏

There is no coverage information present for the Files changed

[github-actions]

Staging deployment succeeded for commit c963a94

View run

[angelayu0530]

@greptile

[tahminator]

/ai

[tahminator]

/review

[tahminator]

/describe

[tahminator]

/improve

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Mobile UX Using keepMounted=true ensures the popover content stays in the DOM; verify this does not cause layout shifts or focus traps on small screens and that closing via outside click/escape still works consistently on iOS Safari. return ( <Popover opened={opened} onChange={(o) => (o ? open() : close())} position="bottom-start" closeOnEscape withinPortal={!isTestEnv} shadow="md" transitionProps={{ keepMounted: true }} > Testing Mode withinPortal is disabled only in test mode; ensure E2E/mobile testing environments set MODE='test' as intended, or consider a more explicit feature flag to avoid environment drift. return ( <Popover opened={opened} onChange={(o) => (o ? open() : close())} position="bottom-start" closeOnEscape withinPortal={!isTestEnv} shadow="md" transitionProps={{ keepMounted: true }} Acceptance Criteria Topics filter is now rendered inside the mobile FilterDropdown; confirm it is visible by default within the dropdown, not hidden behind overflow, and that selections update results and the clear action works as expected on mobile. query={searchQuery} onChange={(event) => setSearchQuery(event.currentTarget.value)} placeholder="Search for submission title" w={isMobile ? "100%" : undefined} /> </Box> {isMobile && ( <FilterDropdown buttonName="Filters"> <TopicFilterPopover value={topics} selectedTopicsSet={selectedTopicsSet} onChange={setTopics} onClear={clearTopics} /> <FilterDropdownItem value={pointFilter} toggle={togglePointFilter} switchMode

[github-actions]

Title

531: Fix mobile topics filter

---

PR Type

Bug fix, Enhancement

---

Description

• Fix mobile topic filters visibility

• Adjust Popover portal behavior by env

• Keep Popover mounted to preserve state

• Add Topics filter into mobile dropdown

---

Diagram Walkthrough

flowchart LR
  US["UserSubmissions mobile Filters"] -- "adds" --> TFP["TopicFilterPopover"]
  TFP -- "withinPortal = !test" --> Portal["Portal behavior by env"]
  TFP -- "open/close handlers" --> Popover["Mantine Popover"]
  Popover -- "keepMounted true" --> State["Stable dropdown state"]

Loading

File Walkthrough

	Relevant files
Bug fix	TopicFilterPopover.tsx Stabilize Popover behavior and mounting                                    js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx Add test env flag isTestEnv. Switch to explicit open/close handlers. Set withinPortal to !isTestEnv and keepMounted true. Update button to open Popover and handle onChange. +6/-4
Enhancement	UserSubmissions.tsx Add Topics filter to mobile dropdown                                          js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx Insert TopicFilterPopover into mobile FilterDropdown. Wire topic state and clear handler for mobile. +6/-0

---

[github-actions]

Overall Project	75.56%	🍏

There is no coverage information present for the Files changed

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!