From afcbb3c0915f40871a1896e9ae64e7a4cb3925d0 Mon Sep 17 00:00:00 2001
From: Deploymentcenter Bot <deploy@mhdf.de>
Date: Sun, 30 Aug 2026 14:37:26 +0200
Subject: [PATCH] fix(webui): Abzeichen brechen nicht mehr um und haben eine
 einheitliche Hoehe

Aus "FEATURE" wurde in der schmalen Typ-Spalte ein "FEATUR" mit einem "E"
darunter - und zweizeiliger Inhalt in einer Pillenform (border-radius:20px)
ergibt keine Pille mehr, sondern eine Ellipse. Daher die Ballons.

  - white-space:nowrap. Ein Abzeichen ist eine Beschriftung, kein Fliesstext;
    es bricht nie um.
  - Feste line-height und min-height:25px mit border-box. Emoji bauen hoeher
    als Ziffern: Abzeichen MIT Zeichen waren 25px hoch, die ohne 23px, und die
    Zeilen standen entsprechend unruhig untereinander. Jetzt alle 25px.

Mit nowrap laeuft ein zu breites Abzeichen aber aus seiner Zelle. Die
Spaltenbreiten sind deshalb am breitesten tatsaechlich vorkommenden Abzeichen
gemessen - im Browser, nicht geschaetzt - zuzueglich 32px Zellenpolsterung:

  ID / Typ       92 -> 124   "FEATURE" braucht 88
  Umgebung       96 -> 104   "PROD" braucht 69
  Schweregrad   124 -> 132   "KRITISCH" braucht 95
  Status        160 -> 194   "WARTET AUF PRUEFUNG" braucht 158

Die 82px kommen aus der Titelspalte, die ohnehin den Rest bekommt. Die
Mindestbreite der Tabelle waechst entsprechend von 1180 auf 1280px.

Nachgemessen bei 2000px gegen das echte Stylesheet: 16 Abzeichen, alle 25px
hoch, keines laeuft aus seiner Zelle, Seite scrollt nicht quer, Knoepfe
einreihig.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 public/index.php | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/public/index.php b/public/index.php
index 72807f1..21f90a5 100644
--- a/public/index.php
+++ b/public/index.php
@@ -2302,7 +2302,18 @@ $csrfField = Csrf::field();
         tr:hover td { background: rgba(255, 255, 255, 0.02); }
 
         /* Badges */
-        .badge { padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.725rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; font-family: 'Roboto Mono', monospace; }
+        /*
+           Ein Abzeichen ist eine Beschriftung, kein Fliesstext - es bricht nie um.
+           white-space:nowrap fehlte, und in einer schmalen Spalte wurde aus
+           "FEATURE" ein "FEATUR" mit einem "E" darunter. Zusammen mit
+           border-radius:20px, das bei zwei Zeilen keine Pille mehr ergibt,
+           sondern eine Ellipse, sah das Ergebnis nach Ballon aus.
+
+           line-height fest, weil Emoji hoeher bauen als Ziffern: Ohne die
+           Angabe war ein Abzeichen mit Zeichen einige Pixel groesser als eines
+           ohne, und die Zeilen standen unruhig untereinander.
+        */
+        .badge { padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.725rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; font-family: 'Roboto Mono', monospace; white-space: nowrap; line-height: 1.45; min-height: 25px; box-sizing: border-box; }
         .badge-up { background: rgba(18,212,138,0.12); color: var(--success); border: 1px solid rgba(18,212,138,0.3); }
         .badge-warning { background: rgba(245,166,35,0.12); color: var(--warning); border: 1px solid rgba(245,166,35,0.3); }
         .badge-down { background: rgba(246,70,93,0.12); color: var(--danger); border: 1px solid rgba(246,70,93,0.3); }
@@ -2387,7 +2398,7 @@ $csrfField = Csrf::field();
            koennen - siehe .zelle-titel.
         --------------------------------------------------------------- */
         .tabelle-scroll { overflow-x: auto; }
-        table.tabelle-fest { table-layout: fixed; min-width: 1180px; }
+        table.tabelle-fest { table-layout: fixed; min-width: 1280px; }
         table.tabelle-fest td { overflow-wrap: anywhere; }
 
         /*
@@ -4745,13 +4756,18 @@ chmod +x update-agent
                         <table class="tabelle-fest">
                             <thead>
                                 <tr>
-                                    <th style="width:92px;">ID / Typ</th>
-                                    <th style="width:96px;">Umgebung</th>
+                                    <?php // Die Breiten sind am breitesten Abzeichen der Spalte
+                                          // gemessen, zuzueglich 32px Zellenpolsterung - nicht
+                                          // geschaetzt. Bei "Status" gibt
+                                          // "WARTET AUF PRUEFUNG" mit 158px den Ausschlag,
+                                          // bei "ID / Typ" das FEATURE-Abzeichen mit 88px. ?>
+                                    <th style="width:124px;">ID / Typ</th>
+                                    <th style="width:104px;">Umgebung</th>
                                     <th>Projekt &amp; Titel</th>
                                     <th style="width:104px;">Build</th>
-                                    <th style="width:124px;">Schweregrad</th>
+                                    <th style="width:132px;">Schweregrad</th>
                                     <th style="width:82px;">Anzahl</th>
-                                    <th style="width:160px;">Status</th>
+                                    <th style="width:194px;">Status</th>
                                     <th style="width:150px;">Aktionen</th>
                                 </tr>
                             </thead>