Skip to content

Commit

Permalink
Reduce table padding globally (#25568)
Browse files Browse the repository at this point in the history
Fomantic's tables have too much padding. Reduce it so we have more
information density in them. Especially the admin tables need this
because they are bursting already because of column count.

## Admin repolist before and after

<img width="909" alt="Screenshot 2023-06-28 at 20 27 55"
src="https://github.com/go-gitea/gitea/assets/115237/954c925c-8db5-47ce-ae51-a2168b857014">
<img width="897" alt="Screenshot 2023-06-28 at 20 36 03"
src="https://github.com/go-gitea/gitea/assets/115237/0bddc09a-9117-48b3-a17e-3d34c58d8d3d">

## Other tables

<img width="1230" alt="Screenshot 2023-06-28 at 20 36 22"
src="https://github.com/go-gitea/gitea/assets/115237/38f555b6-a7ce-416a-9f1f-706eaf18863b">
<img width="1236" alt="Screenshot 2023-06-28 at 20 26 37"
src="https://github.com/go-gitea/gitea/assets/115237/82b2878e-358c-4dc2-a6b4-c66e43cd2dfb">
<img width="1231" alt="Screenshot 2023-06-28 at 20 59 30"
src="https://github.com/go-gitea/gitea/assets/115237/c6a92e55-a3a3-4c80-9a0d-50aebb49886c">

Files table is unaffected because it has custom padding already.

---------

Co-authored-by: Giteabot <[email protected]>
  • Loading branch information
silverwind and GiteaBot authored Jun 29, 2023
1 parent c6f1fb1 commit c76b221
Showing 1 changed file with 18 additions and 0 deletions.
18 changes: 18 additions & 0 deletions web_src/css/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -898,6 +898,24 @@ a.label,
color: var(--color-text);
}

/* reduce table padding, needed especially for dense admin tables */
.ui.table > thead > tr > th,
.ui.table > tbody > tr > td,
.ui.table > tr > td {
padding: 6px 3px;
}
/* use more horizontal padding on first and last items for visuals */
.ui.table > thead > tr > th:first-of-type,
.ui.table > tbody > tr > td:first-of-type,
.ui.table > tr > td:first-of-type {
padding-left: 10px;
}
.ui.table > thead > tr > th:last-of-type,
.ui.table > tbody > tr > td:last-of-type,
.ui.table > tr > td:last-of-type {
padding-right: 10px;
}

img.ui.avatar,
.ui.avatar img,
.ui.avatar svg {
Expand Down

0 comments on commit c76b221

Please sign in to comment.