From 7526826b0c01c6f6e70db4176ece928b92083a85 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Thu, 18 Jul 2024 11:01:21 -0400
Subject: [PATCH] Improve aspect ratios on mobile

---
 src/grid/CallLayout.ts             | 11 +++++++++--
 src/grid/OneOnOneLayout.module.css | 11 +++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/grid/CallLayout.ts b/src/grid/CallLayout.ts
index e97b18a2..e0054a1c 100644
--- a/src/grid/CallLayout.ts
+++ b/src/grid/CallLayout.ts
@@ -92,6 +92,7 @@ export interface GridArrangement {
 const tileMinHeight = 130;
 const tileMaxAspectRatio = 17 / 9;
 const tileMinAspectRatio = 4 / 3;
+const tileMobileMinAspectRatio = 2 / 3;
 
 /**
  * Determine the ideal arrangement of tiles into a grid of a particular size.
@@ -136,12 +137,18 @@ export function arrangeTiles(
     tileHeight = (minHeight - (rows - 1) * gap) / rows;
   }
   if (tileHeight < tileMinHeight) tileHeight = tileMinHeight;
+
   // Impose a minimum and maximum aspect ratio on the tiles
   const tileAspectRatio = tileWidth / tileHeight;
+  // We enforce a different min aspect ratio in 1:1s on mobile
+  const minAspectRatio =
+    tileCount === 1 && width < 600
+      ? tileMobileMinAspectRatio
+      : tileMinAspectRatio;
   if (tileAspectRatio > tileMaxAspectRatio)
     tileWidth = tileHeight * tileMaxAspectRatio;
-  else if (tileAspectRatio < tileMinAspectRatio)
-    tileHeight = tileWidth / tileMinAspectRatio;
+  else if (tileAspectRatio < minAspectRatio)
+    tileHeight = tileWidth / minAspectRatio;
   // TODO: We might now be hitting the minimum height or width limit again
 
   return { tileWidth, tileHeight, gap, columns };
diff --git a/src/grid/OneOnOneLayout.module.css b/src/grid/OneOnOneLayout.module.css
index 0d2ad4ff..54c39d25 100644
--- a/src/grid/OneOnOneLayout.module.css
+++ b/src/grid/OneOnOneLayout.module.css
@@ -27,11 +27,18 @@ limitations under the License.
 
 .local {
   position: absolute;
-  inline-size: 180px;
-  block-size: 135px;
+  inline-size: 135px;
+  block-size: 160px;
   inset: var(--cpd-space-4x);
 }
 
+@media (min-width: 600px) {
+  .local {
+    inline-size: 170px;
+    block-size: 110px;
+  }
+}
+
 .spotlight {
   position: absolute;
   inline-size: 404px;