VideoPress: truncate long titles and filenames in the dashboard library#49561
Open
vianasw wants to merge 3 commits into
Open
VideoPress: truncate long titles and filenames in the dashboard library#49561vianasw wants to merge 3 commits into
vianasw wants to merge 3 commits into
Conversation
Long titles/filenames overflowed ungracefully (CFT item VP11): grid cards hard-clipped titles mid-character with no ellipsis, and in the table layout long titles overlapped the filename column's text and pushed the duration/uploaded/privacy columns out of the viewport. - Truncate titles with an ellipsis in both layouts. DataViews' own .dataviews-title-field truncation only targets its internal anchor/button markup, so our custom renderers bring their own: block display, fit-content width, max-width bound, min-width: 0 so the title can shrink when it shares a flex row with a status pill. - Cap the title (36ch) and filename (30ch) columns in the table so pathological text can't bloat them past the viewport; narrower screens fall back to the table's horizontal scroll. - Expose the full text via title attributes on the truncating elements (hover affordance). - Clamp the video details breadcrumb's current item so a long title can't crowd the header's Save button; targeted through a display: contents scoping wrapper since the Breadcrumbs component uses hashed CSS-module class names. Fixes VIDP-253. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
Contributor
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! |
Split the double-render test (brittle if the button variant ever gains a span wrapper) and cover the filename Text component — the one variant whose title attribute depends on third-party prop forwarding. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Code Coverage SummaryCoverage changed in 1 file.
|
- Hoist FilenameRender next to TitleCellRender in the test instead of re-deriving it inline. - Document the upstream Breadcrumbs defect (its own li:last-child flex-shrink/min-width truncation never engages) so the clamp can be removed when it's fixed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Improves the modernized VideoPress dashboard UI by preventing long video titles and filenames from overflowing in the library (grid + table views) and by clamping long titles in the video details breadcrumb.
Changes:
- Add ellipsis truncation styling for library titles (clickable and plain-text variants) and cap title/filename widths in the table view.
- Add
titleattributes to expose full title/filename text on hover (including tests covering the behavior). - Clamp the current breadcrumb title on the video details page via a stable wrapper hook.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| projects/packages/videopress/src/dashboard/components/library/test/thumbnail-field.test.tsx | Adds assertions that title/filename renderers expose full text via title attributes. |
| projects/packages/videopress/src/dashboard/components/library/fields.tsx | Adds title attributes to title/filename renderers and introduces a span class for styling plain titles. |
| projects/packages/videopress/routes/video/style.scss | Adds breadcrumb title clamping for the video details header (ellipsis + max-width). |
| projects/packages/videopress/routes/video/stage.tsx | Wraps Breadcrumbs with a stable class hook for styling via display: contents. |
| projects/packages/videopress/routes/library/style.scss | Adds truncation styles for titles and table-specific max-width caps for title and filename columns. |
| projects/packages/videopress/changelog/fix-videopress-library-title-overflow | Changelog entry documenting the overflow/truncation fix. |
dhasilva
approved these changes
Jun 11, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes VIDP-253 (CFT feedback item VP11, reported in #49485)
Proposed changes
Long video titles and filenames overflowed ungracefully in the modernized VideoPress dashboard: grid cards hard-clipped titles mid-character with no ellipsis, and in the table layout a long title would render over the filename column's text while pushing the Duration/Uploaded/Privacy columns out of the viewport entirely. The video details page rendered the full raw title in the breadcrumb, crowding the Save button.
.dataviews-title-fieldtruncation only targets its internal anchor/button markup, so our custom renderers now bring their own:display: block+width: fit-content(keeps the clickable title's hit area at text size) +max-widthbound +min-width: 0(lets the title shrink when it shares a flex row with a status pill, which itself getsflex-shrink: 0).titleattributes so the full text is reachable on hover.h1rendered by@wordpress/admin-ui's Breadcrumbs) is clamped via adisplay: contentsscoping wrapper — the component's class names are hashed CSS-modules, so the wrapper gives us a stable hook with zero layout impact. The full title remains visible in the Title field directly below.Related product discussion/links
Does this pull request change what data or activity we track or use?
No.
Testing instructions
Requires the modernized VideoPress dashboard (
add_filter( 'rsm_jetpack_ui_modernization_videopress', '__return_true' );) and videos with absurdly long titles/filenames — e.g. rename a video to a 130+ character unbroken string likescreen-recording-2026-06-11-at-14-23-55-final-FINAL-v2-revised-EXPORT-1080p60-high-bitrate-DO-NOT-DELETE-master-copy-approved-by-legal.Screenshots (mocked media responses; 1440×900)
Unit tests:
cd projects/packages/videopress && pnpm test(includes thetitle-attribute hover affordance on both the clickable and plain title variants).🤖 Generated with Claude Code