Globální white-space nowrap na tlačítkách vytlačil kritické tlačítko mimo modal

Symptom

Uživatel v terénu hlásí „nejde odeslat dokument k podpisu”. V lozích nula chyb, na API akce nepřišel jediný požadavek. Na vývojářově velkém monitoru vše funguje. Backend po ručním otestování funguje.

Root cause

Den předtím nasazená responzivní oprava zavedla globální pravidlo:

button { white-space: nowrap; }

Záměr: text tlačítka se nemá lámat na dva řádky („Nový e-mail”). Vedlejší efekt: tlačítka už nemohla zmenšit svou šířku zalomením textu. V patičce modalu s řadou tlačítek ve flex kontejneru bez flex-wrap se řada přestala vejít a poslední tlačítko (akce „odeslat k podpisu”) přeteklo mimo modal — na 1280px okně měl jeho pravý okraj 1287 px. Na 1440+ px se vešlo, proto to při ověřování prošlo.

Dvojitá past: každé tlačítko zvlášť vypadalo v pořádku a přetečení nastalo jen při konkrétní kombinaci šířky okna a počtu/velikosti tlačítek (dlouhý label s číslem dokladu).

Řešení

Doplnit flex-wrap do všech akčních lišt/patiček modalů:

<div class="flex flex-wrap items-center justify-between gap-y-2 ...">

Tlačítka se zalomí na další řádek místo přetečení. Sweep přes grep:

grep -rn 'border-t.*justify-between\|justify-between.*border-t' src/components | grep -v flex-wrap

Jak to poznat příště

• „Tlačítko zmizelo/nejde kliknout” + nula requestů v access logu = hledej CSS overflow, ne backend
• Po každé globální CSS změně: projít flex kontejnery bez wrap + vizuální kontrola na 1280 px
• V testu viditelnosti: getBoundingClientRect().right <= window.innerWidth