From 78826a37a1a9dceee1269b8197ed49ea8b0da263 Mon Sep 17 00:00:00 2001
From: Eesh Midha <72607015+eeshm@users.noreply.github.com>
Date: Sat, 3 Jan 2026 18:32:14 +0530
Subject: [PATCH] fix: Make incomplete booking form mobile-responsive (#26413)

---
 .../[...pages]/IncompleteBooking.tsx          | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx
index 11c3f15e23..e3ea981b47 100644
--- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx
+++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx
@@ -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}