fix(dicom-tag-browser): Prevent long series names from overlapping - OHIF-2406 by GhadeerAlbattarni · Pull Request #5809 · OHIF/Viewers

GhadeerAlbattarni · 2026-02-10T23:46:58Z

Context

Fixes #5702

This PR fixes long series names overlapping in DICOM Tag Browser series selector.

Changes && Results

Added SelectValue component with label content to enable proper text display

Testing

Open a study that has long series name (e.g. StudyInstanceUIDs=1.3.6.1.4.1.14519.5.2.1.5099.8010.217836670708542506360829799868 )
Open the Dicom tag bowser for the series that has long name
Verify series names are truncated with ellipsis (...) in the select field

Checklist

PR

My Pull Request title is descriptive, accurate and follows the
semantic-release format and guidelines.

Code

My code has been well-documented (function documentation, inline comments,
etc.)

Public Documentation Updates

The documentation page has been updated as necessary for any public API
additions or removals.

Tested Environment

OS: macOS 10.15.4
Node version: v22.12.0
Browser: Chrome 83.0.4103.116

Greptile Overview

Greptile Summary

Fixed long series names overlapping in the DICOM Tag Browser select field by wrapping the display content in a SelectValue component. The SelectTrigger component has [&>span]:truncate styling which applies truncation to child spans, and SelectValue (which is SelectPrimitive.Value from @radix-ui/react-select) renders as a span element, enabling proper ellipsis truncation for text overflow.

Confidence Score: 5/5

This PR is safe to merge with minimal risk
The change is minimal (only 8 lines modified), follows the correct pattern documented in the codebase's own showcase examples, and properly uses the UI library's components. The fix leverages existing CSS truncation styling already present in SelectTrigger, making it a clean and idiomatic solution
No files require special attention

Important Files Changed

Filename	Overview
extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx	Added `SelectValue` wrapper to enable proper text truncation for long series names in the select field, fixing the overlap issue

_{(5/5) You can turn off certain types of comments like style here!}

… select Used SelectValue to properly display and truncate long series names in the DICOM Tag Browser.

netlify · 2026-02-10T23:47:04Z

✅ Deploy Preview for ohif-dev canceled.

Name	Link
🔨 Latest commit	`179bd5a`
🔍 Latest deploy log	https://app.netlify.com/projects/ohif-dev/deploys/6994e171c5e61200086560e0

greptile-apps

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

…wser-long-series-name

jbocce

The fix looks good. The tests needs a little work.

… pattern - Add DicomTagBrowserPageObject for reusable test interactions - Create assertBoundingBoxIsContainedWithin utility for geometry checks - Moved the test into DicomTagBrowser.spec.ts

…wser-long-series-name

jbocce

I love the changes you made. We are almost there.

jbocce · 2026-02-13T18:50:50Z

Consider updating your branch with master.

…wser-long-series-name

…selection

jbocce

Just a small change left!

GhadeerAlbattarni · 2026-02-17T21:47:33Z

Thanks for your comments Joe :)

…OHIF-2406 (#5809)

fix(dicom-tag-browser): Prevent long series names from overlapping in…

fce8119

… select Used SelectValue to properly display and truncate long series names in the DICOM Tag Browser.

greptile-apps Bot reviewed Feb 10, 2026

View reviewed changes

GhadeerAlbattarni added 2 commits February 11, 2026 19:18

Merge remote-tracking branch 'upstream/master' into fix/dicom-tag-bro…

e8ca972

…wser-long-series-name

test(dicom-tag-browser): Add test for long series name

adaab6a

jbocce reviewed Feb 12, 2026

View reviewed changes