fix: improve mobile dag run detail layout

[yohamta0]

Summary

• prevent DAG run detail content from forcing document-level horizontal overflow on mobile
• constrain the run header, metadata, and status tabs with shrink-safe wrappers and local horizontal scrolling
• keep long run IDs, params, worker IDs, and tab labels from widening the page

Changes

• add shrink-safe page and detail wrappers with min-w-0
• make the DAG run header wrap/truncate long values on small screens
• move the status tab overflow into a local horizontal scroller
• add the standard GPL/SPDX header to DAGDetailsContent.tsx

Related Issues

• N/A

Checklist

• Code style follows existing patterns
• Self-review completed
• Tests added or updated where needed
• Documentation updated or not required
• Local validation completed

Testing

• pnpm typecheck
• pnpm vitest run src/features/dags/components/__tests__/DAGStatus.test.tsx src/features/dags/components/dag-details/__tests__/DAGStatusOverview.test.tsx
• pnpm build

Summary by CodeRabbit

Release Notes

• UI Improvements
  • Enhanced layout responsiveness across DAG detail pages
  • Improved text overflow handling and truncation for long content
  • Better horizontal scrolling behavior on mobile and tablet devices
  • Refined spacing and alignment in tabs and status displays

[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: ca511b8f-5b00-47e4-8f81-1753f4d457a0

📥 Commits

Reviewing files that changed from the base of the PR and between 83640d8 and 0be7a43.

📒 Files selected for processing (5)

• ui/src/features/dags/components/DAGStatus.tsx
• ui/src/features/dags/components/dag-details/DAGDetailsContent.tsx
• ui/src/features/dags/components/dag-details/DAGHeader.tsx
• ui/src/features/dags/components/dag-details/DAGStatusOverview.tsx
• ui/src/pages/dags/dag/index.tsx

---

📝 Walkthrough

Walkthrough

This pull request refactors the layout and styling of the DAG detail view components using Tailwind CSS. The changes add min-w-0 constraints throughout the hierarchy, improve text truncation behavior across responsive breakpoints, restructure flex containers for better overflow handling, and wrap display values with overflow-safe classes. All logic and behavior remain unchanged.

Changes

DAG detail view layout and overflow improvements

Layer / File(s)	Summary
Page-level layout foundation ui/src/pages/dags/dag/index.tsx	Main DAG page container updated with flex w-full min-w-0 to establish flex sizing and min-width constraints at the page root.
Detail page structure and responsive tabs ui/src/features/dags/components/dag-details/DAGDetailsContent.tsx	Outer wrapper, header/tabs container, and mobile tabs area restructured: flex layout refined, min-w-0 added for sizing, and mobile tabs now use overflow-x-auto with a min-w-max inner flex row to support horizontal scrolling.
Header styling and content wrapping ui/src/features/dags/components/dag-details/DAGHeader.tsx	Header container receives updated card-style Tailwind styling; title, actions, and status/metadata rows adjusted for responsive truncation; started-at, worker-id, and root run ID wrapped with min-w-0/truncate/max-w-full for overflow safety.
Status tabs and summary content overflow handling ui/src/features/dags/components/DAGStatus.tsx, ui/src/features/dags/components/dag-details/DAGStatusOverview.tsx	Status tabs header wrapped with standardized Tab classes; DAG context, overview container, Parameters and metadata rows gain min-w-0; DAG run ID copy button updated to min-w-0 max-w-full with truncated inner text.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• dagucloud/dagu#2012: Both PRs modify DAGHeader—the referenced PR changes header actions/design-button logic while this PR standardizes header container and overflow-safe styling.

🚥 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: improve mobile dag run detail layout' directly and accurately summarizes the main change—improving mobile layout for DAG run details—which aligns with all file modifications.
Description check	✅ Passed	The PR description includes a clear summary, detailed changes list, related issues, checklist with all items completed, and testing steps performed—fully aligned with the repository template.
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 fix/mobile-dag-run-detail

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

---

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.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

ui/src/features/dags/components/dag-details/DAGDetailsContent.tsx (1)

1-1: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Add GPL v3 license header.

This TypeScript source file is missing the required GPL v3 license header. As per coding guidelines, all **/*.{ts,tsx} files must include the GPL v3 license header.

📄 Proposed fix to add the GPL v3 header

+// Copyright (C) 2026 Yota Hamada
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 import { Tabs } from '`@/components/ui/tabs`';

As per coding guidelines: "Add GPL v3 license headers to source files (managed via make addlicense)"

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ui/src/features/dags/components/dag-details/DAGDetailsContent.tsx` at line 1,
This file is missing the required GPL v3 license header; add the project's
standard GPL v3 header comment block at the very top of the
DAGDetailsContent.tsx file (above any imports such as the existing import { Tabs
} ...) following the project's format (or run the repo tool `make addlicense` if
available) so the DAGDetailsContent component and its module include the correct
SPDX/license text.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@ui/src/features/dags/components/dag-details/DAGDetailsContent.tsx`:
- Line 1: This file is missing the required GPL v3 license header; add the
project's standard GPL v3 header comment block at the very top of the
DAGDetailsContent.tsx file (above any imports such as the existing import { Tabs
} ...) following the project's format (or run the repo tool `make addlicense` if
available) so the DAGDetailsContent component and its module include the correct
SPDX/license text.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 291f2a8d-9bcf-45ce-98da-bf8700c99ab8

📥 Commits

Reviewing files that changed from the base of the PR and between 83640d8 and 1a98cd5.

📒 Files selected for processing (5)

• ui/src/features/dags/components/DAGStatus.tsx
• ui/src/features/dags/components/dag-details/DAGDetailsContent.tsx
• ui/src/features/dags/components/dag-details/DAGHeader.tsx
• ui/src/features/dags/components/dag-details/DAGStatusOverview.tsx
• ui/src/pages/dags/dag/index.tsx

[cubic-dev-ai]

No issues found across 5 files

_{Re-trigger cubic}

[yohamta0]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.