fix(editor): Fix workflow diff navigation left arrow hover state

[sandra0503]

Summary

• Add z-index: 1 on :hover to visually fix the hover state
• Fix button heights

Screenshots

Related Linear tickets, Github issues, and Community forum posts

Fixes LIGO-146

Review / Merge checklist

• PR title and summary are descriptive. (conventions)
• Docs updated or follow-up ticket created.
• Tests included.
• PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

[codecov]

Bundle Report

Changes will increase total bundle size by 256 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
editor-ui-esm	42.44MB	256 bytes (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: editor-ui-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
assets/constants-*.js	75 bytes	2.89MB	0.0%
assets/src-*.js	133 bytes	2.22MB	0.01%
assets/index-*.js	229 bytes	1.14MB	0.02%
assets/index-*.css	38 bytes	770.53kB	0.0%
assets/src-*.css	-147 bytes	474.98kB	-0.03%
assets/useCanvasMapping-*.js	-139 bytes	441.76kB	-0.03%
assets/ChatView-*.css	-37 bytes	85.78kB	-0.04%
assets/ProjectSettings-*.css	104 bytes	27.27kB	0.38%

Files in assets/index-*.js:

• ./src/features/workflows/workflowDiff/WorkflowDiffModal.vue → Total Size: 363 bytes

• ./src/features/integrations/sourceControl.ee/components/SourceControlPushModal.vue → Total Size: 401 bytes

[cubic-dev-ai]

cubic analysis

No issues found across 2 files

Linked issue analysis

Linked issue: LIGO-146: Workflow diff navigation: left arrow hover state inconsistent

Status	Acceptance criteria	Notes
✅	Hovering the left arrow button should apply a consistent hover state on all four borders	Added z-index on .navigationButton :hover to surface borders
⚠️	Hover style should visually match the behavior of the adjacent buttons ("Changes" and the right arrow)	z-index added but no explicit hover style alignment with neighbors
✅	No parts of the button should look partially hovered or clipped when the cursor is over it	z-index ensures the hovered button is drawn above neighbors to avoid clipping
✅	Prevent adjacent controls from intercepting hover (e.g., overlap/pointer intercept)	Hover z-index increase prevents neighboring elements from blocking hover
✅	The fix is implemented in the workflow diff navigation component (WorkflowDiffModal.vue)	Changes are present in WorkflowDiffModal.vue adjusting navigationButton rules

Architecture diagram

sequenceDiagram
    participant User
    participant CSS as CSS Engine (Browser)
    participant WDM as WorkflowDiffModal
    participant SCPM as SourceControlPushModal
    participant Button as N8nButton Component

    Note over User,WDM: Workflow Diff Navigation UI
    User->>CSS: Hover over Nav Button
    CSS->>WDM: Match .navigationButton:hover
    WDM->>CSS: NEW: Set z-index: 1
    Note right of WDM: Fixes visual overlap issues<br/>with adjacent borders

    Note over User,SCPM: Source Control UI
    User->>SCPM: View Source Control Modal
    SCPM->>Button: Mount Filter Button
    SCPM->>CSS: NEW: Apply .filterButton class
    CSS->>CSS: CHANGED: Calculate height (align-self: stretch)
    Note right of SCPM: Replaces hardcoded style="height: 100%"<br/>for better flexbox alignment

Loading

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[n8n-assistant]

Got released with [email protected]