chore(tour): extract shared Joyride config, fix popover arrow overflow

- Extract duplicated Joyride floaterProps/styles into getSharedJoyrideProps() in tour-shared.tsx, parameterized by spotlightBorderRadius - Fix showArrow disabling content scrolling in PopoverContent by wrapping children in a scrollable div when arrow is visible Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
simstudioai · waleedlatif1 · Mar 24, 2026 · Mar 18, 2026 · Mar 18, 2026 · Mar 19, 2026
commit d71f1a8ebaa28c21c53594c42bbe98d26ed14efc
diff --git a/apps/sim/app/workspace/[workspaceId]/components/product-tour/product-tour.tsx b/apps/sim/app/workspace/[workspaceId]/components/product-tour/product-tour.tsx
@@ -8,6 +8,7 @@ import type { TourState } from '@/app/workspace/[workspaceId]/components/product
 import {
   TourStateContext,
   TourTooltipAdapter,
+  getSharedJoyrideProps,
 } from '@/app/workspace/[workspaceId]/components/product-tour/tour-shared'
 import { useTour } from '@/app/workspace/[workspaceId]/components/product-tour/use-tour'
 
@@ -55,41 +56,7 @@ export function NavTour() {
         disableOverlayClose
         spotlightPadding={4}
         tooltipComponent={TourTooltipAdapter}
-        floaterProps={{
-          disableAnimation: true,
-          hideArrow: true,
-          styles: {
-            floater: {
-              filter: 'none',
-              opacity: 0,
-              pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
-              width: 0,
-              height: 0,
-            },
-          },
-        }}
-        styles={{
-          options: {
-            zIndex: 10000,
-          },
-          spotlight: {
-            backgroundColor: 'transparent',
-            border: '1px solid rgba(255, 255, 255, 0.1)',
-            borderRadius: 8,
-            boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.55)',
-            position: 'fixed' as React.CSSProperties['position'],
-            transition:
-              'top 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), left 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-          },
-          overlay: {
-            backgroundColor: 'transparent',
-            mixBlendMode: 'unset' as React.CSSProperties['mixBlendMode'],
-            position: 'fixed' as React.CSSProperties['position'],
-            height: '100%',
-            overflow: 'visible',
-            pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
-          },
-        }}
+        {...getSharedJoyrideProps({ spotlightBorderRadius: 8 })}
       />
     </TourStateContext.Provider>
   )

diff --git a/apps/sim/app/workspace/[workspaceId]/components/product-tour/tour-shared.tsx b/apps/sim/app/workspace/[workspaceId]/components/product-tour/tour-shared.tsx
@@ -109,3 +109,49 @@ export function TourTooltipAdapter({
     </>
   )
 }
+
+const SPOTLIGHT_TRANSITION =
+  'top 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), left 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+
+/**
+ * Returns the shared Joyride floaterProps and styles config used by both tours.
+ * Only `spotlightPadding` and spotlight `borderRadius` differ between tours.
+ */
+export function getSharedJoyrideProps(overrides: { spotlightBorderRadius: number }) {
+  return {
+    floaterProps: {
+      disableAnimation: true,
+      hideArrow: true,
+      styles: {
+        floater: {
+          filter: 'none',
+          opacity: 0,
+          pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
+          width: 0,
+          height: 0,
+        },
+      },
+    },
+    styles: {
+      options: {
+        zIndex: 10000,
+      },
+      spotlight: {
+        backgroundColor: 'transparent',
+        border: '1px solid rgba(255, 255, 255, 0.1)',
+        borderRadius: overrides.spotlightBorderRadius,
+        boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.55)',
+        position: 'fixed' as React.CSSProperties['position'],
+        transition: SPOTLIGHT_TRANSITION,
+      },
+      overlay: {
+        backgroundColor: 'transparent',
+        mixBlendMode: 'unset' as React.CSSProperties['mixBlendMode'],
+        position: 'fixed' as React.CSSProperties['position'],
+        height: '100%',
+        overflow: 'visible',
+        pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
+      },
+    },
+  } as const
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/product-tour/workflow-tour.tsx b/apps/sim/app/workspace/[workspaceId]/components/product-tour/workflow-tour.tsx
@@ -6,6 +6,7 @@ import type { TourState } from '@/app/workspace/[workspaceId]/components/product
 import {
   TourStateContext,
   TourTooltipAdapter,
+  getSharedJoyrideProps,
 } from '@/app/workspace/[workspaceId]/components/product-tour/tour-shared'
 import { useTour } from '@/app/workspace/[workspaceId]/components/product-tour/use-tour'
 import { workflowTourSteps } from '@/app/workspace/[workspaceId]/components/product-tour/workflow-tour-steps'
@@ -54,41 +55,7 @@ export function WorkflowTour() {
         disableOverlayClose
         spotlightPadding={1}
         tooltipComponent={TourTooltipAdapter}
-        floaterProps={{
-          disableAnimation: true,
-          hideArrow: true,
-          styles: {
-            floater: {
-              filter: 'none',
-              opacity: 0,
-              pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
-              width: 0,
-              height: 0,
-            },
-          },
-        }}
-        styles={{
-          options: {
-            zIndex: 10000,
-          },
-          spotlight: {
-            backgroundColor: 'transparent',
-            border: '1px solid rgba(255, 255, 255, 0.1)',
-            borderRadius: 6,
-            boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.55)',
-            position: 'fixed' as React.CSSProperties['position'],
-            transition:
-              'top 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), left 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-          },
-          overlay: {
-            backgroundColor: 'transparent',
-            mixBlendMode: 'unset' as React.CSSProperties['mixBlendMode'],
-            position: 'fixed' as React.CSSProperties['position'],
-            height: '100%',
-            overflow: 'visible',
-            pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
-          },
-        }}
+        {...getSharedJoyrideProps({ spotlightBorderRadius: 6 })}
       />
     </TourStateContext.Provider>
   )

diff --git a/apps/sim/components/emcn/components/popover/popover.tsx b/apps/sim/components/emcn/components/popover/popover.tsx
@@ -628,7 +628,11 @@ const PopoverContent = React.forwardRef<
           ...style,
         }}
       >
-        {children}
+        {showArrow ? (
+          <div className='flex-1 overflow-auto'>{children}</div>
+        ) : (
+          children
+        )}
         {showArrow && (
           <PopoverPrimitive.Arrow width={14} height={7} asChild>
             <svg