UI is broken on multiple pages

[Morlinest]

• Gitea version (or commit ref): 1.1.0+79-g4fa691c4 (sha: 4fa691c)
• Git version: Not relevant
• Operating system: Not relevant
• Database (use [x]):
  • PostgreSQL
  • MySQL
  • MSSQL
  • SQLite
• Can you reproduce the bug at https://try.gitea.io:
  • Yes (provide example URL)
  • No
  • Not relevant
• Log gist: Not relevant

Description

Broken UI graphic, at least on pages:

• repo -> settings -> branches
• repo -> settings -> githooks

I think its caused by mergin PR #1389.

Another broken UI is on org ->settings -> webhooks (I think this was broken before).

Screenshots

repo -> settings -> branches:

repo -> settings -> githooks:

org ->settings -> webhooks:

[Morlinest]

@andreynering and others.
What you like more?
Using classic semantic styles (description not in list):

or using old custom (".hook") styles:

or (also with ".hook" list style, but description is not as list option):

Also are you OK with branches UI like this?

[sapk]

For the hook and branch page the .settings .list .item:not(:first-child) (introduce in my PR #1389.) just need to not be applied on hook to fix UI. I will look into it furthermore.

[sapk]

So .settings .list:not(.hook ) .item:not(:first-child) should be enough

[sapk]

But a long term solution that I will have to look into is to improve #1389 and continue to remove specific css like .settings .hook.list

[sapk]

Simply removing .table class from the parent of list : class="ui attached table segment" with removing specific .hook css code is enough to fix ui and remove also specific selector we could also remove hook class that is use also in branch html just to apply the same "hack".

[sapk]

For org ->settings -> webhooks it is possible that my PR also impact since I remove some .grid code from css. I will have a look at it and maybe migrate to new UI format ?

[Morlinest]

OK, here is how it looks like (no .hook and .table + replace description from list to p tag before list):
webhooks:

githooks:

[Morlinest]

Need to solve this:

[Morlinest]

What about removing "&:not(:first-child)" and just use "ui divided list" instead?

[Morlinest]

Like this (no extra classes, only semantic ui):

[sapk]

It is missing a space and border are not connected to border like there were before. Why not keeping item list and not changing the first desc to p since &:not(:first-child) is there to keep not display border-top on first item ?
Just removing .hook and .table is enough (at least for hook and branch page)

[sapk]

.settings .list .item:not(:first-child) {
/*** */
min-height: 60px;
}
could also maybe removed to have a more compact list ...

[sapk]

+1 : .divided could be a solution to go further at cleaning custom css but we will need to keep fix to extend borders to borders or find a other solution in semantic

and use relaxed to add spacing in between horizontals borders.

[sapk]

For dropdown .list .item need to be more specific to .list>.item

[Morlinest]

I think it looks good with .relaxed .divided. No need for border to border extend, If you want that look, you can use attached segment or table instead of list. I like this look. Options tab has the same look. What do you think?

[sapk]

I haven't time to test but for having .divided border we could simply set and remove all extras custom ? .settings .list.divided>.item {
margin-right: -1rem; padding-right: 1rem;
margin-left: -1rem; padding-left: 1rem;
}
If you prefer you could also use .segment.table .list.divided.relaxed but it need a padding inside item to looks good.

And globally you should keep the desc as .item so that it have a border at his bottom. (i think)

Advice from long term maintainers could be good.