Sharang ParnerkarandClaude Opus 4.7
26f41a8122
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>
24 lines
735 B
TypeScript
24 lines
735 B
TypeScript
import type { ReactNode } from "react";
|
|
|
|
// Workflows is full-bleed — the editor (palette + canvas + inspector)
|
|
// takes the entire content area, so we strip the standard `.content-inner`
|
|
// max-width wrapper and pin a block container that `.flow` (display:flex,
|
|
// 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 }) {
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
inset: 0,
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|