From f662af4c5002fd3c8bb87b74b474d2bcbd44a215 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Moritz=20St=C3=BCckler?= <moritz@bitbetter.de>
Date: Thu, 22 Oct 2026 13:06:00 +0200
Subject: [PATCH] [Web] Even out badge and tag sizes in tables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use the normal cursor on non-orderable headers. The expand column
  header kept a pointer cursor from sorting_asc although clicking it
  does nothing.
- Let icons in badges inherit the badge font size, like .btn .bi, and
  keep their glyph from adding line height. The global 12pt icon size
  made e.g. the "SSO @" badge in Last mail login taller than the IMAP
  and SMTP badges next to it. Tag badges keep their 12px icon.
- Drop the vertical margin of tag badges inside tables. It is meant for
  the tag editor in edit forms and made the Tags entry of the expanded
  row taller than the others.
- Center tag badge captions: the 12px tag icon stretched the 10.5px
  badge line and pushed the caption below center.

Signed-off-by: Moritz Stückler <moritz@bitbetter.de>
---
 data/web/css/build/013-datatables.css | 6 ++++++
 data/web/css/build/014-mailcow.css    | 8 ++++++++
 2 files changed, 14 insertions(+)

diff --git a/data/web/css/build/013-datatables.css b/data/web/css/build/013-datatables.css
index a0fa34cce..ded00bc7b 100644
--- a/data/web/css/build/013-datatables.css
+++ b/data/web/css/build/013-datatables.css
@@ -44,6 +44,7 @@ table.dataTable td.dt-control:before {
 table.dataTable thead > tr > th.sorting_disabled.sorting_asc,
 table.dataTable thead > tr > th.sorting_disabled.sorting_desc {
     padding-right: 0.5rem;
+    cursor: auto;
 }
 table.dataTable thead > tr > th.sorting_disabled.sorting_asc:before,
 table.dataTable thead > tr > th.sorting_disabled.sorting_asc:after,
@@ -58,6 +59,11 @@ table.dataTable.table-striped>tbody>tr>td>input[type="checkbox"] {
     /* centers the 1em checkbox in the 1.5em line, level with the expand control */
     margin-top: 0.25em;
 }
+/* the vertical margin is meant for the tag editor in edit forms, in tables it only adds height */
+table.dataTable .tag-badge {
+    margin-top: 0;
+    margin-bottom: 0;
+}
 td.dtr-col-lg {
     min-width: 350px;
     word-break: break-word;
diff --git a/data/web/css/build/014-mailcow.css b/data/web/css/build/014-mailcow.css
index 52a34f8b5..99925ca28 100644
--- a/data/web/css/build/014-mailcow.css
+++ b/data/web/css/build/014-mailcow.css
@@ -139,6 +139,13 @@ body {
   display: inline-block;
   font-size: inherit;
 }
+.badge .bi {
+  font-size: inherit;
+}
+/* keeps icons from making a badge taller than one with text only */
+.badge .bi::before {
+  line-height: 0;
+}
 .btn-group-xs > .btn, .btn-xs {
   padding: .25rem .4rem;
   font-size: .875rem;
@@ -343,6 +350,7 @@ code {
 }
 .tag-badge .bi {
   font-size: 12px;
+  line-height: 0;
 }
 .tag-badge.btn-badge:hover {
   filter: brightness(0.9);