[mesrop2008]

Summary

Fixes #43620

On the knowledge base document detail page, the metadata panel on the right could not be scrolled. When a document has many metadata fields or long values (e.g. a video document), the content grows past the bottom of the screen. The lower fields, plus the whole Document Information / Technical Parameters sections, could not be reached.

Root cause

On desktop, <Metadata> was rendered straight into the detail page's flex row. It had no height limit and no overflow handling (overflow: visible). The content overflowed its box (e.g. ~1170px of content in ~840px of space), and an ancestor in the dataset layout has overflow: hidden, which clipped it, so there was no way to scroll to it.

Fix

• On desktop, wrap the metadata panel in the dify-ui ScrollArea (ScrollArea / ScrollAreaViewport / ScrollAreaContent + vertical ScrollAreaScrollbar). The panel now fills the available height and scrolls on its own.
• Reserve a 12px gutter (pr-3, the width of the scrollbar track) inside ScrollAreaContent. The overlay scrollbar sits in that gutter instead of over the content. In edit mode it no longer covers or captures clicks on the right edge of Save and the remove buttons. The metadata rows keep their w-97 width. The gutter replaces the old mr-2 outer margin.
• Let the time-field date picker shrink (min-w-0 in InputCombined). It couldn't shrink below its formatted value, so in edit mode it pushed its row's remove button 26px past the metadata column. That made the panel overflow sideways and slid the controls under the scrollbar.
• I used ScrollArea rather than plain overflow-y-auto because a native scrollbar takes ~15px from inside the fixed-width (w-97) panel, which makes its fixed-width rows overflow and adds a horizontal scrollbar.
• shrink-0 keeps the panel at its width on narrow screens, and overscroll-contain stops the scroll from passing on to the page.
• Mobile is unchanged: the metadata already opens in a drawer whose DrawerContent scrolls, so I didn't nest a second scroll area there.

Tests

• Removed the earlier DOM-ancestry assertions. They mocked the metadata content and drawer, so they could not catch layout problems.

• Added metadata-panel.browser.spec.tsx (Browser Mode). It renders the real DocumentDetail and metadata panel with real en-US copy at a 1280×640 desktop viewport, with enough fields to overflow and a time field last, and switches to edit mode. Then it:

  • clicks the rightmost pixel of the last row's remove button and checks the row is removed. That row starts below the fold, so this also proves the panel scrolls to its bottom fields;
  • clicks the rightmost pixel of Save and checks the save request is sent with the remaining fields and edit mode closes.

  If the scrollbar covered either control, or a row pushed the panel into horizontal scrolling, these clicks would land on the scrollbar and the test would fail.

• Added a unit test that on mobile the metadata starts closed and opens in the drawer.

• Verified manually in the real desktop edit layout, including a time field: no row overflows, the panel doesn't scroll horizontally, Save and every remove control are fully visible and clickable next to the scrollbar, and the bottom fields and Technical Parameters are reachable.

Screenshots

Before	After

Checklist

• This change requires a documentation update, included: Dify Document
• I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
• I've verified the change and added or updated tests where meaningful regression risk justifies coverage.
• I've updated the documentation accordingly.
• I ran make lint && make type-check (backend) and vp staged (frontend) to appease the lint gods

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.37%. Comparing base (bc751e7) to head (0fffec0).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #43621      +/-   ##
==========================================
- Coverage   88.92%   85.37%   -3.55%     
==========================================
  Files        5572     5571       -1     
  Lines      333940   333671     -269     
  Branches    66834    66807      -27     
==========================================
- Hits       296945   284862   -12083     
- Misses      31832    43627   +11795     
- Partials     5163     5182      +19     

Flag	Coverage Δ
dify-ui	91.67% <ø> (ø)
web	79.79% <100.00%> (-8.75%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[WTW0313]

Thanks for the contribution, @mesrop2008! Could you please resolve the failing CI checks first? Web Tests and codecov/project are currently failing. Please let us know once CI is green so we can continue the review.

[mesrop2008]

Thanks for the review, @WTW0313!

The failures you linked were from an earlier head commit (4c6aa6c073). The Web Tests (1/4) shard failed there, and because that shard's coverage was never uploaded, codecov/project dropped by 2.77% as a knock-on effect. This PR only touches datasets/documents/detail/index.tsx and its spec, and those tests pass, so the failure came from main at that point. I've merged the latest main since then.

On the current head (8f5eb21) CI is fully green:

• Web Tests (1/4–4/4), Web Browser Tests, Full-Stack E2E and Style Check all pass
• codecov/patch: 100% of the diff is covered
• codecov/project: 89.01% (-0.01% vs base)

Ready for another look whenever you have time. Thanks!

[WTW0313]

Please address the scrollbar overlap and verification issues detailed in the inline comment.