fix convo sizing. move infopanel to overlay also (#25625)

keybase · Apr 13, 2023 · 79f9afb · 79f9afb
1 parent 2a61b6f
commit 79f9afb
Showing 1 changed file with 25 additions and 3 deletions.
diff --git a/shared/chat/inbox-and-conversation-2.tsx b/shared/chat/inbox-and-conversation-2.tsx
@@ -48,14 +48,20 @@ const InboxAndConversation = (props: Props) => {
 
   return (
     <Kb.KeyboardAvoidingView2>
-      <Kb.Box2 direction="horizontal" fullWidth={true} fullHeight={true}>
+      <Kb.Box2 direction="horizontal" fullWidth={true} fullHeight={true} style={styles.container}>
         {!Container.isTablet && inboxSearch ? (
           <InboxSearch />
         ) : (
           <Inbox navKey={navKey} conversationIDKey={conversationIDKey} />
         )}
-        <Conversation navigation={props.navigation} route={props.route as any} />
-        {infoPanelShowing && <InfoPanel conversationIDKey={conversationIDKey} />}
+        <Kb.Box2 direction="vertical" fullHeight={true} style={styles.conversation}>
+          <Conversation navigation={props.navigation} route={props.route as any} />
+        </Kb.Box2>
+        {infoPanelShowing ? (
+          <Kb.Box2 direction="vertical" fullHeight={true} style={styles.infoPanel}>
+            <InfoPanel conversationIDKey={conversationIDKey} />
+          </Kb.Box2>
+        ) : null}
       </Kb.Box2>
     </Kb.KeyboardAvoidingView2>
   )
@@ -81,6 +87,22 @@ export const getOptions = ({navigation, route}) => {
   }
 }
 
+const styles = Styles.styleSheetCreate(
+  () =>
+    ({
+      container: {position: 'relative'},
+      conversation: {flexGrow: 1},
+      infoPanel: {
+        backgroundColor: Styles.globalColors.white,
+        bottom: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        width: 320,
+      },
+    } as const)
+)
+
 const Memoed = React.memo(InboxAndConversation)
 Container.hoistNonReactStatic(Memoed, InboxAndConversation)
 export default Memoed