Fix weird scroll issues

Author: ColinToft

src/components/dashboard/user_management/EditableSubscriptionsCell.tsx

@@ -7,7 +7,6 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-  Portal,
   Tag,
   TagLabel,
   Text,
@@ -316,64 +315,63 @@ const EditableSubscriptionsCell: React.FC<EditableSubscriptionsCellProps> = ({
           </Box>
         </PopoverTrigger>
 
-        <Portal>
-          <PopoverContent
-            width={
-              triggerRef.current?.offsetWidth
-                ? `${triggerRef.current.offsetWidth}px`
-                : '100%'
-            }
-            borderColor="neutralGray.300"
-            ref={popoverRef}
-            zIndex={1}
-            mt="2px"
-          >
-            <PopoverBody p={0} maxHeight="300px" overflowY="auto" zIndex={1}>
-              {sortedSubjects.map((subject) => {
-                const isSelected = selectedSubjectIds.includes(subject.id);
-                const bgColor = subject.colorGroup.colorCodes[1];
-                const borderColor = subject.colorGroup.colorCodes[1];
-
-                return (
-                  <Box
-                    key={subject.id}
-                    p={2.5}
-                    pl={4}
-                    display="flex"
-                    alignItems="center"
-                    _hover={{ bg: 'neutralGray.100' }}
-                    onClick={(e) => handleSubjectChange(subject.id, e)}
-                    cursor="pointer"
-                  >
-                    <Checkbox
-                      isChecked={isSelected}
-                      onChange={(e) => {
-                        e.nativeEvent.stopPropagation();
-                        handleSubjectChange(subject.id);
-                      }}
-                      mr={2}
-                      _checked={{
-                        '& .chakra-checkbox__control': {
-                          bg: bgColor,
-                          borderColor: borderColor,
-                        },
-                      }}
-                      _hover={{
-                        '& .chakra-checkbox__control': {
-                          borderColor: borderColor,
-                          bg: bgColor,
-                          opacity: 0.7,
-                        },
-                      }}
-                      borderColor={borderColor}
-                    />
-                    <Text textStyle="label">{subject.name}</Text>
-                  </Box>
-                );
-              })}
-            </PopoverBody>
-          </PopoverContent>
-        </Portal>
+        <PopoverContent
+          width={
+            triggerRef.current?.offsetWidth
+              ? `${triggerRef.current.offsetWidth}px`
+              : '100%'
+          }
+          maxWidth="80vw"
+          borderColor="neutralGray.300"
+          ref={popoverRef}
+          zIndex={1}
+          mt="2px"
+        >
+          <PopoverBody p={0} maxHeight="300px" overflowY="auto" zIndex={1}>
+            {sortedSubjects.map((subject) => {
+              const isSelected = selectedSubjectIds.includes(subject.id);
+              const bgColor = subject.colorGroup.colorCodes[1];
+              const borderColor = subject.colorGroup.colorCodes[1];
+
+              return (
+                <Box
+                  key={subject.id}
+                  p={2.5}
+                  pl={4}
+                  display="flex"
+                  alignItems="center"
+                  _hover={{ bg: 'neutralGray.100' }}
+                  onClick={(e) => handleSubjectChange(subject.id, e)}
+                  cursor="pointer"
+                >
+                  <Checkbox
+                    isChecked={isSelected}
+                    onChange={(e) => {
+                      e.nativeEvent.stopPropagation();
+                      handleSubjectChange(subject.id);
+                    }}
+                    mr={2}
+                    _checked={{
+                      '& .chakra-checkbox__control': {
+                        bg: bgColor,
+                        borderColor: borderColor,
+                      },
+                    }}
+                    _hover={{
+                      '& .chakra-checkbox__control': {
+                        borderColor: borderColor,
+                        bg: bgColor,
+                        opacity: 0.7,
+                      },
+                    }}
+                    borderColor={borderColor}
+                  />
+                  <Text textStyle="label">{subject.name}</Text>
+                </Box>
+              );
+            })}
+          </PopoverBody>
+        </PopoverContent>
       </Popover>
     </Box>
   );

src/components/dashboard/user_management/FilterPopup.tsx

@@ -168,6 +168,7 @@ export const FilterPopup: React.FC<FilterPopupProps> = ({
         boxShadow="md"
         border="1px solid"
         borderColor="neutralGray.300"
+        zIndex={5000}
       >
         <Flex justifyContent="space-between" alignItems="center" mb={5}>
           <Text textStyle="h3">Filter Options</Text>

src/components/dashboard/user_management/UserManagementTable.tsx

@@ -242,7 +242,7 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
       borderColor="neutralGray.300"
       height="100%"
     >
-      <HStack justify="space-between" mx={5} my={3}>
+      <HStack justify="space-between" mx={5} my={3} zIndex={5000}>
         <Text textStyle="h2" fontSize="18px" fontWeight={700} lineHeight="33px">
           User Management
         </Text>
@@ -286,7 +286,7 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({
           <Thead
             position="sticky"
             top={0}
-            zIndex={1000} // Make sure it's above the popover for editing email subscriptions
+            zIndex={3000} // Make sure it's above the popover for editing email subscriptions but below the filter popup
             bg="white"
             boxShadow="0 1px 1px rgba(227, 227, 227, 1)"
           >