Add built-in padding to the Core Catalog items

_↴ Ported from [flutter/genui#562](https://github.com/flutter/genui/issues/562) — originally opened by [jacobsimionato](https://github.com/jacobsimionato) on 2025-11-19._
_Original labels: P2, front-line-handled, second-line-triaged, a: core_catalog_

---

A2UI intentionally doesn't not let the LLM choose padding. Instead, we the renderer is responsible for this.

Our core catalog items have no built-in padding, so everything looks bad in the simple chat app.

How about these rules:
- Leaf components (e.g. text, image etc) add padding around themselves on every dimension by default. They can be special cased via usage hints to not do this, e.g. a "header" image has no top or side padding, but does have bottom padding.
- Container components which render nothing add no padding (e.g. Row, Column etc)
- Container components which have a border (e.g. Card) add padding around themselves, but not around their children

---

### 2 comment(s) from the original issue

**[jacobsimionato](https://github.com/jacobsimionato)** commented on 2025-11-21:

See example of poor padding:

---

**[jacobsimionato](https://github.com/jacobsimionato)** commented on 2026-01-21:

Downgrading to P2, because we decided that there are a couple of other more important steps to building out the standard catalog, so @andrewkolos probably won't get to it right away.

Find the core catalog items in the codebase, likely under a directory like 'core_catalog'. Examine how leaf components (text, image) and container components (Row, Column, Card) are currently rendered. The change involves modifying these components to add default padding based on the proposed rules. Look for existing styling or layout logic to understand where padding should be applied. Test changes in the simple chat app to verify the visual improvement.

Escrito por el modelo de indexación a partir del texto del issue.