From 03e6d475926fe4a29c69f61583c13d7dddb2e4fd Mon Sep 17 00:00:00 2001
From: Timo <toger5@hotmail.de>
Date: Wed, 25 Jun 2025 19:30:32 +0200
Subject: [PATCH] make scrolling work in the call list

---
 src/index.css              |  5 +++++
 src/room/GroupCallView.tsx | 10 ++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/index.css b/src/index.css
index b3714a36..46c9fbc6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -69,6 +69,11 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -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%;
 }
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 => {