fix: Routing page horizontal scroll for small mobile devices (#24663)

* fix: horizontal scroll for small mobile devices

* address cubics comments

* fix disable form toggle

---------

Co-authored-by: Pallav <90088723+Pallava-Joshi@users.noreply.github.com>

apps/web/components/apps/routing-forms/Header.tsx

@@ -183,7 +183,7 @@ const Actions = ({
                 action="toggle"
                 routingForm={form}
                 label="Disable Form"
-                extraClassNames="hover:bg-subtle cursor-pointer rounded-[5px] pr-4 transition"
+                extraClassNames="hover:bg-subtle cursor-pointer rounded-[5px] px-3 py-2 transition"
               />
             </div>
           </FormActionsDropdown>
@@ -264,7 +264,7 @@ export function Header({
   return (
     <div className="bg-default flex flex-col lg:grid lg:grid-cols-3 lg:items-center">
       {/* Left - Back button and title */}
-      <div className="border-muted flex items-center gap-2 border-b px-4 py-3">
+      <div className="border-muted flex items-center gap-2 border-b px-3 py-3 lg:px-4">
         <Button
           color="minimal"
           variant="icon"
@@ -289,7 +289,7 @@ export function Header({
           ) : (
             <div className="group flex items-center gap-1">
               <span
-                className="text-default hover:bg-cal-muted min-w-[100px] cursor-pointer truncate whitespace-nowrap rounded px-1 text-sm font-semibold leading-none"
+                className="text-default hover:bg-cal-muted min-w-0 cursor-pointer truncate whitespace-nowrap rounded px-1 text-sm font-semibold leading-none"
                 onClick={() => setIsEditing(true)}>
                 {watchedName || "Loading..."}
               </span>
@@ -308,9 +308,9 @@ export function Header({
       </div>
 
       {/* Mobile/Tablet layout - Second row with toggle group and actions on the same row */}
-      <div className="border-muted flex items-center justify-between border-b px-4 py-3 lg:hidden">
+      <div className="border-muted flex items-center justify-between gap-2 overflow-hidden border-b px-3 py-3 lg:hidden lg:px-4">
         {/* Navigation Tabs - Left aligned */}
-        <div className="flex">
+        <div className="flex flex-shrink">
           <ToggleGroup
             defaultValue={getCurrentPage()}
             value={getCurrentPage()}
@@ -318,13 +318,13 @@ export function Header({
             options={[
               {
                 value: "form-edit",
-                label: t("form"),
+                label: <span className="sr-only sm:not-sr-only">{t("form")}</span>,
                 iconLeft: <Icon name="menu" className="h-3 w-3" />,
                 dataTestId: "toggle-group-item-form-edit",
               },
               {
                 value: "route-builder",
-                label: t("routing"),
+                label: <span className="sr-only sm:not-sr-only">{t("routing")}</span>,
                 iconLeft: <Icon name="waypoints" className="h-3 w-3" />,
               },
             ]}
@@ -332,7 +332,7 @@ export function Header({
         </div>
 
         {/* Actions - Right aligned */}
-        <div className="flex">
+        <div className="flex min-w-0 flex-shrink-0">
           <Actions
             form={routingForm}
             setIsTestPreviewOpen={setIsTestPreviewOpen}
@@ -346,7 +346,7 @@ export function Header({
       </div>
 
       {/* Desktop layout - Toggle group in center column */}
-      <div className="border-muted hidden justify-center border-b px-4 py-3 lg:flex">
+      <div className="border-muted hidden justify-center border-b px-3 py-3 lg:flex lg:px-4">
         <ToggleGroup
           defaultValue={getCurrentPage()}
           value={getCurrentPage()}
@@ -354,12 +354,12 @@ export function Header({
           options={[
             {
               value: "form-edit",
-              label: t("form"),
+              label: <span className="sr-only sm:not-sr-only">{t("form")}</span>,
               iconLeft: <Icon name="menu" className="h-3 w-3" />,
             },
             {
               value: "route-builder",
-              label: t("routing"),
+              label: <span className="sr-only sm:not-sr-only">{t("routing")}</span>,
               iconLeft: <Icon name="waypoints" className="h-3 w-3" />,
             },
           ]}
@@ -367,7 +367,7 @@ export function Header({
       </div>
 
       {/* Desktop layout - Actions in right column */}
-      <div className="border-muted hidden justify-end border-b px-4 py-3 lg:flex">
+      <div className="border-muted hidden justify-end border-b px-3 py-3 lg:flex lg:px-4">
         <Actions
           form={routingForm}
           setIsTestPreviewOpen={setIsTestPreviewOpen}

apps/web/components/apps/routing-forms/SingleForm.tsx

@@ -190,7 +190,7 @@ function SingleForm({
               {isDesktop ? (
                 <motion.div
                   layout
-                  className="mx-auto w-full max-w-4xl px-2 lg:px-4 xl:px-0"
+                  className="mx-auto w-full max-w-4xl px-3 lg:px-4 xl:px-0"
                   transition={{ duration: 0.3, ease: "easeInOut" }}>
                   <Page hookForm={hookForm} form={form} appUrl={appUrl} />
                 </motion.div>

packages/ui/components/card/FormCard.tsx

@@ -135,7 +135,7 @@ export default function FormCard({
         {moveUp?.check() ? (
           <button
             type="button"
-            className="bg-default text-muted hover:text-emphasis invisible -ml-[13px] mb-1 flex h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow group-hover:visible group-hover:scale-100"
+            className="bg-default text-muted hover:text-emphasis invisible -ml-2 mb-1 flex h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow group-hover:visible group-hover:scale-100"
             onClick={() => moveUp?.fn()}>
             <Icon name="arrow-up" />
           </button>
@@ -143,7 +143,7 @@ export default function FormCard({
         {moveDown?.check() ? (
           <button
             type="button"
-            className="bg-default text-muted hover:text-emphasis invisible -ml-[13px] flex h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow group-hover:visible group-hover:scale-100"
+            className="bg-default text-muted hover:text-emphasis invisible -ml-2 flex h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow group-hover:visible group-hover:scale-100"
             onClick={() => moveDown?.fn()}>
             <Icon name="arrow-down" />
           </button>

packages/ui/components/form/switch/Switch.tsx

@@ -47,7 +47,7 @@ export const Switch = (
         className={cx(
           "flex h-auto w-fit flex-row items-center",
           fitToHeight && "h-fit",
-          labelOnLeading && "flex-row-reverse",
+          labelOnLeading && "w-full flex-row-reverse justify-between",
           padding && "hover:bg-subtle rounded-md p-1.5",
           classNames?.container
         )}>
@@ -76,7 +76,7 @@ export const Switch = (
             htmlFor={id}
             className={cx(
               "text-emphasis font-medium",
-              size === "sm" ? "m-1 text-xs" : "ml-2 mt-1 text-sm",
+              size === "sm" ? "m-1 text-xs" : labelOnLeading ? "mr-2 mt-1 text-sm" : "ml-2 mt-1 text-sm",
               primitiveProps.disabled ? "cursor-not-allowed opacity-25" : "cursor-pointer",
               labelOnLeading && "flex-1"
             )}>