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)