From 705d7d96a109b33bb26f49ea025e72e8e4bd94cb Mon Sep 17 00:00:00 2001
From: YashK2005 <yashkoth7@gmail.com>
Date: Mon, 10 Nov 2025 19:40:14 -0500
Subject: [PATCH 1/3] fix dropdown styling

---
 frontend/src/components/ui/multi-select-dropdown.tsx  | 4 ++--
 frontend/src/components/ui/single-select-dropdown.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ui/multi-select-dropdown.tsx b/frontend/src/components/ui/multi-select-dropdown.tsx
index e82ea5f5..f3360831 100644
--- a/frontend/src/components/ui/multi-select-dropdown.tsx
+++ b/frontend/src/components/ui/multi-select-dropdown.tsx
@@ -51,7 +51,7 @@ export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
   };
 
   return (
-    <Box position="relative" w="full" ref={dropdownRef} zIndex={1}>
+    <Box position="relative" w="full" ref={dropdownRef}>
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
@@ -149,7 +149,7 @@ export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
           border="1px solid #d1d5db"
           borderRadius="6px"
           boxShadow="0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
-          zIndex={1000}
+          zIndex={9999}
         >
           {options.map((option) => {
             const isSelected = selectedValues.includes(option);
diff --git a/frontend/src/components/ui/single-select-dropdown.tsx b/frontend/src/components/ui/single-select-dropdown.tsx
index d009aaac..140e8b4c 100644
--- a/frontend/src/components/ui/single-select-dropdown.tsx
+++ b/frontend/src/components/ui/single-select-dropdown.tsx
@@ -48,7 +48,7 @@ export const SingleSelectDropdown: React.FC<SingleSelectDropdownProps> = ({
   };
 
   return (
-    <Box position="relative" w="full" ref={dropdownRef} zIndex={1}>
+    <Box position="relative" w="full" ref={dropdownRef}>
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
@@ -143,7 +143,7 @@ export const SingleSelectDropdown: React.FC<SingleSelectDropdownProps> = ({
           border="1px solid #d1d5db"
           borderRadius="6px"
           boxShadow="0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
-          zIndex={1000}
+          zIndex={9999}
         >
           {options.map((option) => (
             <Box

From 5d36e4388851d0ad1c0001c992280273a853f9a0 Mon Sep 17 00:00:00 2001
From: YashK2005 <yashkoth7@gmail.com>
Date: Mon, 10 Nov 2025 20:31:43 -0500
Subject: [PATCH 2/3] fix provinces dropdown

---
 .../src/components/intake/personal-info-form.tsx   |  8 +++++++-
 .../src/components/ui/single-select-dropdown.tsx   | 14 ++++++++++++--
 frontend/src/pages/participant/intake/index.tsx    |  9 +++++++--
 frontend/src/pages/volunteer/intake/index.tsx      |  9 +++++++--
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/intake/personal-info-form.tsx b/frontend/src/components/intake/personal-info-form.tsx
index 22ac5609..c7c757f0 100644
--- a/frontend/src/components/intake/personal-info-form.tsx
+++ b/frontend/src/components/intake/personal-info-form.tsx
@@ -26,9 +26,14 @@ interface PersonalInfoFormData {
 interface PersonalInfoFormProps {
   formType: 'participant' | 'volunteer';
   onSubmit: (experienceData: ExperienceData, personalData: PersonalData) => void;
+  onDropdownOpenChange?: (isOpen: boolean) => void;
 }
 
-export function PersonalInfoForm({ formType, onSubmit }: PersonalInfoFormProps) {
+export function PersonalInfoForm({
+  formType,
+  onSubmit,
+  onDropdownOpenChange,
+}: PersonalInfoFormProps) {
   const router = useRouter();
   const {
     control,
@@ -321,6 +326,7 @@ export function PersonalInfoForm({ formType, onSubmit }: PersonalInfoFormProps)
                     onSelectionChange={field.onChange}
                     placeholder="Province"
                     error={!!errors.province}
+                    onOpenChange={onDropdownOpenChange}
                   />
                 )}
               />
diff --git a/frontend/src/components/ui/single-select-dropdown.tsx b/frontend/src/components/ui/single-select-dropdown.tsx
index 140e8b4c..08965bf1 100644
--- a/frontend/src/components/ui/single-select-dropdown.tsx
+++ b/frontend/src/components/ui/single-select-dropdown.tsx
@@ -8,6 +8,7 @@ interface SingleSelectDropdownProps {
   onSelectionChange: (value: string) => void;
   placeholder: string;
   error?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
 }
 
 export const SingleSelectDropdown: React.FC<SingleSelectDropdownProps> = ({
@@ -16,15 +17,23 @@ export const SingleSelectDropdown: React.FC<SingleSelectDropdownProps> = ({
   onSelectionChange,
   placeholder,
   error,
+  onOpenChange,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
+  const handleToggle = () => {
+    const newIsOpen = !isOpen;
+    setIsOpen(newIsOpen);
+    onOpenChange?.(newIsOpen);
+  };
+
   // Close dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
         setIsOpen(false);
+        onOpenChange?.(false);
       }
     };
 
@@ -35,11 +44,12 @@ export const SingleSelectDropdown: React.FC<SingleSelectDropdownProps> = ({
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [isOpen]);
+  }, [isOpen, onOpenChange]);
 
   const handleSelect = (option: string) => {
     onSelectionChange(option);
     setIsOpen(false);
+    onOpenChange?.(false);
   };
 
   const handleRemove = (e: React.MouseEvent) => {
@@ -51,7 +61,7 @@ export const SingleSelectDropdown: React.FC<SingleSelectDropdownProps> = ({
     <Box position="relative" w="full" ref={dropdownRef}>
       <button
         type="button"
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={handleToggle}
         style={{
           width: '100%',
           minHeight: '40px',
diff --git a/frontend/src/pages/participant/intake/index.tsx b/frontend/src/pages/participant/intake/index.tsx
index 190ba1b1..f74ab1cd 100644
--- a/frontend/src/pages/participant/intake/index.tsx
+++ b/frontend/src/pages/participant/intake/index.tsx
@@ -66,6 +66,7 @@ export default function ParticipantIntakePage() {
     formType: 'participant',
   });
   const [, setSubmitting] = useState(false);
+  const [hasDropdownOpen, setHasDropdownOpen] = useState(false);
 
   const computeFlowSteps = (data: IntakeFormData) => {
     const { hasBloodCancer, caringForSomeone } = data;
@@ -226,7 +227,7 @@ export default function ParticipantIntakePage() {
   return (
     <ProtectedPage allowedRoles={[UserRole.PARTICIPANT, UserRole.ADMIN]}>
       <FormStatusGuard allowedStatuses={[FormStatus.INTAKE_TODO]}>
-        <Flex minH="100vh" bg={COLORS.lightGray} justify="center" py={12} overflow="visible">
+        <Flex minH="100vh" bg={COLORS.lightGray} justify="center" py={12} overflow="visible" pb={hasDropdownOpen ? '50vh' : 12}>
           <Box
             w="full"
             maxW="1200px"
@@ -238,7 +239,11 @@ export default function ParticipantIntakePage() {
             position="relative"
           >
             {currentStepType === 'experience-personal' && (
-              <PersonalInfoForm formType="participant" onSubmit={handleExperiencePersonalSubmit} />
+              <PersonalInfoForm
+                formType="participant"
+                onSubmit={handleExperiencePersonalSubmit}
+                onDropdownOpenChange={setHasDropdownOpen}
+              />
             )}
 
             {currentStepType === 'demographics-cancer' && (
diff --git a/frontend/src/pages/volunteer/intake/index.tsx b/frontend/src/pages/volunteer/intake/index.tsx
index ee614739..76cb4628 100644
--- a/frontend/src/pages/volunteer/intake/index.tsx
+++ b/frontend/src/pages/volunteer/intake/index.tsx
@@ -66,6 +66,7 @@ export default function VolunteerIntakePage() {
     formType: 'volunteer',
   });
   const [, setSubmitting] = useState(false);
+  const [hasDropdownOpen, setHasDropdownOpen] = useState(false);
 
   // Determine flow based on experience type selections
   const computeFlowSteps = (data: IntakeFormData) => {
@@ -235,7 +236,7 @@ export default function VolunteerIntakePage() {
   return (
     <ProtectedPage allowedRoles={[UserRole.VOLUNTEER, UserRole.ADMIN]}>
       <FormStatusGuard allowedStatuses={[FormStatus.INTAKE_TODO]}>
-        <Flex minH="100vh" bg={COLORS.lightGray} justify="center" py={12} overflow="visible">
+        <Flex minH="100vh" bg={COLORS.lightGray} justify="center" py={12} overflow="visible" pb={hasDropdownOpen ? '30vh' : 12}>
           <Box
             w="full"
             maxW="1200px"
@@ -247,7 +248,11 @@ export default function VolunteerIntakePage() {
             position="relative"
           >
             {currentStepType === 'experience-personal' && (
-              <PersonalInfoForm formType="volunteer" onSubmit={handleExperiencePersonalSubmit} />
+              <PersonalInfoForm
+                formType="volunteer"
+                onSubmit={handleExperiencePersonalSubmit}
+                onDropdownOpenChange={setHasDropdownOpen}
+              />
             )}
 
             {currentStepType === 'demographics-cancer' && (

From 73c36884a3677785616faade8891ca49632c8190 Mon Sep 17 00:00:00 2001
From: YashK2005 <yashkoth7@gmail.com>
Date: Mon, 10 Nov 2025 20:35:06 -0500
Subject: [PATCH 3/3] lint

---
 frontend/src/pages/participant/intake/index.tsx | 9 ++++++++-
 frontend/src/pages/volunteer/intake/index.tsx   | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/participant/intake/index.tsx b/frontend/src/pages/participant/intake/index.tsx
index f74ab1cd..52a57f28 100644
--- a/frontend/src/pages/participant/intake/index.tsx
+++ b/frontend/src/pages/participant/intake/index.tsx
@@ -227,7 +227,14 @@ export default function ParticipantIntakePage() {
   return (
     <ProtectedPage allowedRoles={[UserRole.PARTICIPANT, UserRole.ADMIN]}>
       <FormStatusGuard allowedStatuses={[FormStatus.INTAKE_TODO]}>
-        <Flex minH="100vh" bg={COLORS.lightGray} justify="center" py={12} overflow="visible" pb={hasDropdownOpen ? '50vh' : 12}>
+        <Flex
+          minH="100vh"
+          bg={COLORS.lightGray}
+          justify="center"
+          py={12}
+          overflow="visible"
+          pb={hasDropdownOpen ? '50vh' : 12}
+        >
           <Box
             w="full"
             maxW="1200px"
diff --git a/frontend/src/pages/volunteer/intake/index.tsx b/frontend/src/pages/volunteer/intake/index.tsx
index 76cb4628..ffbbb155 100644
--- a/frontend/src/pages/volunteer/intake/index.tsx
+++ b/frontend/src/pages/volunteer/intake/index.tsx
@@ -236,7 +236,14 @@ export default function VolunteerIntakePage() {
   return (
     <ProtectedPage allowedRoles={[UserRole.VOLUNTEER, UserRole.ADMIN]}>
       <FormStatusGuard allowedStatuses={[FormStatus.INTAKE_TODO]}>
-        <Flex minH="100vh" bg={COLORS.lightGray} justify="center" py={12} overflow="visible" pb={hasDropdownOpen ? '30vh' : 12}>
+        <Flex
+          minH="100vh"
+          bg={COLORS.lightGray}
+          justify="center"
+          py={12}
+          overflow="visible"
+          pb={hasDropdownOpen ? '30vh' : 12}
+        >
           <Box
             w="full"
             maxW="1200px"