Unlock conversation's buttons are incorrect

[Gusted]

Gitea Version

cc64328

Operating System

Arch Linux

Browser Version

99.0a1

Can you reproduce the bug on the Gitea demo site?

Yes

Description

The cancel & Confirm button should be under the warning message. Not sure if this is a regression or what's causing it, the lock modal is doing this correctly(even when removing the 2 other elements that the lock modal adds)

Screenshots

[zeripath]

This is a width dependent problem.

The class "left" here:

gitea/templates/repo/issue/view_content/sidebar.tmpl

Line 593 in 78b38a5

<div class="ui warning message text left">

causes this because of float: left in:

gitea/web_src/less/_base.less

Lines 804 to 811 in 9c5696e

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

Both of these classes are suspect IMO. Semantic/fomantic had it's own way for making thing be floated to the left, left floated.

I argue we need to get rid of this weird hack.

[silverwind]

Yes, we should not override fomantic classes like that. Hacks like this need to go.

[wxiaoguang]

@zeripath @silverwind Agree with you.

And I'd like to discuss about our Frontend Plan by the way (we have discussed many times before but no conclusion yet) ......

I must point out that, these hacky code are written by hand.

4447a20

4447a20#diff-abca4ad6deec2cd6c98ed72628b067bd5112d065354246e8c947a1cb7d6befcfR58-R64

It's not Fomantic UI's fault.

I always disagree that thinking Fomantic UI does wrong. Even if in some cases Fomantic UI is not that good, but we must admit that most problems are caused by ourselves.

If we want to improve the Gitea UI fundamentally, we should admit that many mistakes are introduced by developers and we must refactor and fix them one by one. That's the key problem, it's so hard to push refactoring work in Gitea

Switching to a new framework won't improve anything if we do not have good coding style and reviewing standards, new framework will be filled by mistakes soon.

And to clarify, I don't against to use a new framework, the premise is that:

1. we can use the new framework correctly
2. we can migrate all (or most) existing code into new framework soon

[wxiaoguang]

And removing the .ui .float and .ui .right could be easy:

1. introduce our style: us-float-left and us-float-right
2. replace all "ui([^"]*)\b(left|right)\b([^"]*)" to "ui$1us-float-$2$3"
3. search all ui ... text to fix these left and right classes , because there are some ui ... text left
4. remove .ui .float and .ui .right
5. test

[silverwind]

Looks alright currently: