Set pip boundaries upon window size changes

src/app/organisms/room/JitsiRoom.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import './JitsiRoom.scss';
 import { JitsiMeeting } from '@jitsi/react-sdk';
 import Draggable from 'react-draggable';
+import useWindowDimensions from './windowDimensions';
 import SearchIC from '../../../../public/res/ic/filled/hangup_call.svg';
 import { openNavigation } from '../../../client/action/navigation';
 
@@ -24,6 +25,8 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom, jitsiCallId, setJitsiCallId })
   const [spaceName, setSpaceName] = useState(null);
   const [counter, setCounter] = useState(0);
 
+  const { windowDimensions, key } = useWindowDimensions();
+
   const mx = initMatrix.matrixClient;
   const sn = mx.getRoom(useSelectedSpace())?.name;
 
@@ -73,10 +76,19 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom, jitsiCallId, setJitsiCallId })
 
   if (jitsiCallId) {
     return (
-      <Draggable disabled={isJitsiRoom}>
+      <Draggable
+        disabled={isJitsiRoom}
+        bounds={{
+          left: -windowDimensions.width * 0.5 + 90,
+          top: -windowDimensions.height * 0.5 + 170,
+          right: windowDimensions.width * 0.5 - 250,
+          bottom: windowDimensions.height * 0.5 - 40,
+        }}
+        key={key}
+      >
         <div className={isJitsiRoom ? 'call reset_pip' : 'pip'}>
           <div className={isJitsiRoom ? 'call_header' : 'call_header pip_header'}>
-            <div className='call_room_title'>
+            <div className="call_room_title">
               {roomName} ({spaceName || sn})
             </div>
             <div className="call_buttons">

src/app/organisms/room/windowDimensions.jsx

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+export default function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+  const [key, setKey] = useState(0);
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+      setKey(key + 1);
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return {windowDimensions, key};
+}

src/app/templates/client/Client.scss

@@ -20,13 +20,12 @@
 }
 
 .jitsi_pip {
-  display: grid;
   position: absolute;
-  top: 20rem;
-  left: 55rem;
   z-index: 2000;
-  height: 25rem;
-  width: 25rem;
+  top: 50%;
+  left: 50%;
+  margin-left: -5rem;
+  margin-top: -10rem;
 }
 
 @include screen.smallerThan(mobileBreakpoint) {