From a53585c96d759e2e1e6c5e9249dec641c2cf1b56 Mon Sep 17 00:00:00 2001
From: Timo <16718859+toger5@users.noreply.github.com>
Date: Wed, 25 Jun 2025 19:38:51 +0200
Subject: [PATCH] Fix white borders in PiP mode android (Fix scroll issues in
 small documents) (#3362)

* Fix scroll issues in small documents (PiP mode android)
This scroll issue resulted in white borders on android PiP mode.
---
 src/index.css              |  7 +++++++
 src/room/GroupCallView.tsx | 10 ++++++++++
 2 files changed, 17 insertions(+)

diff --git a/src/index.css b/src/index.css
index 883481b1..46c9fbc6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -71,6 +71,13 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
+/* This prohibits the view to scroll for pages smaller than 122px in width
+we use this for mobile pip webviews */
+.no-scroll-body {
+  position: fixed;
+  width: 100%;
+}
+
 /* We use this to not render the page at all until we know the theme.*/
 .no-theme {
   opacity: 0;
diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx
index b981bdd6..c64ba1fd 100644
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -132,6 +132,16 @@ export const GroupCallView: FC<Props> = ({
     };
   }, []);
 
+  // This CSS is the only way we could find to not make element call scroll for
+  // viewport sizes smaller than 122px width. (It is actually this exact number: 122px
+  // tested on different devices...)
+  useEffect(() => {
+    document.body.classList.add("no-scroll-body");
+    return (): void => {
+      document.body.classList.remove("no-scroll-body");
+    };
+  }, []);
+
   useEffect(() => {
     window.rtcSession = rtcSession;
     return (): void => {