fix: Make incomplete booking form mobile-responsive (#26413)
This commit is contained in:
+23
-16
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user