improvement(tour): align product tour tooltip styling with emcn and fix spotlight overflow by waleedlatif1 · Pull Request #3854 · simstudioai/sim

waleedlatif1 · 2026-03-30T23:51:46Z

Summary

Align tour tooltip styling with emcn conventions: design system font tokens (text-small, text-caption, text-xs), rounded-xl, ring-1 ring-foreground/10 and shadow-overlay matching ModalContent, tinted footer background matching ModalFooter
Fix scrollbar jitter between steps by setting scrollbar-gutter: stable on <html> while tour is active
Remove useState + useEffect anti-pattern for targetEl in TourTooltipAdapter — derive directly during render since Joyride only renders client-side after the target is in the DOM
Fix Tasks and Workflows spotlight overflowing the sidebar edge by adding mx-2 to their section containers (matching the width of individual nav items)
Replace inline filter style with a drop-shadow-tour Tailwind utility in the config, consistent with how other shadows are handled
Fix typo in Tasks tour step copy ("resource" → "resources")

Type of Change

Bug fix
Improvement

Testing

Tested manually

Checklist

Code follows project style guidelines
Self-reviewed my changes
Tests added/updated and passing
No new warnings introduced
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

…ix spotlight overflow

cursor · 2026-03-30T23:51:51Z

PR Summary

Medium Risk
Primarily UI/styling changes, but it also mutates the global <html> scrollbar-gutter while tours run, which could affect layout/scroll behavior across pages if not cleaned up correctly.

Overview
Updates the product tour tooltip to match EMCN design tokens and surfaces (font sizes, rounded-xl, footer styling, ring/shadow), and replaces an inline filter with a new Tailwind drop-shadow-tour utility.

Improves tour stability by deriving targetEl directly in TourTooltipAdapter (removing state/effect), forcing scrollbar-gutter: stable on <html> while a tour is running to prevent scrollbar jitter, and adjusting the sidebar Tasks/Workflows section margins/padding to prevent the spotlight from overflowing the sidebar edge. Also fixes a small typo in the Tasks tour copy.

^{Written by Cursor Bugbot for commit 3759ebb. Configure here.}

vercel · 2026-03-30T23:51:51Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 30, 2026 11:51pm

greptile-apps · 2026-03-30T23:55:20Z

Greptile Summary

This PR is a focused polish pass on the product tour: it aligns tooltip styling with the emcn design system, fixes a sidebar spotlight overflow, eliminates a useState/useEffect anti-pattern, adds scrollbar-gutter stabilisation, and fixes a copy typo. All changes are self-contained and low risk.

Styling alignment — tour-tooltip.tsx replaces hard-coded sizes (text-sm, text-[12px], text-[11px], rounded-[8px]) with design-system tokens (text-small, text-caption, text-xs, rounded-xl) and swaps border + shadow-sm for shadow-overlay ring-1 ring-foreground/10, matching ModalContent conventions.
Drop-shadow utility — Inline filter style on the Popover content is extracted to a drop-shadow-tour Tailwind utility in tailwind.config.ts; the ambient shadow radius was intentionally increased from 1px/2px to 4px/12px.
Scrollbar jitter fix — use-tour.ts sets scrollbar-gutter: stable on <html> while the tour is active and restores the previous value on cleanup, preventing content shift between steps.
targetEl derivation — TourTooltipAdapter drops the useState + useEffect round-trip and derives targetEl synchronously during render. This is safe because Joyride only invokes the tooltip renderer client-side once the target element is in the DOM.
Spotlight overflow fix — mx-2 is added to the Tasks and Workflows section containers in sidebar.tsx, aligning their highlight bounds with those of individual nav items; the inner header padding is adjusted from px-4 → px-2 to keep visual alignment unchanged.
Close button hit area — A before: pseudo-element enlarges the 16×16 px close button to a 44×44 px touch target without affecting layout.
Typo fix — "resource" → "resources" in the Tasks tour step copy.

Confidence Score: 5/5

Safe to merge — all changes are visual/styling improvements with correct cleanup logic and no regressions identified.
No P0 or P1 issues found. The scrollbar-gutter effect correctly saves and restores the previous value. The synchronous document.querySelector during render is read-only and justified by Joyride's client-only rendering guarantee. The mx-2 + px-2 combination preserves the 16 px effective padding from the sidebar edge. All remaining observations are P2 style/suggestion quality.
No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/components/product-tour/nav-tour-steps.ts	Fixes typo: "resource" → "resources" in the Tasks tour step description.
apps/sim/app/workspace/[workspaceId]/components/product-tour/tour-shared.tsx	Removes useState+useEffect anti-pattern for targetEl — derives it synchronously during render; valid since Joyride only renders this component client-side after the target is already in the DOM.
apps/sim/app/workspace/[workspaceId]/components/product-tour/use-tour.ts	Adds scrollbar-gutter:stable to the html element while the tour is running to prevent scrollbar-caused layout jitter between steps; cleanup correctly restores the previous value.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx	Adds mx-2 to Tasks and Workflows section containers (matching nav item width) and compensates with px-2 on header divs to prevent spotlight overflow at the sidebar edge.
apps/sim/components/emcn/components/tour-tooltip/tour-tooltip.tsx	Aligns tooltip styling with design system tokens (text-small, text-caption, text-xs, rounded-xl, shadow-overlay, ring-1 ring-foreground/10); enlarges close button hit area with pseudo-element; simplifies Back button visibility with className instead of wrapper div.
apps/sim/tailwind.config.ts	Adds drop-shadow-tour utility using CSS color-mix for a border-matching outline shadow and a soft vertical ambient shadow, replacing the previous inline style.

Sequence Diagram

sequenceDiagram
    participant App
    participant useTour
    participant Joyride
    participant TourTooltipAdapter
    participant TourTooltip

    App->>useTour: run = true
    useTour->>Document: scrollbarGutter = "stable"
    useTour->>Joyride: run=true, stepIndex, handleCallback

    Joyride->>TourTooltipAdapter: render(TooltipRenderProps)
    TourTooltipAdapter->>Document: querySelector(step.target) — sync during render
    TourTooltipAdapter->>TourTooltip: targetEl, placement, isVisible, isEntrance

    TourTooltip->>Document.body: createPortal(PopoverPrimitive / centered div)

    Note over useTour: User clicks Next
    useTour->>useTour: setIsTooltipVisible(false)
    useTour->>useTour: setTimeout(FADE_OUT_MS) → setStepIndex(n+1)
    useTour->>useTour: rAF×2 → setIsTooltipVisible(true)

    Note over App: Tour ends / component unmounts
    useTour->>Document: restore previous scrollbarGutter

_{Reviews (1): Last reviewed commit: "improvement(tour): align product tour to..." | Re-trigger Greptile}

improvement(tour): align product tour tooltip styling with emcn and f…

3759ebb

…ix spotlight overflow

waleedlatif1 merged commit 72eea64 into staging Mar 30, 2026
12 checks passed

waleedlatif1 deleted the improvement/tour branch March 30, 2026 23:59

waleedlatif1 mentioned this pull request Mar 31, 2026

v0.6.18: file operations block, profound integration, edge connection improvements, copy logs, knowledgebase robustness #3861

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

improvement(tour): align product tour tooltip styling with emcn and fix spotlight overflow#3854

improvement(tour): align product tour tooltip styling with emcn and fix spotlight overflow#3854
waleedlatif1 merged 1 commit intostagingfrom
improvement/tour

waleedlatif1 commented Mar 30, 2026

Uh oh!

cursor bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 30, 2026

Uh oh!

greptile-apps bot commented Mar 30, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

waleedlatif1 commented Mar 30, 2026

Summary

Type of Change

Testing

Checklist

Uh oh!

cursor bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

vercel bot commented Mar 30, 2026

Uh oh!

greptile-apps bot commented Mar 30, 2026

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Sequence Diagram

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

cursor bot commented Mar 30, 2026 •

edited

Loading