Skip to content

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

@andrewkolos

Description

@andrewkolos

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 <img> whose default objectFit is 'fill', causing the image to scale non-uniformly along the stretched axis.

Related: #1298

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Todo

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions