fix: routing form: dont disable routing and reporting on mobile and fix mobile layout instead (#17444)

packages/app-store/routing-forms/components/RoutingNavBar.tsx

@@ -17,13 +17,11 @@ export default function RoutingNavBar({
     {
       name: "Routing",
       href: `${appUrl}/route-builder/${form?.id}`,
-      className: "pointer-events-none opacity-30 lg:pointer-events-auto lg:opacity-100",
     },
     {
       name: "Reporting",
       target: "_blank",
       href: `${appUrl}/reporting/${form?.id}`,
-      className: "pointer-events-none opacity-30 lg:pointer-events-auto lg:opacity-100",
     },
   ];
   return (

packages/app-store/routing-forms/components/SingleForm.tsx

@@ -612,7 +612,7 @@ function SingleForm({ form, appUrl, Page, enrichedWithUserProfileForm }: SingleF
             CTA={<Actions form={form} mutation={mutation} />}>
             <div className="-mx-4 mt-4 px-4 sm:px-6 md:-mx-8 md:mt-0 md:px-8">
               <div className="flex flex-col items-center items-baseline md:flex-row md:items-start">
-                <div className="lg:min-w-72 lg:max-w-72 mb-6 md:mr-6">
+                <div className="lg:min-w-72 lg:max-w-72 md:max-w-56 mb-6 w-full md:mr-6">
                   <TextField
                     type="text"
                     containerClassName="mb-6"

packages/app-store/routing-forms/components/react-awesome-query-builder/styles.css

@@ -126,3 +126,16 @@
   flex: 1;
   display: flex;
 }
+
+@media (max-width: 1024px) {
+  .rule--body {
+    flex-direction: column;
+  }
+
+
+  .cal-query-builder .rule--field,
+  .cal-query-builder .rule--operator,
+  .cal-query-builder .rule--value {
+    width: 100%;
+  }
+}

packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx

@@ -468,45 +468,47 @@ const Route = ({
           setRoutes(newRoutes);
         },
       }}>
-      <div className="-mx-4 mb-4 flex w-full items-center sm:mx-0">
+      <div className="mb-4 flex w-full items-center sm:mx-0">
         <div className="cal-query-builder w-full ">
           {formFieldsQueryBuilder}
           <div>
-            <div className="text-emphasis flex w-full items-center text-sm">
-              <div className="flex flex-grow-0 whitespace-nowrap">
-                <span>{t("send_booker_to")}</span>
+            <div className="flex w-full flex-col gap-2 text-sm lg:flex-row">
+              <div className="flex flex-grow items-center gap-2">
+                <div className="flex flex-grow-0 whitespace-nowrap">
+                  <span>{t("send_booker_to")}</span>
+                </div>
+                <Select
+                  isDisabled={disabled}
+                  className="data-testid-select-routing-action block w-full flex-grow"
+                  required
+                  value={RoutingPages.find((page) => page.value === route.action?.type)}
+                  onChange={(item) => {
+                    if (!item) {
+                      return;
+                    }
+                    const action: LocalRoute["action"] = {
+                      type: item.value,
+                      value: "",
+                    };
+
+                    if (action.type === "customPageMessage") {
+                      action.value = "We are not ready for you yet :(";
+                    } else {
+                      action.value = "";
+                    }
+
+                    setRoute(route.id, { action });
+                  }}
+                  options={RoutingPages}
+                />
               </div>
-              <Select
-                isDisabled={disabled}
-                className="data-testid-select-routing-action block w-full flex-grow px-2"
-                required
-                value={RoutingPages.find((page) => page.value === route.action?.type)}
-                onChange={(item) => {
-                  if (!item) {
-                    return;
-                  }
-                  const action: LocalRoute["action"] = {
-                    type: item.value,
-                    value: "",
-                  };
-
-                  if (action.type === "customPageMessage") {
-                    action.value = "We are not ready for you yet :(";
-                  } else {
-                    action.value = "";
-                  }
-
-                  setRoute(route.id, { action });
-                }}
-                options={RoutingPages}
-              />
               {route.action?.type ? (
                 route.action?.type === "customPageMessage" ? (
                   <TextArea
                     required
                     disabled={disabled}
                     name="customPageMessage"
-                    className="border-default flex w-full flex-grow"
+                    className="border-default flex flex-grow lg:w-fit"
                     value={route.action.value}
                     onChange={(e) => {
                       setRoute(route.id, { action: { ...route.action, value: e.target.value } });
@@ -516,8 +518,8 @@ const Route = ({
                   <TextField
                     disabled={disabled}
                     name="externalRedirectUrl"
-                    className="border-default flex w-full flex-grow text-sm"
-                    containerClassName="w-full mt-2"
+                    className="border-default flex flex-grow text-sm"
+                    containerClassName="flex-grow"
                     type="url"
                     required
                     labelSrOnly
@@ -528,7 +530,7 @@ const Route = ({
                     placeholder="https://example.com"
                   />
                 ) : (
-                  <div className="block w-full">
+                  <div className="flex-grow">
                     <Select
                       required
                       className="data-testid-eventTypeRedirectUrl-select"
@@ -560,7 +562,7 @@ const Route = ({
                         <TextField
                           disabled={disabled}
                           className="border-default flex w-full flex-grow text-sm"
-                          containerClassName="w-full mt-2"
+                          containerClassName="flex-grow mt-2"
                           addOnLeading={eventTypePrefix}
                           required
                           value={customEventTypeSlug}