fix: Navbar hiding unexpectedly on Workflow page scroll (calcom#27557)

* prevent navbar hiding unexpectedly on scroll

* update z-5 to z-10 for consistency

---------

Co-authored-by: Deepanshu Verma <deepanshuverma186@email.com>
Co-authored-by: Romit <romitgabani@icloud.com>
Co-authored-by: Romit <85230081+romitg2@users.noreply.github.com>

Author: 3 people

apps/web/modules/ee/workflows/views/WorkflowPage.tsx

@@ -145,11 +145,11 @@ function WorkflowPage({
     workflow && hasPermissions(workflow)
       ? workflow?.permissions
       : {
-          canUpdate: !teamId,
-          canView: !teamId,
-          canDelete: !teamId,
-          readOnly: !!teamId,
-        };
+        canUpdate: !teamId,
+        canView: !teamId,
+        canDelete: !teamId,
+        readOnly: !!teamId,
+      };
 
   // Watch for form name changes
   const watchedName = form.watch("name");
@@ -225,8 +225,8 @@ function WorkflowPage({
         activeOn = isOrg
           ? teamOptions
           : isFormTrigger(workflowData.trigger)
-          ? routingFormOptions
-          : allEventTypeOptions;
+            ? routingFormOptions
+            : allEventTypeOptions;
       } else {
         if (isOrg) {
           activeOn = workflowData.activeOnTeams.flatMap((active) => {
@@ -256,9 +256,9 @@ function WorkflowPage({
           );
           activeOn = workflowData.activeOn
             ? workflowData.activeOn.map((active) => ({
-                value: active.eventType.id.toString(),
-                label: active.eventType.slug,
-              }))
+              value: active.eventType.id.toString(),
+              label: active.eventType.slug,
+            }))
             : undefined;
         }
       }
@@ -433,7 +433,7 @@ function WorkflowPage({
           await validateAndSubmitWorkflow(values);
         }}>
         <div className="flex h-full min-h-screen w-full flex-col">
-          <div className="bg-default border-muted flex w-full items-center justify-between border-b px-2 py-2 sm:px-4">
+          <div className="bg-default border-muted sticky top-0 z-10 flex w-full items-center justify-between border-b px-2 py-2 sm:px-4">
             <div className="border-muted flex min-w-0 items-center gap-2">
               <Button
                 color="secondary"
@@ -461,11 +461,11 @@ function WorkflowPage({
                 ) : (
                   <div className="group flex min-w-0 items-center gap-1">
 
-                      <span
-                        className="text-default hover:bg-cal-muted min-w-0 cursor-pointer truncate whitespace-nowrap rounded p-1 text-sm font-semibold leading-none"
-                        onClick={() => setIsEditingName(true)}>
-                        {watchedName ? watchedName : isPending ? t("loading") : t("untitled")}
-                      </span>
+                    <span
+                      className="text-default hover:bg-cal-muted min-w-0 cursor-pointer truncate whitespace-nowrap rounded p-1 text-sm font-semibold leading-none"
+                      onClick={() => setIsEditingName(true)}>
+                      {watchedName ? watchedName : isPending ? t("loading") : t("untitled")}
+                    </span>
                     <Button
                       variant="icon"
                       color="minimal"
@@ -536,8 +536,8 @@ function WorkflowPage({
                           isOrg
                             ? teamOptions
                             : isFormTrigger(watchedTrigger)
-                            ? routingFormOptions
-                            : allEventTypeOptions
+                              ? routingFormOptions
+                              : allEventTypeOptions
                         }
                         eventTypeOptions={allEventTypeOptions}
                         onSaveWorkflow={handleSaveWorkflow}