Skip to content

Commit f24bda9

Browse files
authored
fix(home): drop letterbox band on deck example-prompt previews (#5105)
The baked deck preview (od.bakedPreview) is captured at the 1.31 tile aspect, so a deck's fixed 16:9 stage self-letterboxes with a dark --stage-bg band baked into the poster/clip. The existing data-od-mode override only reframes the LIVE iframe surface, but the Home example-prompt tiles render the BAKED media (preferBaked) — which was object-fit:cover'd and top-anchored, so the top letterbox band showed as a black strip above every deck slide. Mirror the iframe deck treatment for the baked media: render the clip in a native 16:9 box centered in the standard cell and center-crop it, so cover() strips exactly the baked letterbox and the slide reads edge-to-edge with no dark band. Non-deck tiles keep the top-anchored 1.31 clip so web-page hero headlines stay in frame.
1 parent 32011bd commit f24bda9

1 file changed

Lines changed: 26 additions & 0 deletions

File tree

apps/web/src/styles/home/home-hero.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2398,6 +2398,32 @@
23982398
transform: none;
23992399
}
24002400

2401+
/* The baked deck preview (od.bakedPreview) is captured at the 1.31 tile aspect,
2402+
so the deck's fixed 16:9 stage self-letterboxes with a dark --stage-bg band
2403+
baked into the poster/clip. The iframe rule above only fixes the LIVE surface;
2404+
these preset tiles render the BAKED media (preferBaked), so mirror the same
2405+
treatment for it: render the clip in a native 16:9 box centered in the
2406+
standard cell and center-crop it, so object-fit:cover strips exactly the baked
2407+
letterbox and the slide reads edge-to-edge with no dark band. (Non-deck tiles
2408+
keep the top-anchored 1.31 clip below so web-page hero headlines stay in
2409+
frame.) */
2410+
.home-hero__plugin-preset[data-od-mode="deck"] .plugins-home__preview--media {
2411+
display: flex;
2412+
align-items: center;
2413+
justify-content: center;
2414+
}
2415+
.home-hero__plugin-preset[data-od-mode="deck"] .plugins-home__media {
2416+
position: relative;
2417+
inset: auto;
2418+
width: 100%;
2419+
height: auto;
2420+
aspect-ratio: 16 / 9;
2421+
}
2422+
.home-hero__plugin-preset[data-od-mode="deck"] .plugins-home__media-img,
2423+
.home-hero__plugin-preset[data-od-mode="deck"] .plugins-home__media-video {
2424+
object-position: center;
2425+
}
2426+
24012427
/* Baked clips are framed 1.31:1 for the Community grid; the wider preset tiles
24022428
would otherwise object-fit:cover-crop the hero out of the middle. Anchor to
24032429
the top so the hero headline stays in frame. Scoped to the preset cards. */

0 commit comments

Comments
 (0)