Improve aspect ratios on mobile

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)
+  else if (tileAspectRatio < minAspectRatio)
-    tileHeight = tileWidth / tileMinAspectRatio;
+    tileHeight = tileWidth / minAspectRatio;
   // TODO: We might now be hitting the minimum height or width limit again
 
   return { tileWidth, tileHeight, gap, columns };

src/grid/OneOnOneLayout.module.css

@@ -27,11 +27,18 @@ limitations under the License.
 
 .local {
   position: absolute;
-  inline-size: 180px;
+  inline-size: 135px;
-  block-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;