fix(modals): center modals in visible content area accounting for sidebar and panel

[waleedlatif1]

Summary

• Command K and all emcn modals now center in the visible content area (between sidebar and panel) instead of the full viewport
• Fixed `--sidebar-width` CSS default to `0px` so non-workspace pages (login, landing) keep modals viewport-centered
• Blocking script now always explicitly sets `--sidebar-width` on workspace pages, covering new users and error cases
• Search modal accounts for the right panel on workflow pages
• emcn `ModalContent` uses `usePathname` to detect workflow pages and apply panel-aware centering
• Removed horizontal slide animation from emcn Modal (was tied to hardcoded `left: 50%`)

Type of Change

• Bug fix

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)

[cursor]

PR Summary

Low Risk
Low risk UI-only changes that adjust CSS defaults and client-side positioning/animation for modals; main risk is unintended layout shifts on specific routes or breakpoints.

Overview
Modals and Command-K search are re-centered to the visible workspace content area by computing left based on --sidebar-width and (on /w/ workflow routes) --panel-width, instead of always centering on the full viewport.

Workspace layout CSS vars are made safer across routes: --sidebar-width now defaults to 0px globally (so non-workspace pages stay viewport-centered), and the pre-hydration blocking script now always sets an explicit sidebar width fallback (248px) on workspace pages, including when localStorage is missing/invalid.

Modal motion is adjusted by removing the horizontal slide animation from emcn ModalContent to avoid conflicting with the new non-50% centering logic.

^{Reviewed by Cursor Bugbot for commit bb1745a. Configure here.}

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Apr 4, 2026 2:09am

[greptile-apps]

Greptile Summary

This PR fixes modal centering across the app so that Command K and all emcn modals center in the visible content area (between the sidebar and panel) rather than the full viewport. It achieves this via three coordinated mechanisms: a corrected --sidebar-width CSS sentinel of 0px (so non-workspace pages remain viewport-centered without any scripting), a tightened blocking script in layout.tsx that now always explicitly sets --sidebar-width on workspace pages (covering the new-user and parse-error cases that previously fell through to the CSS default), and updated centering formulas in both modal.tsx and search-modal.tsx.

Key changes:

• globals.css: --sidebar-width default changed from 248px → 0px so that non-workspace pages (login, landing) see calc(0px/2 + 50%) = 50%, i.e. true viewport center, without any script intervention.
• layout.tsx: Blocking script now covers three previously un-handled cases — stored state present but width < 248, no stored state at all, and JSON.parse error — by explicitly setting 248px in each rather than relying on the old CSS default.
• search-modal.tsx: Uses the isOnWorkflowPage prop (passed as !!workflowId from sidebar.tsx) to choose between the panel-aware formula calc(50% + (sidebar - panel) / 2) and the sidebar-only formula calc(sidebar/2 + 50%). Both formulas are mathematically correct.
• modal.tsx: Uses usePathname().includes('/w/') to apply the same two-formula approach to all ModalContent usages. The horizontal slide animation has been removed since it was anchored to the old hardcoded left: 50%.

Confidence Score: 5/5

Safe to merge — all changes are a coherent, well-reasoned fix with no regressions identified.

All prior review concerns were thoughtfully addressed (CSS sentinel rationale, blocking script coverage, formula documentation, panel-always-rendered comment). No new P0 or P1 issues found. The centering formulas are mathematically correct, the blocking-script edge cases are now fully covered, and the usePathname approach is idiomatic for Next.js.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/_styles/globals.css	Changes --sidebar-width default from 248px to 0px sentinel so non-workspace pages remain viewport-centred without scripting; inline comment updated to explain the intent clearly.
apps/sim/app/layout.tsx	Blocking script hardened to always set --sidebar-width on workspace pages, covering three previously unhandled paths (width out-of-range, no stored state, JSON parse error), eliminating reliance on the now-sentinel CSS default.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx	Search modal now uses the prop-driven isOnWorkflowPage (set to !!workflowId at the call site in sidebar.tsx) to apply the panel-aware centering formula on workflow pages and the sidebar-only formula elsewhere; both formulas are algebraically correct.
apps/sim/components/emcn/components/modal/modal.tsx	ModalContent now uses usePathname().includes('/w/') to select between two correct centering formulas; horizontal slide animation removed since it was tied to the old hardcoded left: 50%.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Page Load] --> B{pathname includes /workspace/?}
    B -- No --> C[CSS default: --sidebar-width = 0px]
    B -- Yes --> D{localStorage sidebar-state exists?}
    D -- No --> E[Set --sidebar-width = 248px default]
    D -- Yes --> F{isCollapsed?}
    F -- Yes --> G[Set --sidebar-width = 51px]
    F -- No --> H{width in valid range?}
    H -- Yes --> I[Set --sidebar-width = stored width]
    H -- width > max --> J[Set --sidebar-width = maxSidebarWidth]
    H -- width out of range --> K[Set --sidebar-width = 248px default]
    D -- parse error --> L[Set --sidebar-width = 248px default]
    C --> M[Modal centering]
    G --> M
    I --> M
    J --> M
    K --> M
    E --> M
    L --> M
    M --> N{pathname includes /w/?}
    N -- Yes --> O[left: calc 50% + sidebar - panel / 2]
    N -- No --> P[left: calc sidebar/2 + 50%]
    P -- sidebar=0px --> Q[= 50% viewport center]

Loading

_{Reviews (2): Last reviewed commit: "fix(modals): address pr feedback — comme..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit bb1745a. Configure here.}