Merge pull request #2514 from robintown/mobile-layouts

Improve the layouts on small mobile calls

src/grid/CallLayout.ts

@@ -95,7 +95,6 @@ export interface GridArrangement {
 
 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.
@@ -138,15 +137,10 @@ export function arrangeTiles(
 
   // 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 < minAspectRatio)
-    tileHeight = tileWidth / minAspectRatio;
+  else if (tileAspectRatio < tileMinAspectRatio)
+    tileHeight = tileWidth / tileMinAspectRatio;
 
   return { tileWidth, tileHeight, gap, columns };
 }

src/grid/OneOnOneLayout.module.css

@@ -26,18 +26,11 @@ limitations under the License.
 
 .local {
   position: absolute;
-  inline-size: 135px;
-  block-size: 160px;
+  inline-size: 180px;
+  block-size: 135px;
   inset: var(--cpd-space-4x);
 }
 
-@media (min-width: 600px) {
-  .local {
-    inline-size: 170px;
-    block-size: 110px;
-  }
-}
-
 .spotlight {
   position: absolute;
   inline-size: 404px;

src/grid/SpotlightExpandedLayout.module.css

@@ -25,11 +25,18 @@ limitations under the License.
 
 .pip {
   position: absolute;
-  inline-size: 180px;
-  block-size: 135px;
+  inline-size: 135px;
+  block-size: 160px;
   inset: var(--cpd-space-4x);
 }
 
+@media (min-width: 600px) {
+  .pip {
+    inline-size: 180px;
+    block-size: 135px;
+  }
+}
+
 .pip[data-block-alignment="start"] {
   inset-block-end: unset;
 }