From 6410bd2eaf1a1c40a3ef4fe25b44b5dff85f811d Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Fri, 2 May 2025 11:01:07 +0100
Subject: [PATCH] fix: rf v3 tidy up mobile issues (#21078)

* remove incomplete booking from mobile

* add incomplete booking to dropdown on mobile

* padding
---
 .../routing-forms/components/FormActions.tsx  |  4 ++++
 .../routing-forms/components/SingleForm.tsx   |  2 +-
 .../components/_components/Header.tsx         | 22 ++++++++++---------
 .../form/toggleGroup/ToggleGroup.tsx          |  2 +-
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/app-store/routing-forms/components/FormActions.tsx b/packages/app-store/routing-forms/components/FormActions.tsx
index 90e58232d5..94a959aaf8 100644
--- a/packages/app-store/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/routing-forms/components/FormActions.tsx
@@ -391,6 +391,7 @@ export function FormActionsProvider({
 
 type FormActionType =
   | "preview"
+  | "incompleteBooking"
   | "edit"
   | "copyLink"
   | "toggle"
@@ -470,6 +471,9 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
     edit: {
       href: `${appUrl}/form-edit/${routingForm?.id}`,
     },
+    incompleteBooking: {
+      href: `${appUrl}/incomplete-booking/${routingForm?.id}`,
+    },
     download: {
       href: `/api/integrations/routing-forms/responses/${routingForm?.id}`,
     },
diff --git a/packages/app-store/routing-forms/components/SingleForm.tsx b/packages/app-store/routing-forms/components/SingleForm.tsx
index 13e5825f83..507593bfa7 100644
--- a/packages/app-store/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/routing-forms/components/SingleForm.tsx
@@ -171,7 +171,7 @@ function SingleForm({ form, appUrl, Page, enrichedWithUserProfileForm }: SingleF
                   <Page hookForm={hookForm} form={form} appUrl={appUrl} />
                 </motion.div>
               ) : (
-                <div className="mx-auto w-full max-w-4xl">
+                <div className="mx-auto w-full max-w-4xl px-2">
                   <Page hookForm={hookForm} form={form} appUrl={appUrl} />
                 </div>
               )}
diff --git a/packages/app-store/routing-forms/components/_components/Header.tsx b/packages/app-store/routing-forms/components/_components/Header.tsx
index de3c147073..32de4c49f6 100644
--- a/packages/app-store/routing-forms/components/_components/Header.tsx
+++ b/packages/app-store/routing-forms/components/_components/Header.tsx
@@ -111,6 +111,17 @@ const Actions = ({
               StartIcon="external-link">
               {t("view_form")}
             </FormAction>
+            {isMobile ? (
+              <FormAction
+                action="incompleteBooking"
+                className="w-full"
+                routingForm={form}
+                color="minimal"
+                type="button"
+                StartIcon="calendar">
+                {t("routing_incomplete_booking_tab")}
+              </FormAction>
+            ) : null}
             <FormAction
               action="copyLink"
               className="w-full"
@@ -300,15 +311,6 @@ export function Header({
                 label: t("routing"),
                 iconLeft: <Icon name="waypoints" className="h-3 w-3" />,
               },
-              ...(showIncompleteBookingTab
-                ? [
-                    {
-                      value: "incomplete-booking",
-                      label: t("routing_incomplete_booking_tab"),
-                      iconLeft: <Icon name="calendar" className="h-3 w-3" />,
-                    },
-                  ]
-                : []),
             ]}
           />
         </div>
@@ -347,7 +349,7 @@ export function Header({
               ? [
                   {
                     value: "incomplete-booking",
-                    label: t("incomplete_booking"),
+                    label: t("routing_incomplete_booking_tab"),
                     iconLeft: <Icon name="calendar" className="h-3 w-3" />,
                   },
                 ]
diff --git a/packages/ui/components/form/toggleGroup/ToggleGroup.tsx b/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
index 50f06437aa..6e9490ab4a 100644
--- a/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
+++ b/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
@@ -78,7 +78,7 @@ export const ToggleGroup = ({
               )}>
               <div
                 className={classNames(
-                  "flex items-center gap-2",
+                  "flex items-center gap-1",
                   orientation === "horizontal" && "justify-center",
                   orientation === "vertical" && "justify-start"
                 )}>