Mv 297 adjust grid mobile

assets/css/app.css

@@ -46,12 +46,12 @@
   --padding: 16px;
 
   max-height: calc(
-    100vh - var(--padding) - var(--navbar) - var(--gap) - var(--gap) - var(--menuTooltip) - var(--padding)
+    100dvh - var(--padding) - var(--navbar) - var(--gap) - var(--gap) - var(--menuTooltip) - var(--padding)
   );
 }
 
 /* allows for centering leftover elements in the last row of the grid */
-@media (min-width: 769px) {
+@media (min-width: 640px) {
   /* two columns -> one element left*/
   .video-tile-grid-2:last-child:nth-child(2n - 1) {
     grid-column-end: 4;

assets/src/features/home-page/components/HomePageLayout.tsx

@@ -13,7 +13,7 @@ const HomePageLayout: React.FC<PropsWithChildren> = ({ children }) => {
       {isHorizontalMobile && <BlockingScreen message="Turn your screen to join the call." />}
       <div
         className={clsx(
-          "home-page h-screen w-full",
+          "home-page h-[100dvh] w-full",
           "bg-brand-sea-blue-200 font-rocGrotesk text-brand-dark-blue-500",
           "flex flex-col items-center gap-y-4 p-4",
           "relative overflow-y-auto",

assets/src/features/room-page/components/PageLayout.tsx

@@ -9,12 +9,13 @@ const PageLayout: React.FC<PropsWithChildren> = ({ children }) => {
   return (
     <>
       {isHorizontalMobile && <BlockingScreen message="Turn your screen to resume the call." />}
+
       <div
         className={clsx(
-          "h-screen w-full bg-auto bg-center bg-no-repeat sm:bg-videoroom-background",
+          "h-[100dvh] w-full bg-auto bg-center bg-no-repeat sm:bg-videoroom-background",
           "bg-brand-sea-blue-100 font-rocGrotesk text-brand-dark-blue-500",
           "flex flex-col items-center gap-y-4 p-4",
-          isHorizontalMobile && "invisible"
+          isHorizontalMobile && "hidden"
         )}
       >
         <Navbar />

assets/src/features/room-page/utils/getVideoGridConfig.tsx

@@ -10,49 +10,46 @@ export type GridConfigType = {
   tileClass?: string;
 };
 
-type ColumnsCount = 1 | 2 | 3 | 4;
+type ColumnsCount = 1 | 2 | 3 | 4 | 5;
 
 const GRID_COLUMNS_STYLE: Record<ColumnsCount, string> = {
   1: "grid-cols-1",
   2: "grid-cols-1 sm:grid-cols-4",
-  3: "grid-cols-1 sm:grid-cols-6",
-  4: "grid-cols-1 sm:grid-cols-8",
+  3: "grid-cols-4 sm:grid-cols-4",
+  4: "grid-cols-4 sm:grid-cols-6",
+  5: "grid-cols-4 sm:grid-cols-8",
 };
 
 const TILE_CLASS: Record<ColumnsCount, string> = {
   1: "",
   2: "video-tile-grid-2",
-  3: "video-tile-grid-3",
-  4: "video-tile-grid-4",
+  3: "video-tile-grid-2",
+  4: "video-tile-grid-3",
+  5: "video-tile-grid-4",
 };
 
 function getColumns(peers: number): ColumnsCount {
-  if (peers === 1) {
-    return 1;
-  }
-  if (peers > 1 && peers < 5) {
-    return 2;
-  }
-  if (peers >= 5 && peers < 13) {
-    return 3;
-  }
+  if (peers === 1) return 1;
+  if (peers < 4) return 2;
+  if (peers < 5) return 3;
+  if (peers < 13) return 4;
+  return 5;
+}
 
-  return 4;
+function getGridGap(peers: number): string {
+  if (peers < 5) return "gap-2 sm:gap-4";
+  if (peers < 13) return "gap-2 sm:gap-3";
+  return "gap-2";
 }
 
 export function getGridConfig(peers: number): GridConfigType {
-  function getGridGap() {
-    if (peers < 5) return "gap-4";
-    if (peers < 13) return "gap-3";
-    return "gap-2";
-  }
   const grid = "grid place-content-center grid-flow-row";
-  const gap = getGridGap();
+  const gap = getGridGap(peers);
   const padding = peers >= 10 && peers < 13 ? "xl:px-[140px]" : "";
+  const span = peers > 1 ? "col-span-2 sm:col-span-2" : "";
+  const rows = peers == 2 ? "auto-rows-fr sm:grid-rows-[490px] 3xl:grid-rows-[520px]" : "auto-rows-fr";
   const columnsCount = getColumns(peers);
   const columns = GRID_COLUMNS_STYLE[columnsCount];
-  const rows = peers == 2 ? "auto-rows-fr sm:grid-rows-[490px] 3xl:grid-rows-[520px]" : "auto-rows-fr";
-  const span = peers > 1 ? "col-span-2" : "";
   const tileClass = TILE_CLASS[columnsCount];
 
   return { grid, gap, padding, columns, rows, span, tileClass };
@@ -67,7 +64,7 @@ export const getUnpinnedTilesGridStyle = (
 ): string => {
   if (!isAnyTilePinned)
     return clsx(
-      "h-full w-full",
+      "sm:h-full w-full",
       gridConfig.columns,
       gridConfig.grid,
       gridConfig.gap,
@@ -77,10 +74,10 @@ export const getUnpinnedTilesGridStyle = (
 
   if (fixedRatio)
     return clsx(
-      "w-[400px]",
+      "w-[400px] max-w-[90%]",
       videoInVideo
         ? "h-[220px] absolute bottom-4 right-4 z-10"
-        : "h-full flex flex-wrap flex-col content-center justify-center"
+        : "sm:h-full flex flex-wrap flex-col content-center justify-center"
     );
 
   const horizontal = horizontalRow ? "sm:flex-row" : "sm:flex-col";

assets/src/features/shared/components/Page404.tsx

@@ -6,7 +6,7 @@ import Button from "./Button";
 
 const Page404: React.FC = () => {
   return (
-    <div className="h-screen w-full bg-brand-sea-blue-100 text-brand-dark-blue-500">
+    <div className="h-[100dvh] w-full bg-brand-sea-blue-100 text-brand-dark-blue-500">
       <div className="absolute hidden h-full w-full overflow-clip sm:block">
         <BackgroundRight className="absolute top-[5%] left-0 h-[90%] -translate-x-1/2" opacity={0.3} />
         <BackgroundRight className="absolute top-[5%] right-0 h-[90%] translate-x-1/2" opacity={0.1} />

assets/src/pages/room/VideochatSection.tsx

@@ -158,7 +158,7 @@ export const VideochatSection: FC<Props> = ({
   const wrapperClass = useMemo(() => {
     const areAllTilesPinned = unpinnedTiles.length === 0;
 
-    const base = "grid h-full w-full auto-rows-fr gap-3 3xl:max-w-[3200px]";
+    const base = "grid h-full w-full auto-rows-fr gap-3 3xl:max-w-[3200px] items-center";
     const unpinnedTilesLayout = unpinnedTilesHorizontal ? "sm:grid-rows-3/1" : "sm:grid-cols-3/1";
     const layoutWithTileHighlight = allTilesConfig.length === 2 || areAllTilesPinned ? "relative" : unpinnedTilesLayout;
 

assets/src/pages/room/components/StreamPlayer/MediaPlayerTile.tsx

@@ -21,6 +21,7 @@ export interface Props {
   className?: string;
   blockFillContent?: boolean;
   forceEncoding?: TrackEncoding;
+  enableCustomSize?: boolean;
 }
 
 const MediaPlayerTile: FC<Props> = ({
@@ -35,6 +36,7 @@ const MediaPlayerTile: FC<Props> = ({
   className,
   blockFillContent,
   forceEncoding,
+  enableCustomSize = false,
 }: Props) => {
   const { smartLayerSwitching } = useDeveloperInfo();
 
@@ -63,7 +65,9 @@ const MediaPlayerTile: FC<Props> = ({
       // todo remove disableGroupHover
       className={clsx(
         className,
-        "relative flex h-full w-full justify-center overflow-hidden",
+        !enableCustomSize && "h-full w-full",
+        "max-h-full max-w-full",
+        "relative flex justify-center overflow-hidden",
         "rounded-xl border border-brand-dark-blue-300 bg-gray-900"
       )}
     >

assets/src/pages/room/components/StreamPlayer/UnpinnedTilesSection.tsx

@@ -45,16 +45,36 @@ const UnpinnedTilesSection: FC<Props> = ({
     [gridConfig, isAnyTilePinned, horizontal, videoInVideo, tileConfigs.length]
   );
 
-  const tileStyle = !isAnyTilePinned
-    ? clsx(gridConfig.span, gridConfig.tileClass)
-    : tileConfigs.length === 1
-    ? "w-[400px] h-[220px]"
-    : horizontal
-    ? "sm:max-w-1/3"
-    : "";
+  const isLastTileAndCentered = (index: number) => {
+    return tileConfigs.length > 4 && index === tileConfigs.length - 1 && tileConfigs.length % 2 === 1;
+  };
+
+  const tileStyle = (index: number) => {
+    if (isAnyTilePinned) {
+      if (horizontal && tileConfigs.length > 1) return "sm:max-w-1/3";
+      return "sm:h-full";
+    }
+
+    const isLast = isLastTileAndCentered(index);
+
+    const base = clsx(
+      tileConfigs.length > 1 && "aspect-square",
+      tileConfigs.length < 4 && "mx-auto sm:mx-0",
+      "h-[auto] w-[auto] sm:aspect-auto sm:h-full sm:w-full ",
+      tileConfigs.length > 3 && !isLast && (index % 2 === 0 ? "justify-self-end" : "justify-self-start")
+    );
+
+    return clsx(
+      base,
+      isLast ? "col-[2_/_span_2] justify-self-center sm:col-span-2" : gridConfig.span,
+      gridConfig.tileClass
+    );
+  };
 
   const tileSize = tileConfigs.length >= 7 ? "M" : "L";
 
+  const containerHeight = tileConfigs.length === 1 ? (isAnyTilePinned ? "" : "h-full") : "h-fit max-h-full sm:h-full";
+
   const getUpperLeftIcon = (config: MediaPlayerTileConfig): JSX.Element | null => {
     if (config.typeName !== "local" && config.typeName !== "remote") return null;
 
@@ -65,8 +85,8 @@ const UnpinnedTilesSection: FC<Props> = ({
   };
 
   return (
-    <div id="videos-grid" className={videoGridStyle}>
-      {tileConfigs.map((config: MediaPlayerTileConfig) => {
+    <div id="videos-grid" className={clsx(videoGridStyle, containerHeight)}>
+      {tileConfigs.map((config, index) => {
         const video: TrackWithId | null = config.video;
         const hasInitials = config.typeName === "local" || config.typeName === "remote";
         const upperLeftIcon: JSX.Element | null = getUpperLeftIcon(config);
@@ -77,7 +97,8 @@ const UnpinnedTilesSection: FC<Props> = ({
             peerId={config.peerId}
             video={video}
             audio={config.typeName === "remote" ? config.audio : null}
-            className={tileStyle}
+            className={tileStyle(index)}
+            enableCustomSize={isAnyTilePinned || tileConfigs.length > 1}
             layers={
               <>
                 {hasInitials && showDisabledIcon(video) && <InitialsImage initials={config.initials} />}

lib/videoroom_web/templates/layout/app.html.heex

@@ -16,7 +16,7 @@
   </head>
 
   <body class="h-[100dvh] relative">
-      <main role="main h-screen">
+      <main role="main h-[100dvh]">
         <%= @inner_content %>
       </main>
       <div>

priv/static/css/app.css

@@ -57,8 +57,8 @@ h3 {
   width: 100%;
 }
 .VideoChat .grid-1 video {
-  max-height: calc(100vh - 150px);
-  max-width: calc(100vw - 100px);
+  max-height: calc(100dvh - 150px);
+  max-width: calc(100dvw - 100px);
   width: auto;
 }
 .VideoChat .grid-2 {