Let a fill-height isolated template fill the host-mode top card instead of collapsing to its padding - #6051
Let a fill-height isolated template fill the host-mode top card instead of collapsing to its padding#6051tintinthong wants to merge 1 commit into
Conversation
…ad of collapsing to its padding Since #3934 the top card of the host-mode stack is content-sized (`height: auto`) with an 80cqh floor, so a published page scrolls as a page. Operator mode hands its stack item a definite height instead. The same isolated template therefore meets two sizing contracts, and one of them silently breaks it: a percentage height never resolves against `min-height`, so a root that fills its container (`height: 100%`, `container-type: size`, cqh units) has nothing to fill in host mode and collapses to its padding — a ~150px strip showing whatever overflowed. Make the stack item a single-row grid. A grid area is definite for its item even when the grid's own height is auto, so the `1fr` row hands `.stack-item-card` the floor when content is short and still grows when content is tall. Every layer below already passes `height: 100%` down (`.boxel-card-container`, `.field-component-card.isolated-format`), so the fix is the one missing link; `height: auto` and the page-scroll behaviour stay as they are. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ebee1bfb01
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| display: grid; | ||
| grid-template-rows: minmax(0, 1fr); |
There was a problem hiding this comment.
The top item still receives height: auto from styleForStackedCard, and neither this rule nor its ancestors set the claimed min-height/80cqh floor on the absolutely positioned item. With an indefinite grid height, the 1fr track is intrinsically sized from the card's content; making it a grid therefore leaves the Pet root at its <h2> height, so the new assertion at lines 719–721 fails and fill-height production cards remain collapsed. Add an actual viewport-relative minimum/definite block-size before relying on the grid track to propagate it.
Useful? React with 👍 / 👎.
Preview deploymentsHost Test Results 1 files 1 suites 2h 5m 13s ⏱️ Results for commit ebee1bf. For more details on these errors, see this check. Realm Server Test Results 1 files 203 suites 1h 17m 29s ⏱️ Results for commit ebee1bf. |
1 participant
The bug, as a user sees it
Publish a realm whose card looks fine in operator mode, open it on the
*.boxel.spacesite with?hostModeStack=[…], and the top stack card renders as a ~150px strip across the top of the page: the card's ground colour, its top padding, one link chip that overflowed a zero-height layout, and the close button. The headline never appears. Underneath, the pinned tile on the workspace Home shows the same card rendering perfectly — so it isn't the card's data, it's the container it was handed.Reproduced with a poster card whose isolated root is
height: 100%; container-type: size(type sized incqh). Any isolated template that fills its container hits it; the realm's testPetcard (.pet-isolated { height: 100% }) is enough.Why the top card is
height: auto#3934 (
65e8163504, host mode stack layering and scroll update) made the host-mode top card content-sized with an80cqhfloor, and moved scrolling to.innerso a published page scrolls like a page instead of showing a scrollbar inside the card. That's the right call for a published site — a long document should grow.The symmetry it broke: operator mode's stack item hands every card a definite height (
height: calc(100% - Npx)) and its.stack-item-cardis a grid that propagates that height down the chain (see the comment block atoperator-mode/stack-item.gts~L1242: "Propagate height through the chain…"). Host mode's@media printrules restore exactly that definite contract for printing. So the sameisolatedformat meets two contracts, and nothing in the chain below can tell which one it's in.The specific CSS fact: a percentage height never resolves against
min-height.height: 100%on a child of anauto-height box computes toautoeven when that box has a floor. Undercontainer-type: sizecontent contributes nothing, so the root has literally no height.The fix
Make the stack item a single-row grid:
A grid area is definite for its item even when the grid's own height is
auto, so the row hands.stack-item-cardthe floor when content is short — and still grows when content is tall.height: auto, the80cqhfloor and the page-scroll behaviour from #3934 are untouched. Every layer below already passesheight: 100%down (.boxel-card-container,.field-component-card.isolated-format), so this is the one missing link.Measured through the real element chain (stack item →
.stack-item-card→CardContainer.host-mode-card→field-component-card.isolated-format→ root) at a 490px floor:height: 100%+container-type: sizePetrootheight: 100%<h2>Test
Adds an acceptance test in
host-mode-test.gtsthat stacksPet/mangoand asserts itsheight: 100%root fills the stack item's content box (item height minus its paddings) and is taller than its own<h2>. The assertion is relative, so it holds under#ember-testingscaling and any floor value.I was not able to run the host acceptance suite locally from this checkout — relying on CI for the end-to-end confirmation; the chain measurements above are from a standalone reproduction of the exact DOM/CSS chain in Chrome.
🤖 Generated with Claude Code