From d5ba11956c5da6c5b072f7b2823eb2b99f6d2ac1 Mon Sep 17 00:00:00 2001
From: Timo <toger5@hotmail.de>
Date: Tue, 24 Jun 2025 16:38:55 +0200
Subject: [PATCH] fix styling  - make video render below the header on Android.

---
 src/AppBar.module.css         | 5 ++++-
 src/AppBar.tsx                | 8 +++++++-
 src/tile/GridTile.module.css  | 1 +
 src/tile/MediaView.module.css | 2 +-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/AppBar.module.css b/src/AppBar.module.css
index 805b7802..8298f6a4 100644
--- a/src/AppBar.module.css
+++ b/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;
diff --git a/src/AppBar.tsx b/src/AppBar.tsx
index e17f9e17..3bf783cd 100644
--- a/src/AppBar.tsx
+++ b/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")}>
diff --git a/src/tile/GridTile.module.css b/src/tile/GridTile.module.css
index 53d3975b..867c1cef 100644
--- a/src/tile/GridTile.module.css
+++ b/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);
 }
diff --git a/src/tile/MediaView.module.css b/src/tile/MediaView.module.css
index 5a9962c9..b86edc52 100644
--- a/src/tile/MediaView.module.css
+++ b/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 {