Obrázek

Co s tím bude

# Hlavička Plánu: „Přidat bod" a „Program"

## Co se dělo

Obě tlačítka měla v CSS napevno `flex: 1 1 0` — řádek se dělil přesně napůl bez
ohledu na to, jak dlouhý je popisek. „Přidat bod" je ale delší než „Program",
takže se do své poloviny nevešel: obsah přetekl vnitřní odsazení a popisek
skončil 4,7 px od pravého okraje, zatímco „Program" měl kolem sebe 13 px.
Odtud ten dojem, že text je odsunutý doprava a plus mu zůstalo daleko vlevo —
ve skutečnosti byl obsah vycentrovaný, jen přetékal na obě strany.

Naměřeno v prohlížeči na šířce řádku 368 px:

| tlačítko   | šířka | lem vlevo | lem vpravo |
|------------|-------|-----------|------------|
| Přidat bod | 100   | 4,7       | 4,7        |
| Program    | 100   | 13,0      | 13,0       |

## Co jsem změnil

`apps/web/src/styles.css`

- Šířka se už nedělí napůl, ale podle popisku (`flex: 1 1 auto`). Volné místo
  se rozdělí rovným dílem, takže obě tlačítka mají kolem textu **stejný lem** —
  přesně to „vycentrované jako Program s jeho ikonou".
- Písmo o stupeň menší (13 → 12 px), jak jste psal.
- Vnitřní odsazení 12 → 8 px, aby se popisek vešel s rezervou.
- Hlavička se nezalomí (`flex-wrap: nowrap`), aby poslední ikona nespadla
  na druhý řádek.

Po opravě na 368 px:

| tlačítko   | šířka | lem |
|------------|-------|-----|
| Přidat bod | 105,3 | 9,8 |
| Program    | 94,7  | 9,8 |

Ověřeno na šířkách 343 / 360 / 368 / 375 / 390 / 404 px — všude jedna řada
a od 360 px výš mají obě tlačítka lem na pixel stejný.

## Doplněk: mezera mezi „+" a popiskem

Po první opravě jste ještě hlásil, že mezera mezi plusem a textem je pořád
větší než u Programu a jeho ikony. Nebylo to mezerou v CSS — ta je u obou
tlačítek stejných 8 px. Rozdíl dělá samotná ikona:

| ikona | rozsah kresby | prázdno po stranách čtverce |
|-------|---------------|------------------------------|
| `Plus` (+) | 16 z 24 jednotek | 3 px |
| `ListTree` (Program) | 20 z 24 jednotek | 1,5 px |

Plus svůj čtverec nevyplní, takže optická mezera byla 11 px proti 9,5 px
u Programu. Navíc končí tenkým ramínkem, kdežto ikona Programu třemi plnými
čárkami — konec působí lehčeji a rozdíl vypadá ještě větší.

Srovnáno zápornými okraji u plusu: vlevo −1,5 px (geometrický rozdíl),
vpravo −2,5 px, o pixel víc kvůli tomu lehčímu konci.

Výsledek na šířce řádku 368 px:

| | lem vlevo | mezera ikona→text | lem vpravo |
|---|---|---|---|
| Přidat bod | 12,31 | 8,5 | 10,81 |
| Program | 12,31 | 9,5 | 10,83 |

## Nasazeno

Commit `7540c7b`, na produkci 4. 9. 2026. Ověřeno v nasazeném
`assets/index-29OKe_uH.css` na https://vydaje.dalcortile.cz.

Diskuse

Zatím tu nic není. Napište, co se ještě hodí vědět, nebo přiložte další obrázek.