Es sollte so einfach sein

Eine Homelab-Seite bauen. Netzwerkdiagramm, paar Infos, fertig. Wie schwer kann das schon sein? Ich bin schließlich nicht zum ersten Mal am Coden.

Spoiler: Es war die Hölle.

Der Anfang

Die Seite sah gut aus. SVG-Diagramm mit animierten Datenpaketen, Neofetch-Block, Timeline - das volle Programm. Dachte ich.

Dann der erste Test auf dem Handy. “Sieht komisch aus”…

Der grüne - bei “Haupt VLAN” der war irgendwie… gestreckt. Horizontal. Wie ein Nudelteig der zu lange gerollt wurde.

Phase 1: Das Herumprobieren

“Ist bestimmt flex-shrink”, dachte ich. Falsch.

“Vielleicht align-items?” Falsch.

“display: inline-block?” Falsch.

Ich habe alles probiert. min-height, max-height, !important, flex: none, align-self: center, vertical-align, line-height: 0. Der Balken blieb stur. Manchmal war er nach oben gerutscht, manchmal nach unten, manchmal war er komplett verschwunden. Aber gestaucht war er nie mehr.

Phase 2: Das v1.0 Drama

Währenddessen flackerte das “v1.0” Badge. Beim Laden da, beim Reload weg. Beim dritten Reload wieder da, beim vierten wieder weg. Ein perfekter Zufallsgenerator.

“display: inline-block”, versuchte ich. Hat nicht geholfen.

“position: relative?” Nö.

“Vielleicht liegt es am SVG?” Nein, lag es nicht.

Phase 3: Die Scrollbar

Irgendwann war der Balken dann akzeptabel (nicht perfekt, aber akzeptabel), dafür hatte die Topologie plötzlich einen horizontalen Scrollbar. Am unteren Rand. Der hat beim Scrollen mit dem Finger die ganze Seite verschoben.

Die SVG-Linien waren zu lang. 1180 Pixel bei einem Viewport von 1200 - das ging schief. Also kürzen ich auf 1160. Dann auf 1140. Der Scrollbar blieb.

“Es liegt an den Layer-Linien”, dachte ich. “Ich muss sie kürzen.”

Habe ich. Hat nicht gereicht.

Phase 4: Der Komplette Kollaps

Nach Commit 15 oder so (ja, wirklich 15+ commits für drei Pixel) war die Legende komplett verschwunden. Einfach weg. Nix mehr da.

Da wo die Legende war, ist jetzt nur noch der Schriftzug // Verbindungstypen und dann… nichts.

Zurück auf Start. Git ist ein Segen.

Phase 5: Der Rewrite

Irgendwann habe ich beschlossen: Kompletter Rewrite.

Weg mit Flexbox, her mit CSS Grid. Einfache <span> statt komplexer <div> Konstruktionen. Feste Maße, keine Flex-Properties, keine fancy Alignments.

.legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.legend-line {
    display: inline-block;
    width: 20px;
    height: 3px;
    border-radius: 2px;
}

Das war’s. Drei Zeilen CSS, die 20 commits ersetzt haben.

Was ich gelernt habe

Flexbox ist mächtig, aber tückisch. Besonders wenn du align-items mit unterschiedlich langen Texten kombinierst. Dann streckt sich irgendwas - nur nicht das, was du willst.

Manchmal muss man alles wegwerfen. Ich hätte 10 commits früher den Rewrite machen sollen. Hätte, hätte, Fahrradkette.

Git ist dein Freund. Ohne git reset --hard hätte ich jetzt eine Seite ohne Legende. Oder mit dreieckigen Balken. Oder mit Regenbogenfarben (ja, den Konami-Code habe ich auch noch eingebaut, aber das ist eine andere Geschichte).

20 Commits für 3 Pixel. Das ist Frontend-Entwicklung in einer Nussschale.

Das Endergebnis

Die Homelab-Seite läuft jetzt. Keine gestreckten Balken, kein flackerndes Badge, keine Scrollbars. Nur ein sauberes Grid mit fünf Farbbalken, die alle gleich aussehen.

P.S.: Der grüne Balken ist immer noch 3px hoch. Nicht 4px. Nicht 2px. Genau 3px. Und ich würde lügen, wenn ich sage, dass ich nicht 5 Minuten lang auf ihn gestarrt habe, um mich zu vergewissern.

P.P.S.: Falls du ähnliche CSS-Probleme hast: Grid statt Flex. Immer. Vertrau mir.