From 69a19cf8fe6980f3045a48a4dd36eb4098b7ddb6 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Wed, 29 Jan 2025 19:41:04 -0800
Subject: [PATCH] styling for ipad

---
 app/client/mobile/src/calling/Calling.styled.ts | 8 +++++++-
 app/client/mobile/src/calling/Calling.tsx       | 6 +++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/client/mobile/src/calling/Calling.styled.ts b/app/client/mobile/src/calling/Calling.styled.ts
index f730d1ac..74bae63e 100644
--- a/app/client/mobile/src/calling/Calling.styled.ts
+++ b/app/client/mobile/src/calling/Calling.styled.ts
@@ -53,6 +53,13 @@ export const styles = StyleSheet.create({
     height: '100%',
     borderRadius: 8,
   },
+  canvas: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
   frame: {
     display: 'flex',
     alignItems: 'center',
@@ -95,7 +102,6 @@ export const styles = StyleSheet.create({
     height: '20%',
   },
   full: {
-    position: 'absolute',
     width: '100%',
     height: '100%',
   },
diff --git a/app/client/mobile/src/calling/Calling.tsx b/app/client/mobile/src/calling/Calling.tsx
index 557e93e2..1ceb795b 100644
--- a/app/client/mobile/src/calling/Calling.tsx
+++ b/app/client/mobile/src/calling/Calling.tsx
@@ -197,7 +197,7 @@ export function Calling({ callCard }: { callCard: string }) {
       )}
       { state.calling && (
         <View style={{ ...styles.container, backgroundColor: surface.base }}>
-          <View style={{ ...styles.frame, top: frameOffset, width: frameWidth, height: frameHeight }}>
+          <View style={{ ...styles.frame, top: frameOffset, width: frameWidth > 400 ? 400 : frameWidth, height: frameHeight > 400 ? 400 : frameHeight }}>
             <Image
               style={{ ...styles.image, opacity: state.loaded ? 1 : 0 }}
               resizeMode="contain"
@@ -232,20 +232,24 @@ export function Calling({ callCard }: { callCard: string }) {
         </View>
       )}
       { state.calling && state.loaded && state.remote && (
+        <View style={{ ...styles.canvas, backgroundColor: surface.base }}>
         <RTCView
           style={styles.full}
           mirror={true}
           objectFit={'contain'}
           streamURL={state.remote.toURL()}
         />
+        </View>
       )}
       { state.calling && state.loaded && state.local && !state.remote && (
+        <View style={{ ...styles.canvas, backgroundColor: surface.base }}>
         <RTCView
           style={styles.full}
           mirror={true}
           objectFit={'contain'}
           streamURL={state.local.toURL()}
         />
+        </View>
       )}
       { state.calling && state.loaded && state.local && state.remote && (
         <RTCView