fix styling

- make video render below the header on Android.

src/AppBar.module.css

@@ -2,7 +2,10 @@
   block-size: 64px;
   flex-shrink: 0;
 }
-
+/*show the header bar as an overlay over the video. (android)*/
+.overlay {
+  block-size: 0px;
+}
 .bar > header {
   position: absolute;
   inset-inline: 0;

src/AppBar.tsx

@@ -22,6 +22,7 @@ import {
   CollapseIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 
 import { Header, LeftNav, RightNav } from "./Header";
 import { platform } from "./Platform";
@@ -59,7 +60,12 @@ export const AppBar: FC<Props> = ({ children }) => {
 
   return (
     <>
-      <div className={styles.bar}>
+      <div
+        className={classNames(
+          styles.bar,
+          platform === "android" && styles.overlay,
+        )}
+      >
         <Header>
           <LeftNav>
             <Tooltip label={t("common.back")}>

src/tile/GridTile.module.css

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 .tile {
   --media-view-border-radius: var(--cpd-space-4x);
+  --hover-space-margin: var(--cpd-space-1x);
   transition: outline-color ease 0.15s;
   outline: var(--cpd-border-width-2) solid rgb(0 0 0 / 0);
 }

src/tile/MediaView.module.css

@@ -10,7 +10,7 @@ Please see LICENSE in the repository root for full details.
   container-type: size;
   border-radius: var(--media-view-border-radius);
   /*Add spacing for the hover boarder. Otherwise it might get clipped.*/
-  margin: var(--cpd-space-1x);
+  margin: var(--hover-space-margin);
 }
 
 .media video {