Skip to content

Fix Traces view in Prompts tab not being scrollable#21282

Merged
daniellok-db merged 1 commit intomlflow:masterfrom
TomeHirata:fix/prompts-traces-view-scrollable
Mar 4, 2026
Merged

Fix Traces view in Prompts tab not being scrollable#21282
daniellok-db merged 1 commit intomlflow:masterfrom
TomeHirata:fix/prompts-traces-view-scrollable

Conversation

@TomeHirata
Copy link
Collaborator

@TomeHirata TomeHirata commented Mar 3, 2026

Related Issues/PRs

N/A

What changes are proposed in this pull request?

Fixes the Traces view in the Prompts details page not being scrollable. The right pane flex container was using the default minWidth: auto, which prevented it from shrinking below the traces table's natural width (~1440px). This caused the content to overflow and be clipped by the parent's overflow: hidden instead of being properly scrollable.

Changes:

  • Add minWidth: 0 to the right pane container in PromptsDetailsPage.tsx to allow the flex item to shrink
  • Add flex: 1 and minWidth: 0 to PromptFilteredTracesView.tsx to properly fill and constrain the available space
Screen.Recording.2026-03-03.at.13.55.21.mov

How is this PR tested?

  • Manual tests

Verified in the browser that the traces table is now properly constrained within the right pane and supports horizontal scrolling.

Does this PR require documentation update?

  • No. You can skip the rest of this section.

Does this PR require updating the MLflow Skills repository?

  • No. You can skip the rest of this section.

Release Notes

Is this a user-facing change?

  • Yes. Give a description of this change to be included in the release notes for MLflow users.

Fix Traces view in Prompts tab not being scrollable due to incorrect flex layout constraints.

What component(s), interfaces, languages, and integrations does this PR affect?

Components

  • area/uiux: Front-end, user experience, plotting, JavaScript, JavaScript dev server
  • area/prompts: MLflow prompt engineering features, prompt templates, and prompt management

How should the PR be classified in the release notes? Choose one:

  • rn/bug-fix - A user-facing bug fix worth mentioning in the release notes

Should this PR be included in the next patch release?

  • Yes (this PR will be cherry-picked and included in the next patch release)
  • No (this PR will be included in the next minor release)

Add `minWidth: 0` to the right pane flex container in PromptsDetailsPage
and `flex: 1` / `minWidth: 0` to PromptFilteredTracesView. Without these,
the flex items use the default `minWidth: auto` which prevents them from
shrinking below the traces table's natural width (~1440px), causing content
to overflow and be clipped instead of scrollable.

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Tomu Hirata <tomu.hirata@gmail.com>
Copilot AI review requested due to automatic review settings March 3, 2026 04:54
@github-actions github-actions bot added v3.10.1 area/prompts MLflow Prompt Registry and Optimization area/uiux Front-end, user experience, plotting, JavaScript, JavaScript dev server rn/bug-fix Mention under Bug Fixes in Changelogs. size/XS labels Mar 3, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Mar 3, 2026

🛠 DevTools 🛠

Install mlflow from this PR

# mlflow
pip install git+https://github.com/mlflow/mlflow.git@refs/pull/21282/merge
# mlflow-skinny
pip install git+https://github.com/mlflow/mlflow.git@refs/pull/21282/merge#subdirectory=libs/skinny

For Databricks, use the following command:

%sh curl -LsSf https://raw.githubusercontent.com/mlflow/mlflow/HEAD/dev/install-skinny.sh | sh -s pull/21282/merge

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes a flexbox sizing constraint in the Prompts details “Traces” view so the traces table can properly shrink within the right pane and become horizontally scrollable (instead of being clipped by an ancestor with overflow: hidden).

Changes:

  • Add minWidth: 0 to the Prompts details right-pane flex container so it can shrink below its contents’ intrinsic width.
  • Make the traces view wrapper (PromptFilteredTracesViewImpl) a shrinking flex item via flex: 1 and minWidth: 0.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
mlflow/server/js/src/experiment-tracking/pages/prompts/components/PromptFilteredTracesView.tsx Ensures the traces view can shrink within a flex row by applying flex: 1 and minWidth: 0.
mlflow/server/js/src/experiment-tracking/pages/prompts/PromptsDetailsPage.tsx Allows the right pane to shrink in the split layout by setting minWidth: 0 on the flex child container.

@github-actions
Copy link
Contributor

github-actions bot commented Mar 3, 2026

Documentation preview for 9ee9186 is available at:

More info
  • Ignore this comment if this PR does not change the documentation.
  • The preview is updated when a new commit is pushed to this PR.
  • This comment was created by this workflow run.
  • The documentation was built by this workflow run.

@daniellok-db daniellok-db added this pull request to the merge queue Mar 4, 2026
Merged via the queue into mlflow:master with commit aa680f5 Mar 4, 2026
41 of 44 checks passed
daniellok-db pushed a commit to daniellok-db/mlflow that referenced this pull request Mar 5, 2026
Signed-off-by: Tomu Hirata <tomu.hirata@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
daniellok-db pushed a commit to daniellok-db/mlflow that referenced this pull request Mar 5, 2026
Signed-off-by: Tomu Hirata <tomu.hirata@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
daniellok-db pushed a commit that referenced this pull request Mar 5, 2026
Signed-off-by: Tomu Hirata <tomu.hirata@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/prompts MLflow Prompt Registry and Optimization area/uiux Front-end, user experience, plotting, JavaScript, JavaScript dev server mlflow-fix-it-q1fy27 rn/bug-fix Mention under Bug Fixes in Changelogs. size/XS v3.10.1

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants