Fix scrolling (#311)

* remove excessive scrolling

* more scrolls

Author: nuwandavek

web/src/components/common/ActionStack.tsx

@@ -135,7 +135,7 @@ export const ActionStack: React.FC<{status: string, actions: Array<ActionStatusV
     const tableOutputsArr = actions.map(action => {
                 const output = action.output || ''
                 return TABLE_OUTPUT_ACTIONS.includes(action.function.name) && (
-                    <HStack w={"100%"} justify={"center"} mb={2} overflowX={'scroll'}>
+                    <HStack w={"100%"} justify={"center"} mb={2} overflowX={'auto'}>
                         <Markdown content={processModelToUIText(output, origin, embedConfigs)} />
                     </HStack>
                 )
@@ -255,7 +255,7 @@ export const ActionStack: React.FC<{status: string, actions: Array<ActionStatusV
         )} */}
       </Box>
     </HStack>
-    <VStack maxWidth={"100%"} width={"100%"} overflow={"scroll"}>
+    <VStack maxWidth={"100%"} width={"100%"} overflow={"auto"}>
     {tableOutputsArr.length > 0 && 
         // <Text marginBottom={2} borderBottomWidth={1} borderBottomColor={'minusxGreen.800'} style={{ hyphens: 'auto' }} p={2} w={"100%"}>{"Thinking..."}<br/>{preExpanderText}</Text>
         tableOutputsArr.map((text, i) => {

web/src/components/common/AdditionalContext.tsx

@@ -47,7 +47,7 @@ export const AdditionalContext = () => {
     flex={1}
     height={'100%'}
     width={"100%"}
-    overflow={"scroll"}
+    overflow={"auto"}
     pt={2}
     >
       <VStack alignItems={"start"} gap={1}> 

web/src/components/common/ChatContent.css

@@ -4,5 +4,5 @@
 
 .markdown {
   width: 100%;
-  overflow: scroll;
+  overflow: auto;
 }

web/src/components/common/CodeBlock.tsx

@@ -86,7 +86,7 @@ export const CodeBlock = ({ code, tool, oldCode, language }: { code: string, too
         <Tab>Diff</Tab>
       </TabList> }
 
-      <TabPanels bg={"#1e1e1e"} borderRadius={5} mt={0} maxHeight={"500px"} overflow={"scroll"}>
+      <TabPanels bg={"#1e1e1e"} borderRadius={5} mt={0} maxHeight={"500px"} overflow={"auto"}>
         <TabPanel p={0}>
           <SyntaxHighlighter codeTagProps={{}} language={language} style={vsd} showLineNumbers={true} wrapLines={true} lineProps={linePropsFn} lineNumberStyle={{display: 'none'}}>
             {code}

web/src/components/common/Markdown.tsx

@@ -326,7 +326,7 @@ function ModifiedTable(props: any) {
                     </Tooltip>
                 </HStack>
                 <div style={{
-                    maxHeight: '200px',
+                    // maxHeight: '200px',
                     overflowY: 'auto',
                     overflowX: 'auto',
                     border: '1px solid #e2e8f0',

web/src/components/common/TaskUI.tsx

@@ -522,7 +522,7 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
       pt={2}
     >
 
-      <VStack overflowY={'scroll'} height={"100%"}>
+      <VStack overflowY={'auto'} height={"100%"}>
         {
           metaQuestion &&
           <>

web/src/components/devtools/Settings.tsx

@@ -157,7 +157,7 @@ const SettingsPage = () => {
     flex={1}
     // height={'80vh'}
     width={"100%"}
-    overflow={"scroll"}
+    overflow={"auto"}
     // pt={2}
     >
       <SettingsBlock title="Profile">