Vertically center PR summary row by SunsetTechuila · Pull Request #9116 · refined-github/refined-github · GitHub
Skip to content

Vertically center PR summary row#9116

Merged
SunsetTechuila merged 5 commits into
mainfrom
alig
Mar 25, 2026
Merged

Vertically center PR summary row#9116
SunsetTechuila merged 5 commits into
mainfrom
alig

Conversation

@SunsetTechuila

@SunsetTechuila SunsetTechuila commented Mar 24, 2026

Copy link
Copy Markdown
Contributor

Fixes the issue with GitHub's vanilla styles.

While our styles didn't have the alignment issue, they had another one: #9113 (comment). They were removed in #9079.

When the window width is less than 544px, flex-direction changes from row to column. Combined with align-items: center, this was triggering the misplacement bug.

Test URLs

refined-github/sandbox#61

Screenshot

Before image
After image

msedge_fOMrgioCtH

@SunsetTechuila SunsetTechuila changed the title Fix update branch button and PR description row alignment Horizontally center merge box buttons and PR description row Mar 24, 2026
@SunsetTechuila SunsetTechuila marked this pull request as ready for review March 24, 2026 08:00
@fregante

Copy link
Copy Markdown
Member

The merge box style is intentional, it's how GitHub aligns the icons and buttons in boxes. See for example the circle on the left, also top-left aligned rather than centered

@fregante

Copy link
Copy Markdown
Member

For the PR header, sure 👍

@SunsetTechuila

SunsetTechuila commented Mar 24, 2026

Copy link
Copy Markdown
Contributor Author

it's how GitHub aligns the icons and buttons in boxes

The merge button is centered. Icons are a different thing

image

For the PR header, sure 👍

I don't see the difference. It’s all just a lack of care rather than some inexplicable "intention"

@fregante

Copy link
Copy Markdown
Member

I mean that same box, look at the green and gray circles on the left. Also the general alert boxes have the same style. This lets the box contents grow while placing the CTAs in the top-right

@SunsetTechuila

SunsetTechuila commented Mar 25, 2026

Copy link
Copy Markdown
Contributor Author

Apparently some people like their buttons misaligned. Can't argue with that

@SunsetTechuila SunsetTechuila changed the title Horizontally center merge box buttons and PR description row Horizontally center PR description row Mar 25, 2026
@SunsetTechuila SunsetTechuila changed the title Horizontally center PR description row Horizontally center PR summary row Mar 25, 2026
Comment thread source/features/github-bugs.css Outdated
@fregante

Copy link
Copy Markdown
Member

They are aligned, just not to what you're thinking. See for example the same style in the app. Vertically centering them in taller and taller boxes make less and less sense

image

@SunsetTechuila

Copy link
Copy Markdown
Contributor Author

Icons are a different thing

image

@SunsetTechuila SunsetTechuila changed the title Horizontally center PR summary row Vertically center PR summary row Mar 25, 2026
@SunsetTechuila

SunsetTechuila commented Mar 25, 2026

Copy link
Copy Markdown
Contributor Author

taller and taller boxes

Taller and taller boxes in question (77px):

image

Those boxes are as tall as a corgi

@SunsetTechuila SunsetTechuila merged commit d81ad6b into main Mar 25, 2026
9 checks passed
@SunsetTechuila SunsetTechuila deleted the alig branch March 25, 2026 09:15
@SunsetTechuila

Copy link
Copy Markdown
Contributor Author

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

Development

Successfully merging this pull request may close these issues.

2 participants