Fix anchor links being obscured by header

[Gautam-aman]

Fixes #16803

Testing done

-Started Jenkins locally from the built WAR
-Navigated to configuration pages using anchor URLs
-Verified that anchored sections are fully visible and not obscured by the fixed header

Screenshots (UI changes only)

Proposed changelog entries

N/A – UI-only CSS fix with no user-facing functional change.

Proposed changelog category

(skip)

Proposed upgrade guidelines

N/A – no upgrade or migration impact.

Submitter checklist

• The issue, if it exists, is well-described.
• The changelog entries and upgrade guidelines are appropriate for the affected audience.
• There is automated testing or an explanation as to why this change has no tests.
  This is a CSS-only layout fix; Jenkins does not have automated coverage for anchor scroll positioning.
• 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

@mention

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.

[Gautam-aman]

/label skip-changelog

[Gautam-aman]

Instead of applying a global scroll-padding based on an assumed header height, this fix uses scroll-margin-top on anchor targets. This avoids coupling to header sizing and continues to work correctly even when the header height is customized by plugins or themes.

Verified manually by navigating to configuration pages using anchor URLs (/configure#jenkins-location) and confirming the target section is fully visible.
Also verified by increasing the header height using browser devtools to simulate customization; anchor targets remain visible and are not obscured by the header.

[Copilot]

Pull request overview

This PR fixes anchor links being obscured by Jenkins' fixed header by adding a scroll margin to elements with IDs.

Changes:

• Added CSS rule to apply 4rem scroll-margin-top to all elements with id attributes

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Gautam-aman]

Thanks for the feedback.
I’ve updated the fix to use the :target pseudo-class so it only applies when navigating via URL fragments. I’ve also moved the rule out of skeleton.css into layout.jelly, which handles global page layout and header behavior.

[Copilot]

Pull request overview

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

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Gautam-aman]

CI failures appear unrelated to this change (CSS-only). The branch is currently out of date with master; I’ve updated the branch and re-ran CI.

[Copilot]

Pull request overview

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

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

scroll-margin-top: 4rem is smaller than the current header height (--header-height: 4.125rem in src/main/scss/abstracts/_theme.scss), so anchor targets can still end up partially obscured (e.g., due to the extra 0.125rem plus border/rounding/zoom). Use the existing CSS variable (e.g., var(--header-height) or an appropriate calc(...)) instead of a hard-coded value so this stays correct if the header height changes.

Suggested change

	scroll-margin-top: 4rem;
	scroll-margin-top: var(--header-height);

[Copilot]

This introduces a global CSS rule via an inline <style> in layout.jelly. Since this affects every page and Jenkins already centralizes global layout styles in the compiled styles.css bundle (from src/main/scss/...), it would be more maintainable (and better for caching) to move this rule into the appropriate SCSS file (e.g. alongside the existing scroll/header rules in src/main/scss/base/_core.scss).

Suggested change

	<style>
	/*
	* Prevent anchor targets from being hidden behind the fixed Jenkins header
	* See: https://github.com/jenkinsci/jenkins/issues/16803
	*/
	:target {
	scroll-margin-top: 4rem;
	}
	</style>