Skip to content

Let a fill-height isolated template fill the host-mode top card instead of collapsing to its padding #6051

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tintinthong wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Let a fill-height isolated template fill the host-mode top card instead of collapsing to its padding #6051

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/host/app/components/host-mode/stack-item.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,16 @@ export default class HostModeStackItem extends Component<Signature> {
padding-top: var(--boxel-sp-2xl);
z-index: 0;
pointer-events: none;
/* The top card is content-sized (height: auto, see
styleForStackedCard) with an 80cqh floor so the page scrolls as a
page. But a percentage height never resolves against min-height, so
an isolated template that fills its container (height: 100%,
container-type: size, cqh units) had nothing to fill and collapsed
to its padding. A grid area IS definite for its item even when the
grid's own height is auto: the single 1fr row hands the card the
floor when content is short and still grows when it is tall. */
display: grid;
grid-template-rows: minmax(0, 1fr);
Comment on lines +227 to +228

@chatgpt-codex-connector chatgpt-codex-connector Bot Sep 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Give the grid a real block-size floor

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 👍 / 👎.

}

.host-mode-stack-item:not(.buried) {
Expand Down
36 changes: 36 additions & 0 deletions packages/host/tests/acceptance/host-mode-test.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -686,6 +686,42 @@ module('Acceptance | host mode tests', function (hooks) {
assert.dom('[data-test-pet-isolated="Mango"]').exists();
});

test('a fill-height isolated template fills the top stack card instead of collapsing to its content', async function (assert) {
// Pet's isolated root is `height: 100%`. The top card is content-sized
// (height: auto) with a min-height floor, and a percentage height never
// resolves against min-height — so without a definite box handed down by
// the stack item, the root collapsed to the height of its <h2>.
await visit('/test');
await click('[data-test-boxel-filter-list-button="All Cards"]');
await waitFor('[data-test-cards-grid-item]');
await click(
`[data-test-cards-grid-item="${testHostModeRealmURL}Pet/mango"]`,
);
await waitFor('[data-test-pet-isolated="Mango"]');

let item = document.querySelector<HTMLElement>(
`[data-test-host-mode-stack-item="${testHostModeRealmURL}Pet/mango"]`,
)!;
let root = document.querySelector<HTMLElement>(
'[data-test-pet-isolated="Mango"]',
)!.parentElement!;
let itemStyle = getComputedStyle(item);
let offered =
item.getBoundingClientRect().height -
parseFloat(itemStyle.paddingTop) -
parseFloat(itemStyle.paddingBottom);
let filled = root.getBoundingClientRect().height;

assert.ok(
filled >= offered - 1,
`isolated root fills the stack item (root ${filled}px, item offers ${offered}px)`,
);
assert.ok(
filled > root.querySelector('h2')!.getBoundingClientRect().height,
'root is taller than its own content',
);
});

test('viewCard tabs persist after stacking and closing cards in host mode', async function (assert) {
let primaryCardId = `${testHostModeRealmURL}ViewCardDemo/index`;
let firstStackCardId = `${testHostModeRealmURL}ViewCardDemo/secondary`;
Expand Down
Loading