diff --git a/src/grid/GridLayout.module.css b/src/grid/GridLayout.module.css index 6838ae91..d8f4a6ab 100644 --- a/src/grid/GridLayout.module.css +++ b/src/grid/GridLayout.module.css @@ -40,7 +40,8 @@ limitations under the License. position: absolute; inline-size: 404px; block-size: 233px; - inset: 0; + inset-block: 0; + inset-inline: var(--cpd-space-3x); } .fixed > .slot[data-block-alignment="start"] { diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css index b8cf9f5e..caf289d7 100644 --- a/src/room/InCallView.module.css +++ b/src/room/InCallView.module.css @@ -49,6 +49,7 @@ limitations under the License. .header { position: sticky; + flex-shrink: 0; inset-block-start: 0; z-index: 1; background: linear-gradient( @@ -58,6 +59,11 @@ limitations under the License. ); } +.header.filler { + block-size: var(--cpd-space-6x); + background: none; +} + .footer { position: sticky; inset-block-end: 0; diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index c595f173..ddb046a0 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -496,24 +496,33 @@ export const InCallView: FC = ({ return (
- {!hideHeader && windowMode !== "pip" && windowMode !== "flat" && ( -
- - - - - {!reducedControls && showControls && onShareClick !== null && ( - - )} - -
- )} + {windowMode !== "pip" && + windowMode !== "flat" && + (hideHeader ? ( + // Cosmetic header to fill out space while still affecting the bounds + // of the grid +
+ ) : ( +
+ + + + + {!reducedControls && showControls && onShareClick !== null && ( + + )} + +
+ ))} {renderContent()} {footer}