Styling issue in Quarkus Flow by kumaradityaraj · Pull Request #442 · open-workflow-specification/editor

kumaradityaraj · 2026-09-18T11:15:03Z

closes #375 and #378

Description

Fixes UI issues when the editor is embedded in the Quarkus Flow Dev UI.

Changes

Removed toast component and where it is used and updated the test cases.
When downloading file or PNG, the button itself changes to downloaded for 2 seconds similar to copy button.
Fixed missing CSS properties in the Quarkus Flow Dev UI, including the Export button border not being rendered correctly.
Fixed the modal closing unexpectedly when clicking Download as Mermaid.

Screenshots

Screen.Recording.2026-09-22.at.3.22.36.PM.mov

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

netlify · 2026-09-18T11:15:11Z

✅ Deploy Preview for openworkflow-editor ready!

Name	Link
🔨 Latest commit	`e2d378d`
🔍 Latest deploy log	https://app.netlify.com/projects/openworkflow-editor/deploys/6ab252ec97f71400087ea8cb
😎 Deploy Preview	https://deploy-preview-442--openworkflow-editor.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

🟡 Changes recommended

Address the CSS isolation issue and strengthen the download regression test.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

This PR fixes embedded Quarkus Flow styling and Mermaid download behavior.

Changes:

Corrects toast positioning and embedded CSS behavior.
Fixes Export button border rendering.
Prevents download actions from closing the modal.
Updates download tests.

File summaries

File	Review
`packages/open-workflow-diagram-editor/tests/lib/download.test.ts`	Moderate finding (1 vote): strengthen the regression test to verify no temporary anchor is appended.
`packages/open-workflow-diagram-editor/src/styles.css`	Moderate finding (3 votes): scope the universal border-style rule to `.dec-root`.
`packages/open-workflow-diagram-editor/src/lib/download.ts`	Removes temporary DOM insertion during downloads.

Review details

Suppressed comments (1)

packages/open-workflow-diagram-editor/tests/lib/download.test.ts:44

The updated test verifies the detached anchor's attributes, but it no longer guards the behavior this PR is fixing: an implementation could append/remove the anchor again and all current assertions would still pass, allowing the modal-closing regression to return. Spy on document.body.appendChild before calling downloadFile and assert that it is not called (or add an equivalent integration regression test).

    expect(mockElement.href).toBe("blob:mock-url");
    expect(mockElement.download).toBe("test.mmd");

Files reviewed: 3/3 changed files
Comments generated: 1
Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot

🔵 Needs a closer look

Two unresolved moderate CSS issues must be addressed before approval.

Review details

Suppressed comments (2)

Previously missed (1) — in code that hasn't changed since the last review.

packages/open-workflow-diagram-editor/src/styles.css:21

This package is explicitly embedded, and src/styles.css:48-53 requires global selectors to stay under .dec-root, but importing Sonner's raw stylesheet here leaves its global [data-sonner-*] rules active for every Sonner instance in the host document. If the host also uses Sonner, the editor can restyle or reposition the host's toasts; bundle a .dec-root-scoped copy (or otherwise scope the dependency rules) instead of exporting the raw stylesheet.

packages/open-workflow-diagram-editor/src/styles.css:21

Moving the Tailwind import ahead of this layer-order declaration changes the cascade order. Tailwind v4 creates its theme, base, components, utilities layers while processing @import 'tailwindcss'; these custom layers are then first introduced after utilities, so side-panel, react-flow-overrides, and the other custom layers now outrank every dec:* utility. The existing layer-order list was declared before the imports specifically to keep utilities at the intended end, so this can change existing styling when a utility and a component rule target the same element. Preserve the intended order by declaring the custom layers before the Tailwind import or explicitly including/reordering Tailwind's layers.

@import 'tailwindcss' prefix(dec);
@import './components/ui/shadcn.css';
@import 'sonner/dist/styles.css';

Files reviewed: 3/3 changed files
Comments generated: 0 new
Review effort level: Lite

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot

Copilot review overview

🟡 Changes recommended

Fix the invalid CSS layer statement and independent export feedback timers before approval.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 1

Open (1)

Terminate layer-order statement with a semicolon · New

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot

Copilot review overview

🔵 Needs a closer look

Unresolved moderate findings cover overlapping download timers, missing user-visible export failures, and incomplete timer/failure tests.

Review effort: Lite
Findings: None

Resolved since last review (1)

Terminate layer-order statement with a semicolon

Files not reviewed (1)

pnpm-lock.yaml: Generated file

lornakelly · 2026-09-23T09:38:06Z

  "sidebar.exportMermaid.copy": "Copy Mermaid Code",
  "sidebar.exportMermaid.download": "Download as Mermaid File",
  "sidebar.exportMermaid.copied": "Copied!",
+  "sidebar.export.downloaded": "Downloaded",


It doesnt need to say downloaded, I think just flashing downloading is fine - its obvious when its downloaded

lornakelly · 2026-09-23T09:47:09Z

@@ -15,15 +15,28 @@
 */

 /* layer order (Priority: lowest -> highest) */


The ordering in this file was deliberate before so not sue why it changed?

I would revert it and add your new block after import but it should be

/* layer order (Priority: lowest -> highest) */ @layer base, side-panel, react-flow-overrides, custom-nodes, custom-edge-labels; @import 'tailwindcss' prefix(dec); @import './components/ui/shadcn.css'; @custom-variant dark (&:where(.dec-root.dark, .dec-root.dark *)); @layer base { .dec-root, .dec-root *, .dec-root::before, .dec-root::after, .dec-root::backdrop, .dec-root *::before, .dec-root *::after, .dec-root *::backdrop { --tw-border-style: solid; } }

lornakelly · 2026-09-23T09:48:19Z

+  custom-edge-labels;

 @custom-variant dark (&:where(.dec-root.dark, .dec-root.dark *));



I also see further down this file there are toast tokens that are no longer used if you can remove please

lornakelly · 2026-09-23T10:02:58Z

-import * as sonner from "sonner";

 describe("WorkflowActions", () => {
  const toastMock = vi.fn();


Can still see references to toasts in tests here, can you have a look and update and remove where applicable

lornakelly · 2026-09-23T10:04:50Z

 export function WorkflowActions({ model }: { model: Specification.Workflow }): React.JSX.Element {
  const { t } = useI18n();
  const [isCopied, setIsCopied] = React.useState(false);
+  const [downloadedType, setDownloadedType] = React.useState<"mermaid" | "png" | null>(null);


Considering there is no need to show downloaded, it will simplify changes to this file, if you can make those updates to strip out that code

quarkus flow bugs in toast and side panel

ddbf66a

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI lite review requested due to automatic review settings September 18, 2026 11:15

Copilot started reviewing on behalf of kumaradityaraj September 18, 2026 11:15 View session

Copilot AI reviewed Sep 18, 2026

View reviewed changes

Comment thread packages/open-workflow-diagram-editor/src/styles.css

copilot suggestions

c628a72

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings September 18, 2026 11:26

Copilot started reviewing on behalf of kumaradityaraj September 18, 2026 11:26 View session

Copilot AI reviewed Sep 18, 2026

View reviewed changes

kumaradityaraj requested review from fantonangeli, handreyrc and lornakelly September 18, 2026 11:34

lornakelly reviewed Sep 18, 2026

View reviewed changes

Comment thread packages/open-workflow-diagram-editor/src/styles.css Outdated

kumaradityaraj removed request for fantonangeli and handreyrc September 22, 2026 08:53

kumaradityaraj added 2 commits September 22, 2026 15:26

Removed toast notification

a3b684e

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

changeset

5bdac0d

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings September 22, 2026 09:58

Copilot started reviewing on behalf of kumaradityaraj September 22, 2026 09:59 View session

Copilot AI reviewed Sep 22, 2026

View reviewed changes

Comment thread packages/open-workflow-diagram-editor/src/styles.css Outdated

copilot suggestions

e2d378d

Signed-off-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings September 22, 2026 10:05

Copilot started reviewing on behalf of kumaradityaraj September 22, 2026 10:06 View session

Copilot AI reviewed Sep 22, 2026

View reviewed changes

kumaradityaraj requested review from fantonangeli, handreyrc and lornakelly September 22, 2026 10:16

lornakelly reviewed Sep 23, 2026

View reviewed changes

Navigation Menu

Styling issue in Quarkus Flow - #442

Styling issue in Quarkus Flow #442
kumaradityaraj wants to merge 5 commits into
open-workflow-specification:mainfrom
kumaradityaraj:toastNotification

kumaradityaraj commented Sep 18, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Sep 18, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

lornakelly Sep 23, 2026

Uh oh!

lornakelly Sep 23, 2026

Uh oh!

lornakelly Sep 23, 2026

Uh oh!

lornakelly Sep 23, 2026

Uh oh!

lornakelly Sep 23, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -15,15 +15,28 @@
		*/

		/* layer order (Priority: lowest -> highest) */

		custom-edge-labels;

		@custom-variant dark (&:where(.dec-root.dark, .dec-root.dark *));

Conversation

kumaradityaraj commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

Screenshots

Uh oh!

netlify Bot commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for openworkflow-editor ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Suppressed comments (1)

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Suppressed comments (2)

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🔵 Needs a closer look

Uh oh!

lornakelly Sep 23, 2026

Choose a reason for hiding this comment

Uh oh!

lornakelly Sep 23, 2026

Choose a reason for hiding this comment

Uh oh!

lornakelly Sep 23, 2026

Choose a reason for hiding this comment

Uh oh!

lornakelly Sep 23, 2026

Choose a reason for hiding this comment

Uh oh!

lornakelly Sep 23, 2026

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kumaradityaraj commented Sep 18, 2026 •

edited

Loading

netlify Bot commented Sep 18, 2026 •

edited

Loading