Add back some margins to the interface

There were a couple of cases where the lack of margins after the new layout changes just looked odd. Specifically, when the header is hidden (as in embedded mode), there would be no margin at the top of the window. Also the floating tile would run directly up against the sides of the window.

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,24 +496,33 @@ export const InCallView: FC<InCallViewProps> = ({
 
   return (
     <div className={styles.inRoom} ref={containerRef}>
-      {!hideHeader && windowMode !== "pip" && windowMode !== "flat" && (
+      {windowMode !== "pip" &&
-        <Header className={styles.header} ref={headerRef}>
+        windowMode !== "flat" &&
-          <LeftNav>
+        (hideHeader ? (
-            <RoomHeaderInfo
+          // Cosmetic header to fill out space while still affecting the bounds
-              id={matrixInfo.roomId}
+          // of the grid
-              name={matrixInfo.roomName}
+          <div
-              avatarUrl={matrixInfo.roomAvatar}
+            className={classNames(styles.header, styles.filler)}
-              encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
+            ref={headerRef}
-              participantCount={participantCount}
+          />
-            />
+        ) : (
-          </LeftNav>
+          <Header className={styles.header} ref={headerRef}>
-          <RightNav>
+            <LeftNav>
-            {!reducedControls && showControls && onShareClick !== null && (
+              <RoomHeaderInfo
-              <InviteButton onClick={onShareClick} />
+                id={matrixInfo.roomId}
-            )}
+                name={matrixInfo.roomName}
-          </RightNav>
+                avatarUrl={matrixInfo.roomAvatar}
-        </Header>
+                encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
-      )}
+                participantCount={participantCount}
+              />
+            </LeftNav>
+            <RightNav>
+              {!reducedControls && showControls && onShareClick !== null && (
+                <InviteButton onClick={onShareClick} />
+              )}
+            </RightNav>
+          </Header>
+        ))}
       <RoomAudioRenderer />
       {renderContent()}
       {footer}