Ensure commit-statuses box is sized correctly in headers

[zeripath]

When viewing commits as commits the commit-status box will be fixed at 30px in height
due to being forced to be this size by a fomantic selector. This PR simply adds a
few more selectors to force this to have height auto.

Fix #18498

Signed-off-by: Andrew Thornton art27@cantab.net

[zeripath]

The requirement for this patch-up comes from _base.less:

gitea/web_src/less/_base.less

Lines 1932 to 1941 in 92e81e9

	/* fix misaligned right buttons on box headers */
	.ui.attached.header .right:not(.dropdown) {
	position: absolute;
	right: .78571429rem;
	top: 0;
	bottom: 0;
	height: 30px;
	margin-top: auto;
	margin-bottom: auto;
	}

Which appears to come from #13932

[silverwind]

Can we remove the right class from the popup? That selector is meant to vertically center those right buttons on headers and it's obviously not ideal but I think a better fix is just to remove that class. The popup is absolutely positioned anyways, so I think right makes no sense on it.

[zeripath]

Can we remove the right class from the popup? That selector is meant to vertically center those right buttons on headers and it's obviously not ideal but I think a better fix is just to remove that class. The popup is absolutely positioned anyways, so I think right makes no sense on it.

from repo-legacy.js:

gitea/web_src/js/features/repo-legacy.js

Lines 426 to 436 in 76e3111

	// Commit statuses
	$('.commit-statuses-trigger').each(function () {
	const positionRight = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
	const popupPosition = positionRight ? 'right center' : 'left center';
	$(this)
	.popup({
	on: 'click',
	lastResort: popupPosition, // prevent error message "Popup does not fit within the boundaries of the viewport"
	position: popupPosition,
	});
	});

The right/left says which side the popup appears.

[silverwind]

Hmm I need to check further, I guess this is a bug in Fomantic because right inside a header (float right) has a different meaning than in a popup (anchor right).

[zeripath]

it's our change in _base.less that has made this necessary. #18538 (comment)

[silverwind]

Seems so, we should instead use a class name distinct from fomantic for these right-aligned header contents, which will then allow us to remove that troublesome rule.

[zeripath]

Seems so, we should instead use a class name distinct from fomantic for these right-aligned header contents, which will then allow us to remove that troublesome rule.

Agreed but I think it's kinda difficult to even determine which things are relying on this selector - that's why I simply overrode the individual thing.

I wanted something that was simple to backport to 1.16 without having to make major changes across several templates files.

[zeripath]

I think this might be a bit similar to our previous less code where we had at some point overridden right to always mean float right...

---

actually we still have this:

.ui {
  &.left:not(.action) {
    float: left;
  }

  &.right:not(.action) {
    float: right;
  }

AFAIU semantic had .float for these things so if you wanted something to float:left you'd set float left as the css and it would float left.

[silverwind]

The .ui.attached.header .right:not(.dropdown) is specifically for vertically centering those right-aligned things in box headers which isn't something thats natively possible with fomantic. I will check the possiblilty of just adding a unique classname, it's a better solution for sure.

Ideally, I guess we should just flexbox all these headers instead, but it'll be a even more involved change.

[zeripath]

Ideally, I guess we should just flexbox all these headers instead, but it'll be a even more involved change.

Why don't we do that after we've merged this and backported it to 1.16 then we can properly fix this.

[silverwind]

Let's go with this fow now, proper fix can follow.

[lunny]

make L-G-T-M work