Prevent nodes table from overflowing the page in the new Manage Jenkins UI - #27197
Draft
Anexus5919 wants to merge 1 commit into
Draft
Prevent nodes table from overflowing the page in the new Manage Jenkins UI#27197Anexus5919 wants to merge 1 commit into
Anexus5919 wants to merge 1 commit into
Conversation
Contributor
Author
|
this pull request is complete and tested. It is opened as a draft only because of the GitHub limit on open pull requests for contributors without write access. I will mark it "Ready for review" as soon as a slot frees. Reviews and feedback are very welcome in the meantime. |
14 tasks
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 #27187
The Nodes page table in the new "Manage Jenkins" UI expands beyond the frame of the page when node monitor plugins (Platform Labeler, Versions Node Monitors, Git Version Monitor) contribute extra columns. There were two independent causes, both in core:
#computerstable sits directly in the page with no horizontal overflow handling. An HTML table cannot shrink below its min-content width, so each extra monitor column pushes it past the frame. Plugins render complete<td>cells viast:include, so no plugin-side change can fix this; the container has to handle any number of columns..app-main-panel--wideusedwidth: 70vw, which resolves against the viewport rather than the space actually available next to the sidebar. This centered the content with dead space on the left (visible in the issue screenshot) and made the panel itself overflow the page card on viewports below roughly 1300px, as reported by @mawinter69 in Make Nodes page wide in experimental Manage Jenkins UI #26997 (comment) (the "smaller screens" comment). Make Nodes page wide in experimental Manage Jenkins UI #26997 had improved the page in 2.572 but did not address overflow.This PR:
.jenkins-table-wrapperscroll container (width: 100%; overflow-x: auto;). This is the same technique used for the dashboard job table in JENKINS-73695 ([JENKINS-73695] BUG: Dashboard shows white space on certain width space >900px #9667). When columns exceed the available width, the table scrolls horizontally inside its own container while the page header, buttons, and legend stay in place. Works with the experimental UI on and off, since both share the same markup. Most of the Jelly diff is re-indentation;git diff -wshows the real change is only the wrapper element.width: 70vwfrom.app-main-panel--wide(keepingmax-width: 1700pxandmargin-inline: auto, matching the shape of the--narrowrule). Wide pages now fill the available panel width, which removes the dead space on the left and stops the panel overflowing the card on smaller viewports. The otherwidth="wide"pages (Plugin Manager tabs, System Log) benefit from the same fix.Notes for reviewers:
jenkins-tableinside exactly this kind of wrapper since JENKINS-73695. Header tooltips are appended todocument.body, so they are not clipped by the scroll container..app-project-status-tableCSS rule from_layout-commons.scsswhileprojectView.jellystill emits that class, so the dashboard job table lost its JENKINS-73695 scroll containment. That is out of scope here, but.jenkins-table-wrappercould fix it as a follow-up, and the Plugin Manager tables could adopt the same wrapper.Testing done
stylelintandprettierpass on the changed SCSS; the webpack production build compiles and the generated bundle contains the new rules.mvn -am -pl war,bom -Pquick-build clean install,mvn -pl war jetty:run) with the "New Manage Jenkins UI" feature preview enabled and the Platform Labeler, Versions Node Monitors, and Git Version Monitor plugins installed, with several agents configured:--widerule), with no regressions.Screenshots (UI changes only)
Proposed changelog entries
Proposed changelog category
/label bug,web-ui
Proposed upgrade guidelines
N/A
Submitter checklist
@Restrictedor have@since TODOJavadocs, as appropriate.@Deprecated(since = "TODO")or@Deprecated(forRemoval = true, since = "TODO"), if applicable.evalto ease future introduction of Content Security Policy (CSP) directives (see documentation).Desired reviewers
@janfaracik @timja
Before the changes are marked as
ready-for-merge:Maintainer checklist
upgrade-guide-neededlabel is set and there is a Proposed upgrade guidelines section in the pull request title (see example).lts-candidateto be considered.