Wortmarke breiter, und die Hostzeile steht wieder auf einer Linie

Zwei Dinge, die dem Betreiber am fertigen Bild aufgefallen sind.

DIE WORTMARKE. Sechs Zellen pro Buchstabe liessen sie hoch und schmal wirken;
acht treffen die Proportion. Damit ist die Zeichnung 65 statt 51 Zellen breit,
und bei 13px rund 500px — auf dem Schirm eine Wortmarke, kein Etikett. Am
Telefon 7px und damit rund 270px, was neben den Raendern hineinpasst.

DIE HOSTZEILE. „Online" und „Verbunden" standen 3px versetzt, obwohl beide
Zellen gleich hoch sind (18,6px, gemessen). Der Grund: ein `inline-flex` holt
sich seine Grundlinie vom ERSTEN Kind. Links ist das ein 8px-Punkt, rechts ein
16px-Icon; beide sitzen in ihrer Zeile mittig, ihre Unterkanten liegen deshalb
4px auseinander, und genau darauf setzt der Browser die Grundlinie der ganzen
Zelle. Mit `align-middle` richtet sich der Kasten nach seiner Mitte statt nach
dem ersten Kind. Nachgemessen: vorher 361,3 gegen 358,5, jetzt beide 361,6 —
Versatz 0px.

Beides im Browser gemessen, nicht geschaetzt. 2508 Tests gruen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

resources/views/livewire/admin/host-terminal.blade.php

@@ -78,7 +78,7 @@
              Zelle in der zweiten Zeile, unter der in der ersten nichts stand —
              und der stand als loser Klotz mitten im Wort. Figlet-Schriften sind
              für echte Terminalschriften gezeichnet und tragen hier nicht. Jeder
-             Buchstabe ist sechs Zellen breit (das `I` zwei), mit einer Zelle
+             Buchstabe ist acht Zellen breit (das `I` zwei), mit einer Zelle
              Abstand, und keine Zelle steht ohne Nachbarn darüber. Nicht von Hand
              abgezählt, sondern aus einer Buchstabentabelle gesetzt — von Hand
              hatte ich mich prompt verzählt, und die Buchstaben liefen ineinander.
@@ -92,18 +92,20 @@
              hatte kaum Kontrast, und eine Wortmarke, die ihre Farbe wechselt, ist
              ohnehin keine Statuslampe — was los ist, sagt die Zeile darunter.
 
-             Zwei Größen: die Zeichnung ist 51 Zellen breit, und eine Zelle ist
-             gut 0,6 der Schriftgröße. 15px ergeben rund 460px — auf dem Schirm
-             eine Wortmarke, kein Etikett. Am Telefon sind es 10px und damit gut
-             300px, was neben den Rändern noch hineinpasst; bei 15px schöbe sie
-             die Seite zur Seite. --}}
+             Acht Zellen pro Buchstabe, nicht sechs: bei sechs standen sie hoch
+             und schmal da. Acht trifft die Proportion der Wortmarke.
+
+             Zwei Größen: die Zeichnung ist 65 Zellen breit, und eine Zelle ist
+             gut 0,6 der Schriftgröße. 13px ergeben rund 500px — auf dem Schirm
+             eine Wortmarke, kein Etikett. Am Telefon sind es 7px und damit rund
+             270px, was neben den Rändern noch hineinpasst. --}}
         <pre data-stage-mark
-             class="select-none font-mono text-[10px] leading-none text-accent sm:text-[15px]"
-             role="img" aria-label="CluPilot"> ████  ██     ██  ██ ██████ ██ ██      ████  ██████
-██     ██     ██  ██ ██  ██ ██ ██     ██  ██   ██  
-██     ██     ██  ██ ██████ ██ ██     ██  ██   ██  
-██     ██     ██  ██ ██     ██ ██     ██  ██   ██  
- ████  ██████  ████  ██     ██ ██████  ████    ██  </pre>
+             class="select-none font-mono text-[7px] leading-none text-accent sm:text-[13px]"
+             role="img" aria-label="CluPilot"> ██████  ██       ██    ██ ████████ ██ ██        ██████  ████████
+██       ██       ██    ██ ██    ██ ██ ██       ██    ██    ██   
+██       ██       ██    ██ ████████ ██ ██       ██    ██    ██   
+██       ██       ██    ██ ██       ██ ██       ██    ██    ██   
+ ██████  ████████  ██████  ██       ██ ████████  ██████     ██   </pre>
 
         {{-- aria-live: die Bühne tauscht ihren Text aus, ohne dass die Seite neu
              lädt. Ohne diesen Hinweis erführe ein Screenreader vom Abbruch

resources/views/livewire/admin/hosts.blade.php

@@ -119,13 +119,21 @@
                                     </a>
                                 </td>
                                 <td class="px-4 py-3 font-mono text-xs text-body">{{ $host->datacenter }}</td>
+                                {{-- `align-middle` an beiden: ein `inline-flex` holt sich seine
+                                     Grundlinie vom ERSTEN Kind, und das ist hier links ein
+                                     8px-Punkt und rechts ein 16px-Icon. Beide sitzen in einer
+                                     18,6px hohen Zeile mittig, ihre Unterkanten liegen deshalb
+                                     4px auseinander — und genau so weit standen „Online" und
+                                     „Verbunden" versetzt, obwohl beide Zellen gleich hoch sind.
+                                     Nachgemessen: 361,3 gegen 358,5; mit `align-middle` beide
+                                     361,6. --}}
                                 <td class="px-4 py-3">
-                                    <span class="inline-flex items-center gap-1.5 text-xs text-body">
+                                    <span class="inline-flex items-center gap-1.5 align-middle text-xs text-body">
                                         <span class="size-2 rounded-pill {{ $hdot }}" aria-hidden="true"></span>{{ __('hosts.health.'.$health) }}
                                     </span>
                                 </td>
                                 <td class="px-4 py-3">
-                                    <span class="inline-flex items-center gap-1.5 text-xs {{ $vpnTone }}">
+                                    <span class="inline-flex items-center gap-1.5 align-middle text-xs {{ $vpnTone }}">
                                         <x-ui.icon name="{{ $vpnIcon }}" class="size-4" />
                                         @if ($vpnState === 'silent' && $vpnPeer?->last_handshake_at)
                                             {{ __('hosts.vpn.silent_since', ['time' => $vpnPeer->last_handshake_at->diffForHumans()]) }}