Skip to content

feat: render banners at 100% width when dimensions omitted#189

Open
anonvt wants to merge 1 commit into
mainfrom
feat/responsive-default-dimensions
Open

feat: render banners at 100% width when dimensions omitted#189
anonvt wants to merge 1 commit into
mainfrom
feat/responsive-default-dimensions

Conversation

@anonvt
Copy link
Copy Markdown
Collaborator

@anonvt anonvt commented May 11, 2026

Summary

  • When <topsort-banner> is rendered without width/height attributes, the component defaulted to width=0 / height=0, producing an <img> with style=\"width:0px; height:0px\" — invisible to users but still tagged with data-ts-clickable / data-ts-resolved-bid, so analytics.js would record impressions on a zero-pixel banner.
  • Treat 0 as a "not set" sentinel and substitute width:100% / height:auto on the rendered <img> / <hls-video> and on the --ts-banner-width / --ts-banner-height host CSS variables. The banner now fills its container at the asset's native aspect ratio when dimensions are omitted.
  • The /v2/auctions request is unchanged — width/height were never part of the payload.

Reproducer

<topsort-banner id=\"teste-busca\" search-query=\"pontos\" style=\"margin: 20px 0;\">
</topsort-banner>

Before: auction succeeds, but the rendered <img> is width:0px; height:0px (invisible, still billed).
After: rendered <img> is width:100%; height:auto and visually fills its container.

Behavior change

This is a minor behavior change for integrations that omit width/height — they will now render a visible banner instead of an invisible one. Customers who set explicit dimensions are unaffected. Per-axis fallback works too: e.g. width=\"300\" with no height renders width:300px; height:auto.

Test plan

  • pnpm lint — passes (only the pre-existing biome.json warning unrelated to this change)
  • pnpm test:run — 106/106 passing, including 4 new regression tests
  • Manually verify in the demo app that a <topsort-banner> without width/height renders at the container's width

New regression tests

In src/__tests__/topsort-banner.test.ts:

  • standalone banner: <img> style is width:100%; height:auto when attributes omitted
  • standalone banner: host CSS vars are --ts-banner-width:100% / --ts-banner-height:auto
  • per-axis fallback: width set + height omitted ⇒ height:auto only
  • context-mode slots inherit responsive defaults when parent has no dimensions

Each of these fails on main (asserts 100%/auto where current code produces 0px).

🤖 Generated with Claude Code

When `<topsort-banner>` is rendered without `width`/`height` attributes,
the component defaulted to `width=0` / `height=0`, producing an `<img>`
with `style="width:0px; height:0px"` — invisible to users but still
flagged with `data-ts-clickable` / `data-ts-resolved-bid`, so impressions
were still billed against a zero-pixel banner.

Treat 0 as a "not set" sentinel and substitute `width:100%` / `height:auto`
on both the rendered `<img>`/`<hls-video>` and the `--ts-banner-width` /
`--ts-banner-height` host CSS variables. The banner now fills its container
at the asset's native aspect ratio when dimensions are omitted.

The auction request itself is unchanged — width/height were never part of
the `/v2/auctions` payload.
@anonvt anonvt requested a review from a team as a code owner May 11, 2026 23:02
@anonvt anonvt requested a review from FelipeRiveraC May 11, 2026 23:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant