a2ui-project / a2ui-project/a2ui

React (v0.9) basic catalog `Image` distorts when placed in a flex `Row`

Aperta Adatta ai principianti
#1,297 1 commento 1 reazione 1 assegnatario Rivendicata da @ditman Vedi su GitHub
component: react renderer P2 type: bug type: feature/enhancement
Lingua principale
TypeScript
Stelle
16.4k
Fork
1.3k
Merge medio
3g 15h
PR unite (30g)
134

Descrizione

Running the react shell with restaurant finder, the images rendered inside card layouts appear visibly stretched/squished--pixels are scaled non-uniformly to match the row's height.

## Repro steps

1. Run the restaurant-finder agent (`samples/agent/adk/restaurant_finder`).
2. Run the React shell (`samples/client/react/shell`).
3. Open the app at `http://localhost:5003/` and submit any prompt (or use `?mock=true` to skip the agent call).
4. Observe the restaurant photos in the result cards.

Image

## Root cause

The basic catalog's `Row` defaults to `align-items: stretch`, so any flex child gets stretched to the row's height. The React `Image` renders a bare `` whose default `objectFit` is `'fill'`, causing the image to scale non-uniformly along the stretched axis.

Related: https://github.com/google/A2UI/issues/1298

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Look at the basic catalog's `Row` component and its default `align-items: stretch` style. The React `Image` component renders an `` with default `objectFit: 'fill'`. The fix likely involves adjusting the `Image` component's style or the `Row`'s alignment for these images. Start by running the restaurant-finder agent and React shell to reproduce the issue, then modify the relevant component files in the samples/client/react directory.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Tranquilla
Chiarezza
Specificata chiaramente
Idoneità per principianti
70/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.