fix: Make incomplete booking form mobile-responsive (#26413)

This commit is contained in:
Eesh Midha
2026-01-03 13:02:14 +00:00
committed by GitHub
parent 048a9b04fa
commit 78826a37a1
@@ -128,22 +128,22 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
<div className="bg-default mt-2 rounded-xl px-2 py-2">
<Label>Credential to use</Label>
<Select
size="sm"
options={credentialOptions}
value={selectedCredential}
onChange={(option) => {
if (!option) {
return;
}
setSelectedCredential(option);
}}
/>
</div>
size="sm"
options={credentialOptions}
value={selectedCredential}
onChange={(option) => {
if (!option) {
return;
}
setSelectedCredential(option);
}}
/>
</div>
</>
)}
<div className="bg-default mt-2 rounded-xl px-2 py-2">
<div className="grid grid-cols-5 gap-4">
<div className="hidden md:grid md:grid-cols-5 md:gap-4">
<Label>{t("field_name")}</Label>
<Label>{t("field_type")}</Label>
<Label>{t("value")}</Label>
@@ -155,22 +155,25 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
salesforceWriteToRecordObject[key as keyof typeof salesforceWriteToRecordObject];
return (
<div
className="mt-2 grid gap-4"
style={{ gridTemplateColumns: "repeat(5, 1fr)" }}
className="mt-2 border-subtle flex flex-col gap-3 rounded-lg border p-3 md:mt-2 md:grid md:grid-cols-5 md:gap-4 md:border-0 md:p-0"
key={key}>
<div className="w-full">
<Label className="md:hidden">{t("field_name")}</Label>
<InputField value={key} readOnly />
</div>
<div className="w-full">
<Label className="md:hidden">{t("field_type")}</Label>
<Select
value={fieldTypeOptions.find((option) => option.value === action.fieldType)}
isDisabled={true}
/>
</div>
<div className="w-full">
<Label className="md:hidden">{t("value")}</Label>
<InputField value={action.value as string} readOnly />
</div>
<div className="w-full">
<Label className="md:hidden">{t("when_to_write")}</Label>
<Select
value={whenToWriteToRecordOptions.find(
(option) => option.value === action.whenToWrite
@@ -178,7 +181,7 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
isDisabled={true}
/>
</div>
<div>
<div className="flex justify-end md:justify-start">
<Button
StartIcon="trash"
variant="icon"
@@ -193,8 +196,9 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
</div>
);
})}
<div className="mt-2 grid grid-cols-5 gap-4">
<div className="mt-2 border-subtle flex flex-col gap-4 rounded-lg border p-3 md:mt-2 md:grid md:grid-cols-5 md:gap-4 md:border-0 md:p-0">
<div>
<Label className="md:hidden">{t("field_name")}</Label>
<InputField
size="sm"
value={newSalesforceAction.field}
@@ -207,6 +211,7 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
/>
</div>
<div>
<Label className="md:hidden">{t("field_type")}</Label>
<Select
size="sm"
options={fieldTypeOptions}
@@ -223,6 +228,7 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
/>
</div>
<div>
<Label className="md:hidden">{t("value")}</Label>
<InputField
size="sm"
value={newSalesforceAction.value}
@@ -235,6 +241,7 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
/>
</div>
<div>
<Label className="md:hidden">{t("when_to_write")}</Label>
<Select
size="sm"
options={whenToWriteToRecordOptions}