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,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}