fix(portal): workflows layout — canvas collapsed to 0 width
ci / test (pull_request) Failing after 4m55s
ci / shared (pull_request) Successful in 11s
ci / e2e (pull_request) Has been skipped
ci / image (pull_request) Has been skipped

The workflows route layout used `display: flex` on the wrapper without
giving the `.flow` child `flex: 1`. With Flexbox's default
`flex: 0 1 auto`, the child shrunk to its non-flex content — palette
(234px) + inspector (286px) = 520px — leaving the canvas wrap at width 0.
Nodes, toolbar and zoom controls were positioned absolutely against a
0-wide parent so nothing painted.

Fix: drop `display: flex` on the wrapper. `.flow` already has
`display: flex; height: 100%` and as a block-level child it fills the
width naturally.

Verified via Playwright: canvas-wrap now 1168×746 and all 7 seed nodes
render at expected positions.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
2026-06-04 16:04:26 +02:00
parent a03aa0a4c4
commit 26f41a8122
+6 -4
View File
@@ -2,16 +2,18 @@ import type { ReactNode } from "react";
// Workflows is full-bleed — the editor (palette + canvas + inspector) // Workflows is full-bleed — the editor (palette + canvas + inspector)
// takes the entire content area, so we strip the standard `.content-inner` // takes the entire content area, so we strip the standard `.content-inner`
// max-width wrapper. The parent `.content` is already `overflow-y: auto`, // max-width wrapper and pin a block container that `.flow` (display:flex,
// so we force `min-height: 0` here to let the editor's own grid fill. // height:100%) fills naturally.
//
// Don't make this wrapper `display: flex` — the child `.flow` would then
// be a non-flex flex-item that shrinks to its fixed-width palette +
// inspector and leaves the canvas at width 0.
export default function WorkflowsLayout({ children }: { children: ReactNode }) { export default function WorkflowsLayout({ children }: { children: ReactNode }) {
return ( return (
<div <div
style={{ style={{
position: "absolute", position: "absolute",
inset: 0, inset: 0,
display: "flex",
minHeight: 0,
overflow: "hidden", overflow: "hidden",
}} }}
> >