Merge branch 'fix_ChatCointainer-layout-issue' into demo-opentrons-ai

Opentrons · May 15, 2024 · e850baa · e850baa
2 parents 871e0ec + 3541320
commit e850baa
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/opentrons-ai-client/README.md b/opentrons-ai-client/README.md
@@ -13,8 +13,13 @@ To get started: clone the `Opentrons/opentrons` repository, set up your computer
 ```shell
 # change into the cloned directory
 cd opentrons
+
 # prerequisite: install dependencies as specified in project setup
 make setup
+
+# if you have done the setup already, you can run the following instead of make setup
+make teardown-js && make setup-js
+
 # launch the dev server
 make -C opentrons-ai-client dev
 ```
@@ -27,6 +32,7 @@ The UI stack is built using:
 - [Babel][]
 - [Vite][]
 - [Jotai][]
+- [styled-components][]
 
 Some important directories:
 
@@ -61,5 +67,6 @@ TBD
 [babel]: https://babeljs.io/
 [vite]: https://vitejs.dev/
 [jotai]: https://jotai.org/
+[styled-components]: https://styled-components.com/
 [bundle-analyzer]: https://github.com/webpack-contrib/webpack-bundle-analyzer
 [opentrons-ai-server]: https://github.com/Opentrons/opentrons/tree/edge/opentrons-ai-server
diff --git a/opentrons-ai-client/src/organisms/ChatContainer/index.tsx b/opentrons-ai-client/src/organisms/ChatContainer/index.tsx
@@ -7,8 +7,6 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   Flex,
-  POSITION_ABSOLUTE,
-  POSITION_RELATIVE,
   SPACING,
   StyledText,
   TYPOGRAPHY,
@@ -27,14 +25,13 @@ export function ChatContainer(): JSX.Element {
       padding={`${SPACING.spacing40} ${SPACING.spacing40} ${SPACING.spacing24}`}
       backgroundColor={COLORS.grey10}
       width="100%"
+      id="ChatContainer"
+      flexDirection={DIRECTION_COLUMN}
+      gridGap={SPACING.spacing40}
     >
       {/* This will be updated when input textbox and function are implemented */}
 
-      <Flex
-        flexDirection={DIRECTION_COLUMN}
-        position={POSITION_RELATIVE}
-        width="100%"
-      >
+      <Flex width="100%" height="100%" overflow="auto">
         <ChatDataContainer>
           <StyledText>{t('opentronsai')}</StyledText>
           {/* Prompt Guide remain as a reference for users. */}
@@ -49,24 +46,21 @@ export function ChatContainer(): JSX.Element {
               ))
             : null}
         </ChatDataContainer>
-        <Flex
-          position={POSITION_ABSOLUTE}
-          bottom="0"
-          width="100%"
-          gridGap={SPACING.spacing24}
-          flexDirection={DIRECTION_COLUMN}
-        >
-          <InputPrompt />
-          <StyledText css={DISCLAIMER_TEXT_STYLE}>{t('disclaimer')}</StyledText>
-        </Flex>
+      </Flex>
+      <Flex
+        bottom="0"
+        width="100%"
+        gridGap={SPACING.spacing24}
+        flexDirection={DIRECTION_COLUMN}
+      >
+        <InputPrompt />
+        <StyledText css={DISCLAIMER_TEXT_STYLE}>{t('disclaimer')}</StyledText>
       </Flex>
     </Flex>
   )
 }
 
 const ChatDataContainer = styled(Flex)`
-  max-height: calc(100vh);
-  overflow-y: auto;
   flex-direction: ${DIRECTION_COLUMN};
   grid-gap: ${SPACING.spacing12};
   width: 100%;