From 7abb56e406765e633b031f416838585f9bfa41cd Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Thu, 1 Aug 2024 16:25:33 -0400
Subject: [PATCH] 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 |  3 ++-
 src/room/InCallView.module.css |  6 +++++
 src/room/InCallView.tsx        | 45 ++++++++++++++++++++--------------
 3 files changed, 35 insertions(+), 19 deletions(-)

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<InCallViewProps> = ({
 
   return (
     <div className={styles.inRoom} ref={containerRef}>
-      {!hideHeader && windowMode !== "pip" && windowMode !== "flat" && (
-        <Header className={styles.header} ref={headerRef}>
-          <LeftNav>
-            <RoomHeaderInfo
-              id={matrixInfo.roomId}
-              name={matrixInfo.roomName}
-              avatarUrl={matrixInfo.roomAvatar}
-              encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
-              participantCount={participantCount}
-            />
-          </LeftNav>
-          <RightNav>
-            {!reducedControls && showControls && onShareClick !== null && (
-              <InviteButton onClick={onShareClick} />
-            )}
-          </RightNav>
-        </Header>
-      )}
+      {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
+                id={matrixInfo.roomId}
+                name={matrixInfo.roomName}
+                avatarUrl={matrixInfo.roomAvatar}
+                encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
+                participantCount={participantCount}
+              />
+            </LeftNav>
+            <RightNav>
+              {!reducedControls && showControls && onShareClick !== null && (
+                <InviteButton onClick={onShareClick} />
+              )}
+            </RightNav>
+          </Header>
+        ))}
       <RoomAudioRenderer />
       {renderContent()}
       {footer}