fix: rf v3 tidy up mobile issues (#21078)

* remove incomplete booking from mobile

* add incomplete booking to dropdown on mobile

* padding

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}`,
     },

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>
               )}

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" />,
                   },
                 ]

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"
                 )}>