Richard/Deploymentcenter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(webui): Abzeichen brechen nicht mehr um und haben eine einheitliche Hoehe

Browse Source 
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>
This commit is contained in:
Deploymentcenter Bot
2026-08-30 14:37:26 +02:00
co-authored by Claude Opus 5
parent 7fff13ee20
commit afcbb3c091
1 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.php
+22 -6
View File
@@ -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>