Skip to content

Prevent nodes table from overflowing the page in the new Manage Jenkins UI - #27197

Draft
Anexus5919 wants to merge 1 commit into
jenkinsci:masterfrom
Anexus5919:fix-27187-nodes-table-overflow
Draft

Prevent nodes table from overflowing the page in the new Manage Jenkins UI#27197
Anexus5919 wants to merge 1 commit into
jenkinsci:masterfrom
Anexus5919:fix-27187-nodes-table-overflow

Conversation

@Anexus5919

@Anexus5919 Anexus5919 commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

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:

  1. The #computers table 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 via st:include, so no plugin-side change can fix this; the container has to handle any number of columns.
  2. .app-main-panel--wide used width: 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:

  • Wraps the nodes table in a new generic .jenkins-table-wrapper scroll 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 -w shows the real change is only the wrapper element.
  • Removes width: 70vw from .app-main-panel--wide (keeping max-width: 1700px and margin-inline: auto, matching the shape of the --narrow rule). 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 other width="wide" pages (Plugin Manager tabs, System Log) benefit from the same fix.

Notes for reviewers:

  • Sorting is unaffected: the sortable behavior attaches to the table element itself and never touches the table's parent. The dashboard has shipped a sortable jenkins-table inside exactly this kind of wrapper since JENKINS-73695. Header tooltips are appended to document.body, so they are not clipped by the scroll container.
  • While working on this I noticed Standardise experimental Jenkins pages, make the side panel independently scrollable + make the build bar sticky #26863 removed the .app-project-status-table CSS rule from _layout-commons.scss while projectView.jelly still emits that class, so the dashboard job table lost its JENKINS-73695 scroll containment. That is out of scope here, but .jenkins-table-wrapper could fix it as a follow-up, and the Plugin Manager tables could adopt the same wrapper.

Testing done

  • stylelint and prettier pass on the changed SCSS; the webpack production build compiles and the generated bundle contains the new rules.
  • Manually tested on a local build (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:
    • With all monitor columns present, the table scrolls horizontally inside its own container; nothing escapes the page frame, and the header and buttons stay fixed.
    • The wide panel fills the available width; no dead space on the left, and no page overflow at ~1100px viewport width.
    • Column sorting, the icon legend dialog, and header timestamp tooltips still work.
    • Checked the Nodes page with the feature preview disabled, and the Plugin Manager tabs (which share the changed --wide rule), with no regressions.
  • No automated test is included because the change is presentational (CSS layout and a wrapper element with no behavior); this matches the precedent of Make Nodes page wide in experimental Manage Jenkins UI #26997 and [JENKINS-73695] BUG: Dashboard shows white space on certain width space >900px #9667.

Screenshots (UI changes only)

Screenshot 2026-08-06 012223 Screenshot 2026-08-06 012420

Proposed changelog entries

  • Prevent the nodes table from overflowing the page frame in the new "Manage Jenkins" UI when node monitors contribute additional columns.

Proposed changelog category

/label bug,web-ui

Proposed upgrade guidelines

N/A

Submitter checklist

  • The issue, if it exists, is well-described.
  • The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood (see examples). Fill in the Proposed upgrade guidelines section only if there are breaking changes or changes that may require extra steps from users during upgrade.
  • There is automated testing or an explanation as to why this change has no tests.
  • New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadocs, as appropriate.
  • New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO"), if applicable.
  • UI changes do not introduce regressions when enforcing the current default rules of Content Security Policy Plugin. In particular, new or substantially changed JavaScript is not defined inline and does not call eval to ease future introduction of Content Security Policy (CSP) directives (see documentation).
  • For dependency updates, there are links to external changelogs and, if possible, full differentials.
  • For new APIs and extension points, there is a link to at least one consumer.

Desired reviewers

@janfaracik @timja

Before the changes are marked as ready-for-merge:

Maintainer checklist

  • There are at least two (2) approvals for the pull request and no outstanding requests for change.
  • Conversations in the pull request are over, or it is explicit that a reviewer is not blocking the change.
  • Changelog entries in the pull request title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood.
  • Proper changelog labels are set so that the changelog can be generated automatically.
  • If the change needs additional upgrade steps from users, the upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the pull request title (see example).
  • If it would make sense to backport the change to LTS, be a Bug or Improvement, and either the issue or pull request must be labeled as lts-candidate to be considered.

@comment-ops-bot comment-ops-bot Bot added bug For changelog: Minor bug. Will be listed after features web-ui The PR includes WebUI changes which may need special expertise labels Aug 5, 2026
@Anexus5919

Copy link
Copy Markdown
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug For changelog: Minor bug. Will be listed after features web-ui The PR includes WebUI changes which may need special expertise

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Node extensions (version column, platform labeler, ...) need better support for the Nodes page in the new "Manage Jenkins" page

1 participant