fix: stretch artifact previews in detail panes

[yohamta0]

Summary

• propagate full-height layout from DAG and DAG-run detail containers into artifact previews
• keep non-status DAG detail tabs on their existing scroll containers
• add regression coverage for full-height DAG and DAG-run detail paths

Testing

• pnpm -C ui exec vitest run src/features/dags/components/dag-details/tests/DAGDetailsPanel.test.tsx src/features/dags/components/dag-details/tests/DAGDetailsContent.test.tsx src/pages/dags/dag/tests/index.test.tsx src/features/dag-runs/components/dag-run-details/tests/DAGRunDetailsPanel.test.tsx src/pages/dag-runs/dag-run/tests/index.test.tsx
• pnpm -C ui exec tsc --noEmit
• Playwright browser layout check against /dags/release-notes with mocked API data

---

Summary by cubic

Fixes artifact previews not stretching to full height in DAG and DAG-run detail views. Status tabs now fill the pane so previews and logs are easier to read.

• Bug Fixes
  • Propagated full-height layout via fillHeight into DAGDetailsContent and DAGRunDetailsContent; Status tab uses overflow-hidden, other tabs remain scrollable.
  • Updated page/panel wrappers to use h-full and min-h-0 for proper flex behavior and to avoid nested-scroll clipping.
  • Added regression tests for DAG and DAG-run pages and panels to verify the full-height layout.

^{Written for commit c8c2450. Summary will update on new commits.}

Summary by CodeRabbit

• Improvements

  • Enhanced layout and scrolling behavior for DAG and DAG run detail panels, with optimized vertical space utilization based on active views.

• Tests

  • Added comprehensive test coverage to verify detail panel layout behavior and full-height rendering across multiple pages and views.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0273a273-4534-4e03-8891-4db77ed0a7ac

📥 Commits

Reviewing files that changed from the base of the PR and between fc1db3f and c8c2450.

📒 Files selected for processing (11)

• ui/src/features/dag-runs/components/dag-run-details/DAGRunDetailsPanel.tsx
• ui/src/features/dag-runs/components/dag-run-details/__tests__/DAGRunDetailsPanel.test.tsx
• ui/src/features/dags/components/dag-details/DAGDetailsContent.tsx
• ui/src/features/dags/components/dag-details/DAGDetailsPanel.tsx
• ui/src/features/dags/components/dag-details/DAGDetailsSidePanel.tsx
• ui/src/features/dags/components/dag-details/__tests__/DAGDetailsContent.test.tsx
• ui/src/features/dags/components/dag-details/__tests__/DAGDetailsPanel.test.tsx
• ui/src/pages/dag-runs/dag-run/__tests__/index.test.tsx
• ui/src/pages/dag-runs/dag-run/index.tsx
• ui/src/pages/dags/dag/__tests__/index.test.tsx
• ui/src/pages/dags/dag/index.tsx

---

📝 Walkthrough

Walkthrough

A fillHeight boolean prop is added to DAGDetailsContent and DAGRunDetailsContent to control full-height vertical sizing. Panel and page containers are updated to compute tab-aware overflow classes (overflow-hidden on the status tab, overflow-y-auto otherwise) and adopt flex/h-full/min-h-0 wrappers. Tests verify prop propagation via data attributes and container CSS classes.

Changes

fillHeight prop and full-height layout

Layer / File(s)	Summary
DAGDetailsContent fillHeight prop and DAGStatus forwarding ui/src/features/dags/components/dag-details/DAGDetailsContent.tsx	Adds cn import, fillHeight?: boolean to the props interface with a false default, conditionally applies h-full min-h-0 to the main content wrapper when fillHeight is true, and forwards fillHeight to the DAGStatus child.
Panel and SidePanel tab-based overflow and fillHeight wiring ui/src/features/dags/components/dag-details/DAGDetailsPanel.tsx, ui/src/features/dags/components/dag-details/DAGDetailsSidePanel.tsx, ui/src/features/dag-runs/components/dag-run-details/DAGRunDetailsPanel.tsx	Each panel computes a contentClassName that applies overflow-hidden on the status tab and overflow-y-auto overflow-x-hidden on other tabs, replaces hardcoded overflow classes with the computed value, and passes fillHeight to the relevant content component.
Page-level full-height flex wrappers and fillHeight ui/src/pages/dags/dag/index.tsx, ui/src/pages/dag-runs/dag-run/index.tsx	DAGDetails page outer container gains h-full min-h-0 and wraps DAGDetailsContent in a new min-h-0 flex-1 div with fillHeight. DAGRunDetailsPage outer wrapper switches to flex h-full min-h-0 flex-col and adds fillHeight to DAGRunDetailsContent.
Tests verifying fillHeight propagation and layout classes ui/src/features/dags/components/dag-details/__tests__/DAGDetailsContent.test.tsx, ui/src/features/dags/components/dag-details/__tests__/DAGDetailsPanel.test.tsx, ui/src/features/dag-runs/components/dag-run-details/__tests__/DAGRunDetailsPanel.test.tsx, ui/src/pages/dags/dag/__tests__/index.test.tsx, ui/src/pages/dag-runs/dag-run/__tests__/index.test.tsx	New and updated tests mock content components to expose a data-fill-height attribute and assert it is "true", and verify parent containers carry the expected h-full, min-h-0, and flex-1 CSS classes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• dagucloud/dagu#1980: Extends DAGDetailsPanel/DAGDetailsContent prop interfaces and wires additional props into internal tab/layout rendering, the same structural pattern used here for fillHeight.
• dagucloud/dagu#2255: Modifies DAGDetailsContent layout wrappers and flex/overflow classes around the header and tabs to control content sizing, directly overlapping with the wrapper changes in this PR.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: stretch artifact previews in detail panes' accurately summarizes the main change—fixing artifact preview rendering by extending them to full height in detail panes.
Description check	✅ Passed	The description includes all key sections: Summary lists the main changes, Changes section details modifications, Testing documents validation steps, and includes a Checklist confirmation. The description is complete and well-structured.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/fix-artifacts-preview-height

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}