Fix dropdown styling (#70)

Small fix for dropdown styling where some dropdowns in the intake form
were being covered.

Before
<img width="421" height="341" alt="image"
src="https://github.com/user-attachments/assets/85a5dc4f-0e0f-4df6-a061-cb7ed202eb50"
/>
After
<img width="472" height="475" alt="Screenshot 2025-11-10 at 7 41 39 PM"
src="https://github.com/user-attachments/assets/8e7f3e67-eda9-4a06-8f7b-b0db418cf8a0"
/>

## Notion ticket link
<!-- Please replace with your ticket's URL -->
[Ticket
Name](https://www.notion.so/uwblueprintexecs/Task-Board-db95cd7b93f245f78ee85e3a8a6a316d)


<!-- Give a quick summary of the implementation details, provide design
justifications if necessary -->
## Implementation description
* 


<!-- What should the reviewer do to verify your changes? Describe
expected results and include screenshots when appropriate -->
## Steps to test
1.


<!-- Draw attention to the substantial parts of your PR or anything
you'd like a second opinion on -->
## What should reviewers focus on?
* 


## Checklist
- [ ] My PR name is descriptive and in imperative tense
- [ ] My commit messages are descriptive and in imperative tense. My
commits are atomic and trivial commits are squashed or fixup'd into
non-trivial commits
- [ ] I have run the appropriate linter(s)
- [ ] I have requested a review from the PL, as well as other devs who
have background knowledge on this PR or who will be building on top of
this PR

Author: YashK2005

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}
                   />
                 )}
               />

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);

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) => {
@@ -48,10 +58,10 @@ 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)}
+        onClick={handleToggle}
         style={{
           width: '100%',
           minHeight: '40px',
@@ -143,7 +153,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

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,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">
+        <Flex
+          minH="100vh"
+          bg={COLORS.lightGray}
+          justify="center"
+          py={12}
+          overflow="visible"
+          pb={hasDropdownOpen ? '50vh' : 12}
+        >
           <Box
             w="full"
             maxW="1200px"
@@ -238,7 +246,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' && (

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,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">
+        <Flex
+          minH="100vh"
+          bg={COLORS.lightGray}
+          justify="center"
+          py={12}
+          overflow="visible"
+          pb={hasDropdownOpen ? '30vh' : 12}
+        >
           <Box
             w="full"
             maxW="1200px"
@@ -247,7 +255,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' && (