fixed height of recurring event select (#4213)

apps/web/components/v2/eventtype/RecurringEventController.tsx

@@ -72,7 +72,7 @@ export default function RecurringEventController({
                         type="number"
                         min="1"
                         max="20"
-                        className="block w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                        className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                         defaultValue={recurringEventState.interval}
                         onChange={(event) => {
                           const newVal = {
@@ -87,7 +87,7 @@ export default function RecurringEventController({
                         options={recurringEventFreqOptions}
                         value={recurringEventFreqOptions[recurringEventState.freq]}
                         isSearchable={false}
-                        className="w-18 block min-w-0 rounded-md text-sm"
+                        className="w-18 block h-[36px] min-w-0 rounded-md text-sm"
                         onChange={(event) => {
                           const newVal = {
                             ...recurringEventState,
@@ -99,12 +99,12 @@ export default function RecurringEventController({
                       />
                     </div>
                     <div className="mt-4 flex items-center">
-                      <p className="mr-2 text-neutral-900">{t("max")}</p>
+                      <p className="mr-2 text-neutral-900">{t("for_a_maximum_of")}</p>
                       <input
                         type="number"
                         min="1"
                         max="20"
-                        className="block w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                        className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                         defaultValue={recurringEventState.count}
                         onChange={(event) => {
                           const newVal = {
@@ -116,7 +116,7 @@ export default function RecurringEventController({
                         }}
                       />
                       <p className="mr-2 text-neutral-900">
-                        {t("occurrence", {
+                        {t("events", {
                           count: recurringEventState.count,
                         })}
                       </p>

apps/web/public/static/locales/en/common.json

@@ -1150,5 +1150,8 @@
   "attendee_name_info":"The person booking's name",
   "to": "To",
   "attendee_required_enter_number": "This will require the attendee to enter a phone number when booking",
-  "workflow_turned_on_successfully": "{{workflowName}} workflow turned {{offOn}} successfully"
+  "workflow_turned_on_successfully": "{{workflowName}} workflow turned {{offOn}} successfully",
+  "for_a_maximum_of": "For a maximum of",
+  "event_one": "event",
+  "event_other": "events"
 }

packages/ui/v2/core/form/Select.tsx

@@ -34,7 +34,7 @@ function Select<
   return (
     <ReactSelect
       className={classNames(
-        "cal-react-select-container block h-[36px] w-full min-w-0 flex-1 rounded-md text-sm ",
+        "cal-react-select-container block h-[36px] w-full min-w-0 flex-1 rounded-md text-sm",
         className
       )}
       classNamePrefix="cal-react-select"
@@ -44,7 +44,6 @@ function Select<
         colors: {
           ...theme.colors,
           primary: "var(--brand-color)",
-
           primary50: "rgba(209 , 213, 219, var(--tw-bg-opacity))",
           primary25: "rgba(244, 245, 246, var(--tw-bg-opacity))",
         },