Merge pull request #2531 from robintown/iterate-margins

Add back some margins to the interface

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"] {

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;

src/room/InCallView.tsx

@@ -496,7 +496,16 @@ export const InCallView: FC<InCallViewProps> = ({
 
   return (
     <div className={styles.inRoom} ref={containerRef}>
-      {!hideHeader && windowMode !== "pip" && windowMode !== "flat" && (
+      {windowMode !== "pip" &&
+        windowMode !== "flat" &&
+        (hideHeader ? (
+          // Cosmetic header to fill out space while still affecting the bounds
+          // of the grid
+          <div
+            className={classNames(styles.header, styles.filler)}
+            ref={headerRef}
+          />
+        ) : (
           <Header className={styles.header} ref={headerRef}>
             <LeftNav>
               <RoomHeaderInfo
@@ -513,7 +522,7 @@ export const InCallView: FC<InCallViewProps> = ({
               )}
             </RightNav>
           </Header>
-      )}
+        ))}
       <RoomAudioRenderer />
       {renderContent()}
       {footer}