Responsive Views

← Views
STRVCT

Automatic viewport compaction, last-column stretching, and per-node width hooks without per-screen layout code.

Overview

Responsive behavior in STRVCT is not a separate rendering mode or set of CSS breakpoints. The same master-detail composition that produces a multi-column Miller view on a wide desktop produces a one-column stack with breadcrumbs on a phone, because SvStackView measures available width and automatically collapses columns that would overflow the viewport.

This behavior—automatic collapsing—falls out of the same primitives used for navigation at any width; there is zero separate "mobile" code path in the view hierarchy.

Wide Desktop Viewport (> 800px) Column 1 Expanded Column 2 Expanded Column 3 Expanded Narrow Mobile Viewport (< 480px) Breadcrumbs: Workspace > Projects Column 3 (Active Column - 100% Width) Columns 1 & 2 auto-collapsed (display: none)

The Two Layout Mechanisms

1. Compaction (compactNavAsNeeded)

SvStackView.compactNavAsNeeded() walks the stack chain from outermost (leftmost) to innermost (rightmost), summing target widths against available viewport space (topViewWidth()):

  • Fits: The column is uncollapse()d and displayed.
  • Overflows: Earlier columns are collapse()d (display: none). The current (deepest) column stays visible as long as possible.

2. Last-Column Stretch (updateWidthForWindow)

SvNavView.updateWidthForWindow() determines width for visible columns:

  • If targetWidth() >= windowWidth, the column takes width: 100%.
  • If a column is the last visible column AND windowWidth < targetWidth * 2, it stretches to width: 100% to fill available slack instead of leaving dead space.

Per-Node Layout Protocol Hooks

Domain nodes can influence layout without writing custom view code:

Node MethodPurpose & Behavior
nodeMinTileWidth()Declares a minimum tile width floor for the column. Useful for wide property inspectors.
nodeFillsRemainingWidth()When true, forces the column to stretch to 100% width whenever it is the last visible column. Useful for document editors or chat logs.

Viewport vs Device Detection

  • SvWebBrowserWindow.shared().width(): Returns current viewport width in CSS pixels. Always use this for layout and compaction decisions.
  • SvWebBrowserWindow.shared().isOnMobile(): User-agent string match (iPhone/Android). Use only for touch-gesture or platform-specific permissions, never for column width sizing.

iOS Safari Visual Viewport Note

On iPhone Safari, CSS 100vh units fail to subtract the animated URL bar area (~40px overflow). The reliable fix is binding root page height to window.visualViewport.height during visualViewport.resize and orientationchange events.