sw-ui-responsive-container

Aspect-ratio-aware sizing wrapper used to host call surfaces inside <sw-ui-modal> so the experience adapts gracefully from ultra-wide monitors down to phones.

1
<sw-ui-responsive-container aspect-ratio="16/9">
2
  <sw-call-media></sw-call-media>
3
</sw-ui-responsive-container>

Applies a tiered set of CSS rules based on viewport size:

• ≥ 1280 px (large monitors): 80 vw, 16:9 aspect, height capped at (width × 9 / 16) + 300 px to leave room for controls.
• 600 px – 1279 px (laptops, small monitors): 90 vw, same 16:9 baseline.
• ≤ 600 px (mobile portrait): 100 vw minus a 20 px gutter, fluid height up to 85 svh — drops the strict aspect ratio so portrait content fills the screen.
• ≤ 500 px tall, ≥ 600 px wide (landscape phones, short windows): 90 vw, 90 vh max, aspect ratio relaxed.

Class: SwUiResponsiveContainer · Module: packages/web-components/src/components/UI/layout/sw-ui-responsive-container.ts

class: SwUiResponsiveContainer, sw-ui-responsive-container

Slots