Sticky header for pulls/issues

ltguillaume commented

2026-08-09 22:04:29 +00:00

Owner

I always apply the following CSS to Forgejo instances. Perhaps it's an idea to put it into this theme.

Goal

If you get back to a tab, it's not immediately clear what issue or PR you're viewing when you're scrolled down a bit.
This adjustment will make the header of the issue/pull sticky, so you'll always be able to see where you are right away.

Code

html:has(meta[property="og:url"][content*="/issues/"]),
html:has(meta[property="og:url"][content*="/pulls/"]) {
	scroll-padding-top: 130px; /* Adjust scroll position for titles of max. 2 lines */
}

.view.issue.pull .issue-title-header {
	width: unset;
	position: sticky;
	top: 0;
	margin-left:  calc(-1 * var(--page-margin-x));
	margin-right: calc(-1 * var(--page-margin-x));
	padding-left:  var(--page-margin-x);
	padding-right: var(--page-margin-x);
	padding-bottom: 6px;
	background-color: var(--color-body);
	border-bottom: 1px solid var(--color-secondary);
	z-index: 10;
}
	.view.issue.pull .issue-title-header .button-row {
		position: relative;
		top: 2px;
	}

Remarks

scroll-padding-top is only applied when viewing isues or PRs
The negative margins and padding are set for a visual glitch on narrow viewports, where e.g. the shadow of a focused post would be visible at the sides of the stuck header

Screenshot

Issues

I see elements jump around quite often on Forgejo (if only for a few pixels), so this is no exception:

I always apply the following CSS to Forgejo instances. Perhaps it's an idea to put it into this theme. #### Goal If you get back to a tab, it's not immediately clear what issue or PR you're viewing when you're scrolled down a bit. This adjustment will make the header of the issue/pull sticky, so you'll always be able to see where you are right away. #### Code ```css html:has(meta[property="og:url"][content*="/issues/"]), html:has(meta[property="og:url"][content*="/pulls/"]) { scroll-padding-top: 130px; /* Adjust scroll position for titles of max. 2 lines */ } .view.issue.pull .issue-title-header { width: unset; position: sticky; top: 0; margin-left: calc(-1 * var(--page-margin-x)); margin-right: calc(-1 * var(--page-margin-x)); padding-left: var(--page-margin-x); padding-right: var(--page-margin-x); padding-bottom: 6px; background-color: var(--color-body); border-bottom: 1px solid var(--color-secondary); z-index: 10; } .view.issue.pull .issue-title-header .button-row { position: relative; top: 2px; } ``` #### Remarks - `scroll-padding-top` is only applied when viewing isues or PRs - The negative margins and padding are set for a visual glitch on narrow viewports, where e.g. the shadow of a focused post would be visible at the sides of the stuck header #### Screenshot ![sticky-header](/attachments/7bcec8f7-a93e-4aba-92e4-5cbdf9614241) #### Issues 1. I see elements jump around quite often on Forgejo (if only for a few pixels), so this is no exception: ![glitch](/attachments/edd3fc80-cd56-46ed-894d-a3b4760dd2fc)

glitch.png

2.8 KiB

sticky-header.png

59 KiB

👍 1 👀 1

Ted commented

2026-08-11 23:06:06 +00:00

Member

Looks pretty good. What does scroll-padding-top do? I've never used it before and removing it doesn't seem to make a difference.

Looks pretty good. What does ``scroll-padding-top`` do? I've never used it before and removing it doesn't seem to make a difference.

ltguillaume commented

2026-08-11 23:09:21 +00:00

Author

Owner

If you open an issue from the notifications, it scrolls to the new reply. Without that bit of CSS, part the new reply will be directly underneath the sticky header. With it, the scroll position will be compensated for the sticky header.

Ted referenced this issue from a commit

2026-08-12 02:42:30 +00:00

sticky headers for prs and issues (closes #4)

Ted closed this issue

2026-08-12 02:42:30 +00:00

ltguillaume referenced this issue

2026-08-17 20:31:20 +00:00

Only use sticky header in conversation views #10