[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,29 +112,35 @@ 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)}>
-        <Select
+        <div className="grow">
-          key={`month:${monthCounter}`}
+          <Select
-          label={monthLabel}
+            key={`month:${monthCounter}`}
-          options={MONTH_OPTIONS}
+            display="block"
-          placeholder="Select month"
+            label={monthLabel}
-          required={monthRequired}
+            options={MONTH_OPTIONS}
-          value={value.month}
+            placeholder="Select month"
-          onChange={(newMonth) =>
+            required={monthRequired}
-            onChange({ month: Number(newMonth) as Month, year: value.year })
+            value={value.month}
-          }
+            onChange={(newMonth) =>
-        />
+              onChange({ month: Number(newMonth) as Month, year: value.year })
-        <Select
+            }
-          key={`year:${yearCounter}`}
+          />
-          label={yearLabel}
+        </div>
-          options={YEAR_OPTIONS}
+        <div className="grow">
-          placeholder="Select year"
+          <Select
-          required={yearRequired}
+            key={`year:${yearCounter}`}
-          value={value.year}
+            display="block"
-          onChange={(newYear) =>
+            label={yearLabel}
-            onChange({ month: value.month, year: Number(newYear) })
+            options={YEAR_OPTIONS}
-          }
+            placeholder="Select year"
-        />
+            required={yearRequired}
+            value={value.year}
+            onChange={(newYear) =>
+              onChange({ month: value.month, year: Number(newYear) })
+            }
+          />
+        </div>
       </div>
       {errorMessage && (
         <p className="text-danger-600 mt-2 text-sm" id={errorId}>