dify - ✅(Solved) Fix Incorrect UI layout for maximized node output panel in execution logs [1 pull requests, 1 participants]

dify2026-04-10 03:41:36

ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

langgenius/dify#34887•Fetched 2026-04-11 06:32:04

View on GitHub

Comments

Participants

Timeline

Reactions

Author

QuantumGhost

Participants

QuantumGhost

Timeline (top)

labeled ×2closed ×1cross-referenced ×1issue_type_added ×1

Fix Action

Fixed

Fixed by PR: fix(workflow): correct maximized editor panel layout in execution logs (https://github.com/langgenius/dify/pull/34909)

PR fix notes

PR #34909: fix(workflow): correct maximized editor panel layout in execution logs

Repository: langgenius/dify
Author: HamzaSwitch
State: closed | merged: True
Link: https://github.com/langgenius/dify/pull/34909

Description (problem / solution / changelog)

Summary

useToggleExpend hardcodes top-[52px] left-4 right-6 bottom-0 for the non-node overlay. That worked in the older contexts it was originally written for, but it's not right for the conversation log layout — the status bar above the editors in ResultPanel is taller than 52px, so the maximized panel starts inside the status bar and visually cuts through it.

Fixes #34887

What changed

web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts

Non-node overlay now uses absolute inset-0 so it fills the nearest positioned ancestor, instead of relying on magic offsets that happen to match one specific parent layout.
Switched the measurement to useLayoutEffect and clamped editorExpandHeight to 0 so the editor body doesn't briefly render at the stale collapsed height on first expand.

web/app/components/workflow/nodes/_base/components/editor/base.tsx

When the wrapper is expanded, drop the inner rounded-lg border on the ref div so the overlay sits flush with the drawer edges instead of looking like it's floating inside a rounded card.

web/app/components/workflow/nodes/_base/hooks/__tests__/use-toggle-expend.spec.ts (new)

Covers the collapsed state, both expanded variants (isInNode true/false), and the chrome-height math, including the negative-clamp edge case for very small containers.

Before / After

Before — maximized INPUT panel cuts through the status bar:

After — clean flush overlay covering the whole drawer:

Testing

Reproduced on a self-hosted stack (docker compose -p dify up -d) by creating a minimal chatflow (Start → Answer), running it from the Preview panel with any input, clicking the bot reply to open the Conversation Log, and clicking the maximize button on the INPUT panel. The status bar was visually cut in half before the fix; it's cleanly covered by the full-drawer overlay after.

I also sanity-checked the isInNode: true branch (prompt editor inside a workflow node panel) to make sure the fixed-position overlay there still renders the same as before — that code path is unchanged.

Unit spec passes locally.

Changed files

web/app/components/workflow/nodes/_base/components/editor/base.tsx (modified, +1/-1)
web/app/components/workflow/nodes/_base/hooks/__tests__/use-toggle-expend.spec.ts (added, +123/-0)
web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts (modified, +40/-8)

Code Example

app:
  description: ''
  icon: 🤖
  icon_background: '#FFEAD5'
  icon_type: emoji
  mode: advanced-chat
  name: TestNodePanelLayout
  use_icon_as_answer_icon: false
dependencies: []
kind: app
version: 0.6.0
workflow:
  conversation_variables: []
  environment_variables: []
  features:
    file_upload:
      allowed_file_extensions:
      - .JPG
      - .JPEG
      - .PNG
      - .GIF
      - .WEBP
      - .SVG
      allowed_file_types:
      - image
      - document
      - audio
      - video
      allowed_file_upload_methods:
      - remote_url
      - local_file
      enabled: true
      fileUploadConfig:
        attachment_image_file_size_limit: 2
        audio_file_size_limit: 50
        batch_count_limit: 5
        file_size_limit: 15
        file_upload_limit: 50
        image_file_batch_limit: 10
        image_file_size_limit: 10
        single_chunk_attachment_limit: 10
        video_file_size_limit: 100
        workflow_file_upload_limit: 10
      number_limits: 3
    opening_statement: ''
    retriever_resource:
      enabled: true
    sensitive_word_avoidance:
      enabled: false
    speech_to_text:
      enabled: false
    suggested_questions: []
    suggested_questions_after_answer:
      enabled: false
    text_to_speech:
      enabled: false
      language: ''
      voice: ''
  graph:
    edges:
    - data:
        isInLoop: false
        sourceType: start
        targetType: answer
      id: 1775792174783-source-answer-target
      source: '1775792174783'
      sourceHandle: source
      target: answer
      targetHandle: target
      type: custom
      zIndex: 0
    nodes:
    - data:
        selected: false
        title: User Input
        type: start
        variables: []
      height: 73
      id: '1775792174783'
      position:
        x: 80
        y: 282
      positionAbsolute:
        x: 80
        y: 282
      selected: false
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 242
    - data:
        answer: '{{#sys.files#}}'
        selected: false
        title: Answer
        type: answer
        variables: []
      height: 103
      id: answer
      position:
        x: 615
        y: 303
      positionAbsolute:
        x: 615
        y: 303
      selected: true
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 242
    viewport:
      x: 0
      y: 0
      zoom: 1
  rag_pipeline_variables: []

RAW_BUFFERClick to expand / collapse

Self Checks

I have read the Contributing Guide and Language Policy.
This is only for bug report, if you would like to ask a question, please head to Discussions.
I have searched for existing issues search for existing issues, including closed ones.
I confirm that I am using English to submit this report, otherwise it will be closed.
【中文用户 & Non English User】请使用英语提交，否则会被关闭：）
Please do not modify this template :) and fill in all the required fields.

Dify version

1.13.3

Cloud or Self Hosted

Cloud

Steps to reproduce

Import the following DSL
Upload a file and execute the chatflow with any query
View the conversation log of the execution
Click the maximize button of the input / output panel in the conversation panel.

app:
  description: ''
  icon: 🤖
  icon_background: '#FFEAD5'
  icon_type: emoji
  mode: advanced-chat
  name: TestNodePanelLayout
  use_icon_as_answer_icon: false
dependencies: []
kind: app
version: 0.6.0
workflow:
  conversation_variables: []
  environment_variables: []
  features:
    file_upload:
      allowed_file_extensions:
      - .JPG
      - .JPEG
      - .PNG
      - .GIF
      - .WEBP
      - .SVG
      allowed_file_types:
      - image
      - document
      - audio
      - video
      allowed_file_upload_methods:
      - remote_url
      - local_file
      enabled: true
      fileUploadConfig:
        attachment_image_file_size_limit: 2
        audio_file_size_limit: 50
        batch_count_limit: 5
        file_size_limit: 15
        file_upload_limit: 50
        image_file_batch_limit: 10
        image_file_size_limit: 10
        single_chunk_attachment_limit: 10
        video_file_size_limit: 100
        workflow_file_upload_limit: 10
      number_limits: 3
    opening_statement: ''
    retriever_resource:
      enabled: true
    sensitive_word_avoidance:
      enabled: false
    speech_to_text:
      enabled: false
    suggested_questions: []
    suggested_questions_after_answer:
      enabled: false
    text_to_speech:
      enabled: false
      language: ''
      voice: ''
  graph:
    edges:
    - data:
        isInLoop: false
        sourceType: start
        targetType: answer
      id: 1775792174783-source-answer-target
      source: '1775792174783'
      sourceHandle: source
      target: answer
      targetHandle: target
      type: custom
      zIndex: 0
    nodes:
    - data:
        selected: false
        title: User Input
        type: start
        variables: []
      height: 73
      id: '1775792174783'
      position:
        x: 80
        y: 282
      positionAbsolute:
        x: 80
        y: 282
      selected: false
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 242
    - data:
        answer: '{{#sys.files#}}'
        selected: false
        title: Answer
        type: answer
        variables: []
      height: 103
      id: answer
      position:
        x: 615
        y: 303
      positionAbsolute:
        x: 615
        y: 303
      selected: true
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 242
    viewport:
      x: 0
      y: 0
      zoom: 1
  rag_pipeline_variables: []

</details>

✔️ Expected Behavior

The maximized output panel should not cover the status bar above.

❌ Actual Behavior

The maximized output panel cover the status bar above.

extent analysis

TL;DR

The issue can be fixed by adjusting the CSS styles to ensure the maximized output panel does not overlap with the status bar.

Guidance

Review the CSS styles applied to the output panel and status bar to identify any overlapping or conflicting styles.
Consider adding a z-index property to the status bar to ensure it remains on top of the maximized output panel.
Check the layout and positioning of the output panel and status bar to ensure they are correctly aligned and do not overlap.
Test the fix by maximizing the output panel and verifying that the status bar remains visible and accessible.

Example

No code example is provided as the issue does not include specific code snippets that need to be modified.

Notes

The fix may require modifications to the CSS styles or layout of the application, and may involve adding or modifying HTML elements to ensure correct positioning and overlap.

Recommendation

Apply a workaround by adding a z-index property to the status bar to ensure it remains on top of the maximized output panel, as this is a non-invasive fix that can be easily tested and reverted if necessary.

Vote matrix · Quick signals

Works

Did the solution work? Tap to confirm.

Easy Fix

Was it a quick fix?

Time Saver

Did it save you time?

Blocking

Was it severely blocking?

Common Issue

Are others likely hitting this too?

Flaky / Intermittent

Is it intermittent?

Verified / Reproducible

Can you reproduce it reliably?

#api #ssr #index setup #retrieval issue #search optimization

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Data

Security

Network

Code

UI/UX

Text

System

Multimedia

Protocol

API

Engineering

dify - ✅(Solved) Fix Incorrect UI layout for maximized node output panel in execution logs [1 pull requests, 1 participants]

Recommended Tools

GitHub issue graph ai analysis

Fix Action

Fixed

PR fix notes

PR #34909: fix(workflow): correct maximized editor panel layout in execution logs

Description (problem / solution / changelog)

Summary

What changed

Before / After

Testing

Changed files

Code Example

Self Checks

Dify version

Cloud or Self Hosted

Steps to reproduce

✔️ Expected Behavior

❌ Actual Behavior

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

TRENDING

dify - ✅(Solved) Fix Incorrect UI layout for maximized node output panel in execution logs [1 pull requests, 1 participants]

Recommended Tools

GitHub issue graph ai analysis

Fix Action

Fixed

PR fix notes

PR #34909: fix(workflow): correct maximized editor panel layout in execution logs

Description (problem / solution / changelog)

Summary

What changed

Before / After

Testing

Changed files

Code Example

Self Checks

Dify version

Cloud or Self Hosted

Steps to reproduce

✔️ Expected Behavior

❌ Actual Behavior

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

RELATED_DISCOVERY

TRENDING