From 9390edb223d8cbd011511f51459bc0c52932d420 Mon Sep 17 00:00:00 2001
From: Ishrat Arshad <ishratarshad101@gmail.com>
Date: Tue, 6 Jan 2026 22:54:15 -0500
Subject: [PATCH 1/5] 531: Fix mobile topics filter

---
 .../TopicFilters/TopicFilterPopover.tsx       | 22 +++++++++++--------
 .../UserSubmissions/UserSubmissions.tsx       |  6 +++++
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx b/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
index 5f3fa9b15..71ae62144 100644
--- a/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
+++ b/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
@@ -19,7 +19,7 @@ export default function TopicFilterPopover({
   onChange,
   onClear,
 }: TopicFilterPopoverProps) {
-  const [opened, { toggle }] = useDisclosure(false);
+  const [opened, { toggle, open, close }] = useDisclosure(false);
   const [search, setSearch] = useState("");
 
   const filteredTopics = useMemo(
@@ -35,14 +35,18 @@ export default function TopicFilterPopover({
   );
 
   return (
-    <Popover
-      opened={opened}
-      position="bottom-start"
-      closeOnEscape
-      withinPortal={false}
-      shadow="md"
-      transitionProps={{ keepMounted: false }}
-    >
+      <Popover
+        opened={opened}
+        onChange={(o) => (o ? open() : close())}
+        position="bottom-start"
+        closeOnEscape
+        withinPortal
+        zIndex={10000}
+        closeOnClickOutside={false}   
+        shadow="md"
+        transitionProps={{ keepMounted: true }}  
+      >
+
       <Popover.Target>
         <Button fullWidth variant="light" color="gray" onClick={toggle}>
           Topics
diff --git a/js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx b/js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx
index ae8e1c78a..6f205f6fd 100644
--- a/js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx
+++ b/js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx
@@ -128,6 +128,12 @@ export default function UserSubmissions({ userId }: { userId: string }) {
         </Box>
         {isMobile && (
           <FilterDropdown buttonName="Filters">
+              <TopicFilterPopover
+                value={topics}
+                selectedTopicsSet={selectedTopicsSet}
+                onChange={setTopics}
+                onClear={clearTopics}
+            />
             <FilterDropdownItem
               value={pointFilter}
               toggle={togglePointFilter}

From 0a164f45a4cf9348922763eac0af18d17df75b9d Mon Sep 17 00:00:00 2001
From: Ishrat Arshad <ishratarshad101@gmail.com>
Date: Wed, 7 Jan 2026 00:02:18 -0500
Subject: [PATCH 2/5] 531: fix TopicFilterPopover portal behavior on mobile

---
 .../TopicFilters/TopicFilterPopover.tsx       | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx b/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
index 71ae62144..131d6dc9f 100644
--- a/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
+++ b/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
@@ -19,7 +19,7 @@ export default function TopicFilterPopover({
   onChange,
   onClear,
 }: TopicFilterPopoverProps) {
-  const [opened, { toggle, open, close }] = useDisclosure(false);
+  const [opened, { open, close }] = useDisclosure(false);
   const [search, setSearch] = useState("");
 
   const filteredTopics = useMemo(
@@ -35,20 +35,17 @@ export default function TopicFilterPopover({
   );
 
   return (
-      <Popover
-        opened={opened}
-        onChange={(o) => (o ? open() : close())}
-        position="bottom-start"
-        closeOnEscape
-        withinPortal
-        zIndex={10000}
-        closeOnClickOutside={false}   
-        shadow="md"
-        transitionProps={{ keepMounted: true }}  
-      >
-
+    <Popover
+      opened={opened}
+      onChange={(o) => (o ? open() : close())}
+      position="bottom-start"
+      closeOnEscape
+      withinPortal
+      shadow="md"
+      transitionProps={{ keepMounted: true }}
+    >
       <Popover.Target>
-        <Button fullWidth variant="light" color="gray" onClick={toggle}>
+        <Button fullWidth variant="light" color="gray" onClick={open}>
           Topics
         </Button>
       </Popover.Target>

From 149de23a4863ebfd78e2a05586779dd9c7f22924 Mon Sep 17 00:00:00 2001
From: Ishrat Arshad <ishratarshad101@gmail.com>
Date: Wed, 14 Jan 2026 03:43:53 -0500
Subject: [PATCH 3/5] 531: disable Popover portal in test environment

---
 .../_components/TopicFilters/TopicFilterPopover.tsx           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx b/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
index 131d6dc9f..8082c4f2b 100644
--- a/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
+++ b/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
@@ -3,6 +3,8 @@ import { ApiUtils } from "@/lib/api/utils";
 import { Button, Chip, Flex, Popover, Text, TextInput } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { useMemo, useState } from "react";
+const isTestEnv = import.meta.env.MODE === "test";
+
 
 type TopicFilterPopoverProps = {
   value: LeetcodeTopicEnum[];
@@ -40,7 +42,7 @@ export default function TopicFilterPopover({
       onChange={(o) => (o ? open() : close())}
       position="bottom-start"
       closeOnEscape
-      withinPortal
+      withinPortal={!isTestEnv}
       shadow="md"
       transitionProps={{ keepMounted: true }}
     >

From 3cc01db356e277460ef7af5192cea899f01960d6 Mon Sep 17 00:00:00 2001
From: Ishrat Arshad <ishratarshad101@gmail.com>
Date: Wed, 14 Jan 2026 09:47:15 -0500
Subject: [PATCH 4/5] 531: fixed bug

---
 .../_components/TopicFilters/TopicFilterPopover.tsx    |  1 -
 .../_components/UserSubmissions/UserSubmissions.tsx    | 10 +++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx b/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
index 8082c4f2b..e2436ca12 100644
--- a/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
+++ b/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
@@ -5,7 +5,6 @@ import { useDisclosure } from "@mantine/hooks";
 import { useMemo, useState } from "react";
 const isTestEnv = import.meta.env.MODE === "test";
 
-
 type TopicFilterPopoverProps = {
   value: LeetcodeTopicEnum[];
   selectedTopicsSet: Set<LeetcodeTopicEnum>;
diff --git a/js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx b/js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx
index 6f205f6fd..a4fd8f548 100644
--- a/js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx
+++ b/js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx
@@ -128,11 +128,11 @@ export default function UserSubmissions({ userId }: { userId: string }) {
         </Box>
         {isMobile && (
           <FilterDropdown buttonName="Filters">
-              <TopicFilterPopover
-                value={topics}
-                selectedTopicsSet={selectedTopicsSet}
-                onChange={setTopics}
-                onClear={clearTopics}
+            <TopicFilterPopover
+              value={topics}
+              selectedTopicsSet={selectedTopicsSet}
+              onChange={setTopics}
+              onClear={clearTopics}
             />
             <FilterDropdownItem
               value={pointFilter}

From 029bec25c8cf6ce81bb5f9c88fa9c969144bee36 Mon Sep 17 00:00:00 2001
From: Ishrat Arshad <ishratarshad101@gmail.com>
Date: Thu, 15 Jan 2026 08:12:41 -0500
Subject: [PATCH 5/5] 531: removed unecessary changes on topicfilterpopover
 file and test line

---
 .../_components/TopicFilters/TopicFilterPopover.tsx    | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx b/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
index e2436ca12..5f3fa9b15 100644
--- a/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
+++ b/js/src/app/user/[userId]/submissions/_components/TopicFilters/TopicFilterPopover.tsx
@@ -3,7 +3,6 @@ import { ApiUtils } from "@/lib/api/utils";
 import { Button, Chip, Flex, Popover, Text, TextInput } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { useMemo, useState } from "react";
-const isTestEnv = import.meta.env.MODE === "test";
 
 type TopicFilterPopoverProps = {
   value: LeetcodeTopicEnum[];
@@ -20,7 +19,7 @@ export default function TopicFilterPopover({
   onChange,
   onClear,
 }: TopicFilterPopoverProps) {
-  const [opened, { open, close }] = useDisclosure(false);
+  const [opened, { toggle }] = useDisclosure(false);
   const [search, setSearch] = useState("");
 
   const filteredTopics = useMemo(
@@ -38,15 +37,14 @@ export default function TopicFilterPopover({
   return (
     <Popover
       opened={opened}
-      onChange={(o) => (o ? open() : close())}
       position="bottom-start"
       closeOnEscape
-      withinPortal={!isTestEnv}
+      withinPortal={false}
       shadow="md"
-      transitionProps={{ keepMounted: true }}
+      transitionProps={{ keepMounted: false }}
     >
       <Popover.Target>
-        <Button fullWidth variant="light" color="gray" onClick={open}>
+        <Button fullWidth variant="light" color="gray" onClick={toggle}>
           Topics
         </Button>
       </Popover.Target>