Skip to content

host: expand isolated view to full width with floating top bar#4626

Open
christse wants to merge 15 commits into
mainfrom
host-expanded-isolated
Open

host: expand isolated view to full width with floating top bar#4626
christse wants to merge 15 commits into
mainfrom
host-expanded-isolated

Conversation

@christse
Copy link
Copy Markdown

@christse christse commented May 1, 2026

Demo: https://screen.studio/share/zXdc2bHg

Adds an "expand" toggle on the top stack-item's CardHeader that morphs the card to full width below a floating top bar. The bar gains glass- morphism while expanded and the CardHeader portals into a center pill in the bar (replacing the inline header). View-transition pins the bar across the morph so the expand/collapse animates as a single shape.

Positioning is driven by a single CSS variable, --stack-padding-top (item-height + 2 × spacing), shared by:

  • .submode-layout-top-bar height (locked, so portaled content can't push it taller)
  • .operator-mode-stack padding-top when an item is expanded (forced full value, overriding stack-medium/small-padding-top reductions that are correct for the buried-stack visual but not when expanded)
  • .item.expanded inset: 0 of .inner (which sits at y=stack-padding-top)

Result: card top sits flush at bar bottom — pixel-identical to host-mode's in-flow card top. No calc(100vh - X), no JS measurement, no !important.

Buried siblings fade when a top card is expanded; neighbor-stack-trigger arrows hide; cards-grid (Workspace "All Cards") opts out of expand since its child tile overlays would overlap. Per-card expand intent persists on operatorModeStateService (keyed by stack-item id) so it survives buries and restores when the card pops back to the top.

@christse christse requested a review from burieberry May 1, 2026 19:06
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 1, 2026

Preview deployments

Host Test Results

    1 files  ±0      1 suites  ±0   1h 42m 31s ⏱️ - 1m 2s
2 663 tests ±0  2 648 ✅ ±0  15 💤 ±0  0 ❌ ±0 
2 682 runs  ±0  2 667 ✅ ±0  15 💤 ±0  0 ❌ ±0 

Results for commit cb62c0f. ± Comparison against earlier commit 7236445.

Realm Server Test Results

    1 files  ±0      1 suites  ±0   8m 59s ⏱️ -27s
1 377 tests ±0  1 377 ✅ ±0  0 💤 ±0  0 ❌ ±0 
1 458 runs  ±0  1 458 ✅ ±0  0 💤 ±0  0 ❌ ±0 

Results for commit cb62c0f. ± Comparison against earlier commit 7236445.

@burieberry burieberry force-pushed the host-expanded-isolated branch from 59aa430 to 61e22be Compare May 13, 2026 22:31
christse and others added 11 commits May 14, 2026 23:05
Adds an "expand" toggle on the top stack-item's CardHeader that morphs
the card to full width below a floating top bar. The bar gains glass-
morphism while expanded and the CardHeader portals into a center pill
in the bar (replacing the inline header). View-transition pins the bar
across the morph so the expand/collapse animates as a single shape.

Positioning is driven by a single CSS variable, --stack-padding-top
(item-height + 2 × spacing), shared by:
  * .submode-layout-top-bar height (locked, so portaled content can't
    push it taller)
  * .operator-mode-stack padding-top when an item is expanded (forced
    full value, overriding stack-medium/small-padding-top reductions
    that are correct for the buried-stack visual but not when expanded)
  * .item.expanded inset: 0 of .inner (which sits at y=stack-padding-top)

Result: card top sits flush at bar bottom — pixel-identical to host-mode's
in-flow card top. No calc(100vh - X), no JS measurement, no !important.

Buried siblings fade when a top card is expanded; neighbor-stack-trigger
arrows hide; cards-grid (Workspace "All Cards") opts out of expand since
its child tile overlays would overlap. Per-card expand intent persists on
operatorModeStateService (keyed by stack-item id) so it survives buries
and restores when the card pops back to the top.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@burieberry burieberry force-pushed the host-expanded-isolated branch from 61e22be to 541036a Compare May 15, 2026 03:05
@burieberry burieberry force-pushed the host-expanded-isolated branch from 0f57fad to 7236445 Compare May 15, 2026 20:57
@burieberry burieberry requested a review from a team May 15, 2026 21:19
Copy link
Copy Markdown
Contributor

@lukemelia lukemelia left a comment

Choose a reason for hiding this comment

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

I thought that we were only going to show the Maximize icon in the header after you had expanded, and were going to have a menu item for to initiate expanding.

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.

4 participants