[portal][ui] allow customization of spacing within MonthYearPicker

apps/portal/src/components/offers/forms/FormMonthYearPicker.tsx

@@ -28,6 +28,7 @@ function FormMonthYearPickerWithRef({
 
   return (
     <MonthYearPicker
+      className="space-x-6"
       {...(rest as MonthYearPickerProps)}
       value={value}
       onChange={(val) => {

apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx

@@ -140,6 +140,7 @@ export default function ContributeQuestionForm({
               name="date"
               render={({ field }) => (
                 <MonthYearPicker
+                  className="space-x-2"
                   monthRequired={true}
                   value={{
                     month: ((field.value.getMonth() as number) + 1) as Month,

apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx

@@ -96,6 +96,7 @@ export default function CreateQuestionEncounterForm({
       )}
       {step === 3 && (
         <MonthYearPicker
+          className="space-x-2"
           // TODO: Add label and hide label on Select instead.
           monthLabel=""
           value={{

apps/portal/src/components/shared/MonthYearPicker.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { useEffect, useId, useState } from 'react';
 import { Select } from '@tih/ui';
 
@@ -14,6 +15,7 @@ export type MonthYearOptional = Readonly<{
 }>;
 
 type Props = Readonly<{
+  className?: string;
   errorMessage?: string;
   monthLabel?: string;
   monthRequired?: boolean;
@@ -84,6 +86,7 @@ const YEAR_OPTIONS = Array.from({ length: NUM_YEARS }, (_, i) => {
 });
 
 export default function MonthYearPicker({
+  className,
   errorMessage,
   monthLabel = 'Month',
   value,
@@ -109,9 +112,11 @@ export default function MonthYearPicker({
 
   return (
     <div aria-describedby={hasError ? errorId : undefined}>
-      <div className="flex items-end space-x-2">
+      <div className={clsx('flex items-end', className)}>
+        <div className="grow">
           <Select
             key={`month:${monthCounter}`}
+            display="block"
             label={monthLabel}
             options={MONTH_OPTIONS}
             placeholder="Select month"
@@ -121,8 +126,11 @@ export default function MonthYearPicker({
               onChange({ month: Number(newMonth) as Month, year: value.year })
             }
           />
+        </div>
+        <div className="grow">
           <Select
             key={`year:${yearCounter}`}
+            display="block"
             label={yearLabel}
             options={YEAR_OPTIONS}
             placeholder="Select year"
@@ -133,6 +141,7 @@ export default function MonthYearPicker({
             }
           />
         </div>
+      </div>
       {errorMessage && (
         <p className="text-danger-600 mt-2 text-sm" id={errorId}>
           {errorMessage}