From 2390a46d0fab9f801937f57e27ceb12c6496ba18 Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
Date: Thu, 29 Jun 2023 05:24:02 -0400
Subject: [PATCH] Reduce table padding globally (#25568) (#25577)

Backport #25568 by @silverwind

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: silverwind <me@silverwind.io>
---
 web_src/css/base.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index c68707d03d..3f1e891624 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -881,6 +881,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 {