# Layout der Elemente

Das Raster mit sechs Spalten: Breiten, Höhen, Mindestgrößen und was die App selbst zurechtrückt.

[Elemente in einer Nachricht](https://packlets.app/docs/nachrichten-elemente.md) stehen in einem Raster. Mit zwei Feldern bestimmst du, wie groß ein Element ist: `width` und `height`. Den Rest erledigt die App.

## Das Raster

Die Fläche unter dem Text einer Nachricht ist in **6 Spalten** geteilt. `width` sagt, wie viele davon ein Element belegt:

| `width` | Breite |
|---|---|
| `6` (Standard) | die ganze Breite |
| `3` | die Hälfte |
| `2` | ein Drittel |

Die Elemente füllen die Zeilen von links nach rechts, in der Reihenfolge deiner Liste. Passt das nächste nicht mehr in die Zeile, beginnt eine neue.

Die Liste dazu, im Feld `elements` von `POST /v1/push`:

```json
[
  {"type": "toggle", "id": "wartung",  "label": "Wartung", "value": true, "width": 3},
  {"type": "toggle", "id": "deploys",  "label": "Deploys", "width": 3},
  {"type": "text",   "id": "neustart", "text": "Neu starten", "style": "caption"},
  {"type": "button", "id": "api",      "label": "API",  "width": 2, "height": 56},
  {"type": "button", "id": "shop",     "label": "Shop", "width": 2, "height": 56},
  {"type": "button", "id": "db",       "label": "DB",   "style": "secondary", "width": 2, "height": 56}
]
```

## Die Höhe

Ohne `height` ist ein Element so hoch, wie sein Inhalt braucht. Mit `height` gibst du eine **Mindesthöhe** in Punkten an. Braucht der Inhalt mehr, wird das Element höher.

Dafür ist `height` gut:

- Ein Button wird zur großen Kachel, zum Beispiel `"height": 56`.
- Ein Diagramm bekommt höhere Balken, zum Beispiel `"height": 220`.

Ein Text hat keine `height`. Er ist immer so hoch wie sein Inhalt.

## Mindestgrößen

Damit alles lesbar und gut antippbar bleibt, hat jedes Element Grenzen:

| Element | Breite mindestens | Höhe |
|---|---|---|
| `text` | 2 Spalten | nach Inhalt |
| `button` | 2 Spalten | 44 bis 240 |
| `toggle` | 3 Spalten | 64 bis 240 |
| `input` | 3 Spalten | 160 bis 400 |
| `chart` | 3 Spalten | 120 bis 480 |
| `table` | 3 Spalten | 80 bis 800 |

Gibst du weniger oder mehr an, lehnt Samy das nicht ab, sondern bringt den Wert auf die Grenze. Was geändert wurde, steht in der Antwort von `POST /v1/push` im Feld `warnings`:

```json
{
  "message_id": "5b0c1a52-7c1e-4a43-9d0b-2f6f0c7d1e11",
  "warnings": ["wartung: width 2 → 3 (Mindestbreite für toggle)", "db: height 30 → 44 (Mindesthöhe für button)"]
}
```

Nur eine `width` außerhalb von 1 bis 6 ist ein Fehler (`400`).

## Was die App selbst zurechtrückt

Handys sind verschieden breit, und eine Nachricht ist schmaler als der Bildschirm. Die App passt dein Layout deshalb an, damit es immer aufgeräumt aussieht:

- **Der Inhalt bekommt Platz.** Passt eine Beschriftung nicht in die angegebene Breite, macht die App das Element breiter. Passt es dann nicht mehr in die Zeile, rutscht es in die nächste.
- **Zeilen sind immer voll.** Bleibt in einer Zeile Platz frei, werden ihre Elemente breiter. Ein einzelnes Element mit `width: 3` steht also über die ganze Breite.
- **Gleiche Höhe.** Karten und Buttons in einer Zeile sind gleich hoch. Text bleibt oben links.
- **Diagramme** zeigen bei vielen Punkten nur jede zweite oder dritte Beschriftung.

Dein `width` ist also ein Wunsch, kein Befehl. Zwei Elemente mit `width: 3` und langen Beschriftungen stehen in einer Nachricht oft untereinander. Plane grob und sieh dir das Ergebnis auf dem Handy an.

## Tipps

- Fang ohne `width` an. Alles untereinander sieht immer ordentlich aus.
- Halt Beschriftungen kurz, dann passen zwei Elemente nebeneinander.
- Drei Buttons mit kurzer Beschriftung, `width: 2` und `height: 56` ergeben eine Reihe Kacheln.
- Ein Text mit `style: "caption"` über einer Gruppe wirkt wie eine Zwischenüberschrift.
- Fertige Beispiele zum Abschauen stehen unter [Vorlagen](https://packlets.app/docs/vorlagen.md).