fix(gui): scrollbars on documentation text (#798)

* fix(gui): scrollbars on documentation text

* style: apply automatic fixes of linters

Co-authored-by: lars-reimann <[email protected]>

Author: lars-reimann

api-editor/gui/src/app/App.tsx

@@ -158,7 +158,7 @@ export const App: React.FC = function () {
                     )}
                     {currentUserAction.type === 'todo' && <TodoForm target={userActionTarget || rawPythonPackage} />}
                 </GridItem>
-                <GridItem gridArea="middlePane" overflow="auto">
+                <GridItem gridArea="middlePane" overflow="auto" display="flex">
                     <Box flexGrow={1} overflowY="auto" width="100%">
                         {(batchMode === BatchMode.None || !isValidUsername) && <SelectionView />}
 

api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx

@@ -99,6 +99,7 @@ export const DocumentationText: React.FC<DocumentationTextProps> = function ({ d
         <Flex justifyContent="flex-start">
             <HStack
                 alignItems="flex-start"
+                overflow="hidden"
                 cursor={!hasMultipleLines || readMore ? undefined : 'pointer'}
                 onClick={
                     !hasMultipleLines || readMore
@@ -122,7 +123,7 @@ export const DocumentationText: React.FC<DocumentationTextProps> = function ({ d
                     />
                 )}
 
-                <Stack spacing={4}>
+                <Stack spacing={4} overflowX="auto" paddingBottom={4}>
                     <ReactMarkdown
                         components={components}
                         rehypePlugins={[rehypeKatex]}