Skip to content

Commit a13712c

Browse files
waleedlatif1waleedlatif1
committed
fix(toast): derive the workflow inset from the shell's actual padding
WORKFLOW_INSET_PX baked in the 8px the workspace shell normally insets the panel and terminal by, so the stack's 20px resolved to a 12px clearance — matching the canvas controls. But the shell drops to p-0 on the desktop title-bar shell with a collapsed sidebar, and there the stack would have sat 20px out while the controls, laid out inside the shell, stayed at 12. The stack now adds --workspace-content-gap (published on :root, zeroed by the same condition that zeroes the padding) to a flat 12, so the two surfaces hold the same clearance in both configurations. Before this PR they matched in the p-0 case at 16px each, so this closes a divergence the PR would otherwise have introduced.
1 parent 77b0db9 commit a13712c

2 files changed

Lines changed: 33 additions & 9 deletions

File tree

‎apps/sim/app/_styles/globals.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,18 @@
2222
--panel-width: 320px; /* PANEL_WIDTH.DEFAULT */
2323
--editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */
2424
--terminal-height: 206px; /* TERMINAL_HEIGHT.DEFAULT */
25+
/**
26+
* The padding `.workspace-content-shell` insets the panel and terminal from
27+
* the viewport by (CONTENT_WINDOW_GAP).
28+
*
29+
* Published here because surfaces portalled to `<body>` — the toast stack —
30+
* position against those elements from the viewport, so they must add back
31+
* whatever separates the element from the viewport edge. Reading it rather
32+
* than hardcoding 8px is what keeps the toast and the canvas controls on the
33+
* same clearance when the shell drops its padding; the controls are laid out
34+
* inside the shell and so need no correction.
35+
*/
36+
--workspace-content-gap: 8px;
2537
--output-panel-width: 560px; /* OUTPUT_PANEL_WIDTH.DEFAULT */
2638
/**
2739
* Neutral border and divider thickness. Standard-density displays cannot draw
@@ -162,6 +174,14 @@ html[data-sim-desktop-title-bar="inset"]
162174
--workspace-content-title-bar-inset: var(--desktop-title-bar-height);
163175
}
164176

177+
/* The one case the shell drops its padding entirely (see `workspace-chrome.tsx`:
178+
`isCollapsed && '[[data-sim-desktop-title-bar=inset]_&]:p-0'`). Declared on the
179+
root so the portalled toast stack — which cannot inherit from the shell — sees
180+
it too, and keeps the same clearance the in-shell canvas controls keep. */
181+
html[data-sim-desktop-title-bar="inset"]:has(.workspace-content-shell[data-sidebar-collapsed]) {
182+
--workspace-content-gap: 0px;
183+
}
184+
165185
.workspace-root code,
166186
.workspace-root kbd,
167187
.workspace-root samp,

‎packages/emcn/src/components/toast/toast.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,19 @@ const TOAST_WIDTH = 'min(100vw - 2rem, 280px)'
3636
/** Gap from the viewport edge on an ordinary page. */
3737
const VIEWPORT_INSET_PX = 16
3838
/**
39-
* Gap the stack keeps from the workflow panel and terminal it sits against.
39+
* Gap the stack keeps from the workflow panel and terminal it sits against —
40+
* the same one the canvas controls keep, so the two floating surfaces read as
41+
* one row.
4042
*
41-
* Larger than the 12px the edges actually end up apart, because the panel and
42-
* terminal are themselves inset from the viewport by the workspace's own 8px
43-
* content gap and `--panel-width` / `--terminal-height` measure only the
44-
* element. The canvas controls clear the same two edges by the same 12px, so
45-
* the two floating surfaces read as one row.
43+
* `--panel-width` / `--terminal-height` measure the element, not its distance
44+
* from the viewport, and the stack is portalled to `<body>` so it anchors from
45+
* the viewport. `--workspace-content-gap` adds back whatever padding the
46+
* workspace shell insets those elements by — normally 8px, but 0 on the desktop
47+
* shell with a collapsed sidebar. Hardcoding the sum would silently hold the
48+
* stack 8px further out in that configuration while the controls, which are laid
49+
* out inside the shell, stayed put.
4650
*/
47-
const WORKFLOW_INSET_PX = 20
51+
const WORKFLOW_INSET_PX = 12
4852

4953
/** Most toasts kept alive at once; older arrivals are evicted. */
5054
const STACK_LIMIT = 3
@@ -619,10 +623,10 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
619623
}}
620624
style={{
621625
right: isWorkflowPage
622-
? `calc(var(--panel-width) + ${WORKFLOW_INSET_PX}px)`
626+
? `calc(var(--panel-width) + var(--workspace-content-gap, 0px) + ${WORKFLOW_INSET_PX}px)`
623627
: `${VIEWPORT_INSET_PX}px`,
624628
bottom: isWorkflowPage
625-
? `calc(var(--terminal-height) + ${WORKFLOW_INSET_PX}px)`
629+
? `calc(var(--terminal-height) + var(--workspace-content-gap, 0px) + ${WORKFLOW_INSET_PX}px)`
626630
: `${VIEWPORT_INSET_PX}px`,
627631
width: TOAST_WIDTH,
628632
height: containerHeight,

0 commit comments

Comments
 (0)