From 26f41a81229f4eaf6a22d23868f42f60f941c7a1 Mon Sep 17 00:00:00 2001 From: Sharang Parnerkar <30073382+mighty840@users.noreply.github.com> Date: Thu, 4 Jun 2026 16:04:26 +0200 Subject: [PATCH] =?UTF-8?q?fix(portal):=20workflows=20layout=20=E2=80=94?= =?UTF-8?q?=20canvas=20collapsed=20to=200=20width?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/app/[slug]/workflows/layout.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/app/[slug]/workflows/layout.tsx b/src/app/[slug]/workflows/layout.tsx index fa0c9d9..e5d9821 100644 --- a/src/app/[slug]/workflows/layout.tsx +++ b/src/app/[slug]/workflows/layout.tsx @@ -2,16 +2,18 @@ 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. The parent `.content` is already `overflow-y: auto`, -// so we force `min-height: 0` here to let the editor's own grid fill. +// 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 (