make title fit on screen

bcgov · Jul 9, 2024 · e590bb1 · e590bb1
1 parent 0dd1301
commit e590bb1
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Documents/DocumentFile.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Documents/DocumentFile.tsx
@@ -57,7 +57,15 @@ const DocumentFile = ({
                     <Grid item xs>
                         <Stack spacing={2} direction="row" alignItems="center">
                             {documentItem.is_uploaded ? <InsertDriveFileIcon /> : <LinkIcon />}
-                            <Typography>{documentItem.title}</Typography>
+                            <Typography
+                                sx={{
+                                    whiteSpace: 'normal',
+                                    width: '90%',
+                                    wordWrap: 'break-word',
+                                }}
+                            >
+                                {documentItem.title}
+                            </Typography>
                         </Stack>
                     </Grid>
                     <Grid item xs container justifyContent={'flex-end'}>

diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Documents/StyledTreeItem.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Documents/StyledTreeItem.tsx
@@ -77,8 +77,11 @@ export function StyledTreeItem(props: StyledTreeItemProps & DocumentTreeItemProp
                             <Link
                                 sx={{
                                     alignItems: 'center',
-                                    display: 'flex',
                                     justifyContent: 'center',
+                                    whiteSpace: 'normal',
+                                    overflowWrap: 'break-word',
+                                    flexDirection: 'column',
+                                    maxWidth: '80%',
                                 }}
                                 target="_blank"
                                 href={`${labelUrl}`}

diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Documents/TreeView.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Documents/TreeView.tsx
@@ -21,7 +21,7 @@ export default function DocumentTree({ documentItem }: DocumentTreeProps) {
             defaultCollapseIcon={<ArrowDropDownIcon sx={{ height: '35px', width: '35px' }} />}
             defaultExpandIcon={<ArrowRightIcon sx={{ height: '35px', width: '35px' }} />}
             defaultEndIcon={<div style={{ width: 24 }} />}
-            sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+            sx={{ flexGrow: 1, maxWidth: 1000, overflowY: 'auto' }}
         >
             <If condition={documentItem.type === 'folder'}>
                 <Then>