fixed chat screen

Opentrons · Oct 25, 2024 · e406b00 · e406b00
1 parent d40330a
commit e406b00
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/opentrons-ai-client/src/organisms/MainContentContainer/index.tsx b/opentrons-ai-client/src/organisms/MainContentContainer/index.tsx
@@ -4,7 +4,6 @@ import styled from 'styled-components'
 import { useAtom } from 'jotai'
 
 import {
-  COLORS,
   DIRECTION_COLUMN,
   Flex,
   OVERFLOW_AUTO,
@@ -32,14 +31,11 @@ export function MainContentContainer(): JSX.Element {
 
   return (
     <Flex
-      marginTop="2.5rem"
-      marginLeft="24.375rem"
       padding={`${SPACING.spacing40} ${SPACING.spacing40} ${SPACING.spacing24}`}
-      backgroundColor={COLORS.grey10}
-      width="auto"
       flexDirection={DIRECTION_COLUMN}
       gridGap={SPACING.spacing40}
-      height="100vh"
+      height="80vh"
+      width="100%"
     >
       <Flex
         width="100%"

diff --git a/opentrons-ai-client/src/organisms/UpdateProtocol/index.tsx b/opentrons-ai-client/src/organisms/UpdateProtocol/index.tsx
@@ -209,6 +209,7 @@ export function UpdateProtocol(): JSX.Element {
             />
           )}
         </Flex>
+        <Flex height={'16px'}></Flex>
         <Flex flexDirection={DIRECTION_COLUMN} width="100%">
           <DropdownMenu
             title={t('type_of_update')}

diff --git a/opentrons-ai-client/src/pages/Chat/index.tsx b/opentrons-ai-client/src/pages/Chat/index.tsx
@@ -1,7 +1,12 @@
 import { useForm, FormProvider } from 'react-hook-form'
-import { COLORS, Flex, POSITION_RELATIVE } from '@opentrons/components'
+import {
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  Flex,
+  JUSTIFY_CENTER,
+  POSITION_RELATIVE,
+} from '@opentrons/components'
 
-import { SidePanel } from '../../molecules/SidePanel'
 import { MainContentContainer } from '../../organisms/MainContentContainer'
 
 export interface InputType {
@@ -18,12 +23,15 @@ export function Chat(): JSX.Element | null {
   return (
     <Flex
       position={POSITION_RELATIVE}
-      minHeight="100vh"
-      backgroundColor={COLORS.grey10}
+      flexDirection={DIRECTION_COLUMN}
+      justifyContent={JUSTIFY_CENTER}
+      width="100%"
     >
       <FormProvider {...methods}>
-        {/* <SidePanel /> */}
-        <MainContentContainer />
+        <Flex flexDirection={DIRECTION_ROW}>
+          {/* <SidePanel /> */}
+          <MainContentContainer />
+        </Flex>
       </FormProvider>
     </Flex>
   )