Skip to content

fix: improve mobile dag run detail layout #2255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yohamta0 merged 2 commits into from
Jun 3, 2026
Merged

fix: improve mobile dag run detail layout #2255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a98cd5
fix: improve mobile dag run detail layout
yohamta0 Jun 3, 2026
0be7a43
fix: add dag details content license header
yohamta0 Jun 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 67 additions & 60 deletions ui/src/features/dags/components/DAGStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,75 +429,82 @@ function DAGStatus({
)}
>
{/* Status Detail Tabs */}
<Tabs className={cn('whitespace-nowrap', fillHeight && 'shrink-0')}>
<Tab
isActive={activeTab === 'status'}
onClick={() => setActiveTab('status')}
className="flex items-center gap-2 cursor-pointer"
>
<ActivitySquare className="h-4 w-4" />
Status
</Tab>
{hasWaitingSteps && (
<Tab
isActive={activeTab === 'approval'}
onClick={() => setActiveTab('approval')}
className="flex items-center gap-2 cursor-pointer"
>
<ShieldCheck className="h-4 w-4" />
Approval
<span className="bg-warning/15 text-warning text-xs font-medium px-1.5 py-0.5 rounded-full">
{waitingStepCount}
</span>
</Tab>
<div
className={cn(
'w-full min-w-0 overflow-x-auto',
fillHeight && 'shrink-0'
)}
{showTimeline && (
>
<Tabs className="w-max min-w-full whitespace-nowrap">
<Tab
isActive={activeTab === 'timeline'}
onClick={() => setActiveTab('timeline')}
className="flex items-center gap-2 cursor-pointer"
isActive={activeTab === 'status'}
onClick={() => setActiveTab('status')}
className="flex cursor-pointer items-center gap-2 px-3 sm:px-4"
>
<GanttChart className="h-4 w-4" />
Timeline
<ActivitySquare className="h-4 w-4" />
Status
</Tab>
)}
<Tab
isActive={activeTab === 'outputs'}
onClick={() => setActiveTab('outputs')}
className="flex items-center gap-2 cursor-pointer"
>
<Package className="h-4 w-4" />
Outputs
</Tab>
{hasArtifacts && (
{hasWaitingSteps && (
<Tab
isActive={activeTab === 'approval'}
onClick={() => setActiveTab('approval')}
className="flex cursor-pointer items-center gap-2 px-3 sm:px-4"
>
<ShieldCheck className="h-4 w-4" />
Approval
<span className="rounded-full bg-warning/15 px-1.5 py-0.5 text-xs font-medium text-warning">
{waitingStepCount}
</span>
</Tab>
)}
{showTimeline && (
<Tab
isActive={activeTab === 'timeline'}
onClick={() => setActiveTab('timeline')}
className="flex cursor-pointer items-center gap-2 px-3 sm:px-4"
>
<GanttChart className="h-4 w-4" />
Timeline
</Tab>
)}
<Tab
isActive={activeTab === 'artifacts'}
onClick={() => setActiveTab('artifacts')}
className="flex items-center gap-2 cursor-pointer"
isActive={activeTab === 'outputs'}
onClick={() => setActiveTab('outputs')}
className="flex cursor-pointer items-center gap-2 px-3 sm:px-4"
>
<Archive className="h-4 w-4" />
Artifacts
<Package className="h-4 w-4" />
Outputs
</Tab>
)}
{hasChatSteps && (
{hasArtifacts && (
<Tab
isActive={activeTab === 'artifacts'}
onClick={() => setActiveTab('artifacts')}
className="flex cursor-pointer items-center gap-2 px-3 sm:px-4"
>
<Archive className="h-4 w-4" />
Artifacts
</Tab>
)}
{hasChatSteps && (
<Tab
isActive={activeTab === 'chat'}
onClick={() => setActiveTab('chat')}
className="flex cursor-pointer items-center gap-2 px-3 sm:px-4"
>
<MessageSquare className="h-4 w-4" />
Chat
</Tab>
)}
<Tab
isActive={activeTab === 'chat'}
onClick={() => setActiveTab('chat')}
className="flex items-center gap-2 cursor-pointer"
isActive={activeTab === 'spec'}
onClick={() => setActiveTab('spec')}
className="flex cursor-pointer items-center gap-2 px-3 sm:px-4"
>
<MessageSquare className="h-4 w-4" />
Chat
<FileCode className="h-4 w-4" />
Spec
</Tab>
)}
<Tab
isActive={activeTab === 'spec'}
onClick={() => setActiveTab('spec')}
className="flex items-center gap-2 cursor-pointer"
>
<FileCode className="h-4 w-4" />
Spec
</Tab>
</Tabs>
</Tabs>
</div>

{/* Status Tab Content */}
{activeTab === 'status' && (
Expand Down Expand Up @@ -559,7 +566,7 @@ function DAGStatus({
<DAGContext.Consumer>
{(props) => (
<>
<div className="grid grid-cols-1 gap-6">
<div className="grid min-w-0 grid-cols-1 gap-6">
{/* Status Overview */}
<div className="bg-surface border border-border rounded-lg p-4">
<DAGStatusOverview
Expand Down
11 changes: 7 additions & 4 deletions ui/src/features/dags/components/dag-details/DAGDetailsContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// Copyright (C) 2026 Yota Hamada
// SPDX-License-Identifier: GPL-3.0-or-later

import { Tabs } from '@/components/ui/tabs';
import {
AlertTriangle,
Expand Down Expand Up @@ -133,7 +136,7 @@ const DAGDetailsContent: React.FC<DAGDetailsContentProps> = ({
onRunStarted,
}}
>
<div className="w-full flex flex-col">
<div className="flex w-full min-w-0 flex-col">
{/* Only render the header if skipHeader is not true */}
{!skipHeader && (
<DAGHeader
Expand All @@ -146,7 +149,7 @@ const DAGDetailsContent: React.FC<DAGDetailsContentProps> = ({
navigateToStatusTab={navigateToStatusTab}
/>
)}
<div className="flex flex-col lg:flex-row justify-between items-center gap-3 lg:gap-0 mb-4 mt-3">
<div className="mb-4 mt-3 flex min-w-0 flex-col items-center justify-between gap-3 lg:flex-row lg:gap-0">
{/* Desktop Tabs (lg and up) */}
<div className="hidden lg:block flex-1 min-w-0">
<Tabs className="whitespace-nowrap">
Expand Down Expand Up @@ -290,8 +293,8 @@ const DAGDetailsContent: React.FC<DAGDetailsContentProps> = ({
</div>

{/* Mobile/Tablet Tabs (sm to lg) */}
<div className="lg:hidden w-full overflow-x-auto">
<div className="flex space-x-1 w-full">
<div className="w-full min-w-0 overflow-x-auto lg:hidden">
<div className="flex min-w-max space-x-1">
{isModal ? (
<ModalLinkTab
label=""
Expand Down
28 changes: 16 additions & 12 deletions ui/src/features/dags/components/dag-details/DAGHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,9 +161,9 @@ const DAGHeader: React.FC<DAGHeaderProps> = ({
dagRunToDisplay.dagRunId === dagRunToDisplay.rootDAGRunId;

return (
<div className="bg-card rounded-2xl p-6 border border-border shadow-sm">
<div className="min-w-0 rounded-xl border border-border bg-card p-4 shadow-sm sm:rounded-2xl sm:p-6">
{/* Header with title and actions */}
<div className="flex items-start justify-between gap-6 mb-4">
<div className="mb-4 flex min-w-0 flex-col items-stretch gap-4 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
<div className="flex-1 min-w-0">
{/* Breadcrumb navigation */}
{dagRunToDisplay && (
Expand Down Expand Up @@ -201,8 +201,8 @@ const DAGHeader: React.FC<DAGHeaderProps> = ({
</nav>
)}

<div className="flex items-center gap-2 min-w-0">
<h1 className="text-2xl font-bold text-foreground truncate">
<div className="flex min-w-0 items-center gap-2">
<h1 className="min-w-0 break-words text-2xl font-bold text-foreground sm:truncate">
{dagRunToDisplay?.name || dag.name}
</h1>
{filePath && (
Expand All @@ -222,7 +222,7 @@ const DAGHeader: React.FC<DAGHeaderProps> = ({
</div>

{showActions && (
<div className="flex flex-shrink-0 flex-wrap items-center justify-end gap-2">
<div className="flex min-w-0 flex-wrap items-center gap-2 sm:flex-shrink-0 sm:justify-end">
<DAGActions
status={dagRunToDisplay}
dag={dag}
Expand All @@ -239,7 +239,7 @@ const DAGHeader: React.FC<DAGHeaderProps> = ({
{dagRunToDisplay &&
dagRunToDisplay.status !== undefined &&
dagRunToDisplay.status !== null && (
<div className="flex flex-wrap items-center gap-2 text-sm">
<div className="flex min-w-0 flex-wrap items-center gap-2 text-sm">
<StatusChip status={dagRunToDisplay.status} size="md">
{dagRunToDisplay.statusLabel || ''}
</StatusChip>
Expand All @@ -261,11 +261,13 @@ const DAGHeader: React.FC<DAGHeaderProps> = ({
<span>Refresh</span>
</button>

<span className="flex items-center gap-1 text-xs text-muted-foreground">
<span className="flex min-w-0 items-center gap-1 text-xs text-muted-foreground">
<Calendar className="h-3 w-3" />
{dagRunToDisplay?.startedAt
? dayjs(dagRunToDisplay.startedAt).format('MMM D, HH:mm:ss')
: '--'}
<span className="truncate">
{dagRunToDisplay?.startedAt
? dayjs(dagRunToDisplay.startedAt).format('MMM D, HH:mm:ss')
: '--'}
</span>
</span>

<span className="flex items-center gap-1 text-xs text-muted-foreground">
Expand All @@ -279,11 +281,13 @@ const DAGHeader: React.FC<DAGHeaderProps> = ({
{dagRunToDisplay.workerId && (
<span className="flex items-center gap-1 text-xs text-muted-foreground">
<Server className="h-3 w-3" />
<span className="font-mono">{dagRunToDisplay.workerId}</span>
<span className="min-w-0 truncate font-mono">
{dagRunToDisplay.workerId}
</span>
</span>
)}

<code className="text-xs font-mono text-muted-foreground">
<code className="max-w-full break-all text-xs font-mono text-muted-foreground sm:max-w-xs sm:truncate">
{dagRunToDisplay.rootDAGRunId}
</code>
</div>
Expand Down
17 changes: 10 additions & 7 deletions ui/src/features/dags/components/dag-details/DAGStatusOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,19 +238,22 @@ function DAGStatusOverview({
}

return (
<div className="space-y-2">
<div className="min-w-0 space-y-2">
{/* Parameters - Only show when present */}
{status.params && (
<div className="flex items-center gap-1.5 text-xs font-mono">
<div className="flex min-w-0 items-center gap-1.5 text-xs font-mono">
<Terminal className="h-3 w-3 text-muted-foreground flex-shrink-0" />
<span className="text-foreground truncate" title={status.params}>
<span
className="min-w-0 truncate text-foreground"
title={status.params}
>
{status.params}
</span>
</div>
)}

{/* Timing & Metadata - Compact grid */}
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs">
<div className="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1 text-xs">
{status.scheduleTime && (
<span>
<span className="text-muted-foreground">Scheduled </span>
Expand Down Expand Up @@ -291,7 +294,7 @@ function DAGStatusOverview({
</div>

{/* Metadata row */}
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
<div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs">
{status.triggerType && (
<span>
<span className="text-muted-foreground">Trigger </span>
Expand Down Expand Up @@ -319,10 +322,10 @@ function DAGStatusOverview({
{status.dagRunId && (
<button
onClick={copyRunId}
className="inline-flex items-center gap-1 font-mono text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
className="inline-flex min-w-0 max-w-full cursor-pointer items-center gap-1 font-mono text-muted-foreground transition-colors hover:text-foreground"
title={`Click to copy: ${status.dagRunId}`}
>
<span>{truncateId(status.dagRunId)}</span>
<span className="truncate">{truncateId(status.dagRunId)}</span>
{copied ? (
<Check className="h-3 w-3 text-success" />
) : (
Expand Down
2 changes: 1 addition & 1 deletion ui/src/pages/dags/dag/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@ function DAGDetails() {
setData: setRootDAGRunData,
}}
>
<div className="max-w-7xl flex flex-col">
<div className="flex w-full min-w-0 max-w-7xl flex-col">
{dagData?.dag && dagMatchesWorkspace && (
<>
<DAGHeader
Expand Down