Use vh instead of % to fix storybook rendering of chat container.

2022-07-21 12:15:03 -07:00 · 2022-07-21 12:15:03 -07:00 · 0574725be8
commit 0574725be8
parent 25d52c4e1a
2 changed files with 3 additions and 3 deletions
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@ -102,7 +102,7 @@ export default function ChatContainer(props: Props) {
    () => (
      <>
        <Virtuoso
-          style={{ height: 'calc(100% - 110px)', width: 'auto' }}
+          style={{ height: 'calc(100vh - 170px)', width: 'auto' }}
          ref={chatContainerRef}
          initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom
          data={messages}
--- a/web/stories/ChatContainer.stories.tsx
+++ b/web/stories/ChatContainer.stories.tsx
@ -35,8 +35,8 @@ const AddMessagesChatExample = args => {
      </button>
      <ChatContainer
        messages={chatMessages}
-        usernameToHighlight={null}
-        chatUserId={null}
+        usernameToHighlight="testuser"
+        chatUserId="testuser"
        isModerator={false}
        isMobile={false}
      />