Merge pull request #5693 from artsy/fix-conversation-layout

artsy · Jun 1, 2020 · 116fd6d · 116fd6d
2 parents 270dd83 + 04ef58e
commit 116fd6d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/v2/Apps/Conversation/Components/ConversationSnippet.tsx b/src/v2/Apps/Conversation/Components/ConversationSnippet.tsx
@@ -25,7 +25,7 @@ const TimeSinceFlex = styled(Flex)`
 `
 
 const StyledSans = styled(Sans)`
-  word-break: break-all;
+  word-break: break-word;
 `
 
 const TruncatedTitle = styled(Sans)`

diff --git a/src/v2/Apps/Conversation/Routes/Conversation/index.tsx b/src/v2/Apps/Conversation/Routes/Conversation/index.tsx
@@ -16,12 +16,24 @@ import {
   FullHeader,
 } from "v2/Apps/Conversation/Components/InboxHeaders"
 import { DetailsFragmentContainer as Details } from "../../Components/Details"
+import styled from "styled-components"
 interface ConversationRouteProps {
   me: Conversation_me
   conversationID: string
   match: Match
 }
 
+const ConstrainedHeightFlex = styled(Flex)`
+  height: calc(100vh - 145px);
+  & > * {
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+  & > .fresnel-greaterThan-xs {
+    flex-shrink: 0;
+  }
+`
+
 /**
  * FIXME: Added some @ts-ignores to get TypeScript 3.9 updated
  */
@@ -50,7 +62,7 @@ export const ConversationRoute: React.FC<ConversationRouteProps> = props => {
           {/* @ts-ignore */}
           <FullHeader partnerName={me.conversation.to.name} />
         </Media>
-        <Flex>
+        <ConstrainedHeightFlex>
           <Media greaterThan="xs">
             <Conversations
               me={me as any}
@@ -65,7 +77,7 @@ export const ConversationRoute: React.FC<ConversationRouteProps> = props => {
             display={["none", null, null, null, "flex"]}
             width={["100%", "376px"]}
           />
-        </Flex>
+        </ConstrainedHeightFlex>
       </AppContainer>
     )
   } else {