Merge pull request #1783 from gchq/dev/update-long-text-overflow

fixed some text wrapping issues in side nav and file download component
gchq · Jan 28, 2025 · dfb4897 · dfb4897
2 parents fe0cf5f + ebd4221
commit dfb4897
Showing 8 changed files with 42 additions and 19 deletions.
diff --git a/frontend/src/Link.tsx b/frontend/src/Link.tsx
@@ -44,6 +44,7 @@ export type LinkProps = {
   href: NextLinkProps['href']
   linkAs?: NextLinkProps['as'] // Useful when the as prop is shallow by styled().
   noLinkStyle?: boolean
+  noWrap?: boolean
 } & Omit<NextLinkComposedProps, 'to' | 'linkAs' | 'href'> &
   Omit<MuiLinkProps, 'href'>
 
@@ -58,6 +59,7 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref)
     linkAs: linkAsProp,
     locale,
     noLinkStyle,
+    noWrap = false,
     prefetch,
     replace,
     role: _role, // Link don't have roles.
@@ -100,12 +102,25 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref)
         ref={ref}
         {...nextjsProps}
         {...other}
-        style={{ textDecoration: 'none' }}
+        style={
+          noWrap
+            ? { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', textDecoration: 'none' }
+            : { textDecoration: 'none' }
+        }
       />
     )
   }
 
-  return <MuiLink component={NextLinkComposed} className={className} ref={ref} {...nextjsProps} {...other} />
+  return (
+    <MuiLink
+      component={NextLinkComposed}
+      className={className}
+      ref={ref}
+      style={noWrap ? { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' } : {}}
+      {...nextjsProps}
+      {...other}
+    />
+  )
 })
 
 export default Link
diff --git a/frontend/src/entry/model/releases/FileDownload.tsx b/frontend/src/entry/model/releases/FileDownload.tsx
@@ -168,10 +168,12 @@ export default function FileDownload({ modelId, file }: FileDownloadProps) {
     <>
       {isFileInterface(file) && (
         <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} alignItems='center' justifyContent='space-between'>
-          <Stack sx={{ minWidth: 0 }}>
+          <Stack sx={{ minWidth: 0, width: '100%' }}>
             <Tooltip title={file.name}>
               <Link href={`/api/v2/model/${modelId}/file/${file._id}/download`} data-test={`fileLink-${file.name}`}>
-                <Typography noWrap>{file.name}</Typography>
+                <Typography noWrap textOverflow='ellipsis' overflow='hidden'>
+                  {file.name}
+                </Typography>
               </Link>
             </Tooltip>
           </Stack>

diff --git a/frontend/src/entry/model/releases/ReleaseDisplay.tsx b/frontend/src/entry/model/releases/ReleaseDisplay.tsx
@@ -101,11 +101,17 @@ export default function ReleaseDisplay({
                 justifyContent='space-between'
                 alignItems='center'
                 spacing={1}
+                sx={{ minWidth: 0 }}
               >
-                <Link noLinkStyle href={`/model/${model.id}/release/${release.semver}`}>
-                  <Typography component='h2' variant='h6' color='primary'>
-                    {model.name} - {release.semver}
-                  </Typography>
+                <Link noLinkStyle href={`/model/${model.id}/release/${release.semver}`} noWrap>
+                  <Stack direction='row' alignItems='center' spacing={1} width='100%'>
+                    <Typography component='h2' variant='h6' color='primary' noWrap>
+                      {model.name} -
+                    </Typography>
+                    <Typography component='h2' variant='h6' color='primary'>
+                      {release.semver}
+                    </Typography>
+                  </Stack>
                 </Link>
                 <CopyToClipboardButton
                   textToCopy={`${model.name} - ${release.semver}`}

diff --git a/frontend/src/marketplace/EntryList.tsx b/frontend/src/marketplace/EntryList.tsx
@@ -26,13 +26,20 @@ export default function EntryList({
     return entries.map((entry, index) => (
       <Fragment key={entry.id}>
         <Stack direction='row'>
-          <Link style={{ textDecoration: 'none' }} href={`${entry.kind}/${entry.id}`} passHref>
+          <Link
+            style={{ textDecoration: 'none', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}
+            href={`${entry.kind}/${entry.id}`}
+            passHref
+          >
             <MuiLink variant='h5' sx={{ fontWeight: '500', textDecoration: 'none', color: theme.palette.primary.main }}>
               {entry.name}
             </MuiLink>
           </Link>
         </Stack>
-        <Typography variant='body1' sx={{ marginBottom: 2 }}>
+        <Typography
+          variant='body1'
+          sx={{ marginBottom: 2, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}
+        >
           {entry.description}
         </Typography>
         <ChipSelector

diff --git a/frontend/src/wrapper/SideNavigation.tsx b/frontend/src/wrapper/SideNavigation.tsx
@@ -16,8 +16,6 @@ import MessageAlert from 'src/MessageAlert'
 import { NavMenuItem } from 'src/wrapper/NavMenuItem'
 import { User } from 'types/types'
 
-import { DRAWER_WIDTH } from '../../utils/constants'
-
 const StyledList = styled(List)(({ theme }) => ({
   paddingTop: 0,
   paddingBottom: 0,
@@ -35,7 +33,7 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open'
   '& .MuiDrawer-paper': {
     position: 'relative',
     whiteSpace: 'nowrap',
-    width: DRAWER_WIDTH,
+    width: 'fit-content',
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,

diff --git a/frontend/src/wrapper/TopNavigation.tsx b/frontend/src/wrapper/TopNavigation.tsx
@@ -30,7 +30,6 @@ import EntrySearch from 'src/wrapper/EntrySearch'
 
 import bailoLogo from '../../public/logo-horizontal-light.png'
 import { User } from '../../types/types'
-import { DRAWER_WIDTH } from '../../utils/constants'
 import ExpandableButton from '../common/ExpandableButton'
 import ThemeModeContext from '../contexts/themeModeContext'
 import Link from '../Link'
@@ -57,8 +56,6 @@ const AppBar = styled(MuiAppBar, {
     {
       props: ({ open }) => open,
       style: {
-        marginLeft: DRAWER_WIDTH,
-        width: `calc(100% - ${DRAWER_WIDTH}px)`,
         transition: theme.transitions.create(['width', 'margin-left'], {
           easing: theme.transitions.easing.sharp,
           duration: theme.transitions.duration.enteringScreen,

diff --git a/frontend/utils/constants.ts b/frontend/utils/constants.ts
@@ -1,5 +1,3 @@
-export const DRAWER_WIDTH = 240
-
 export const HIDDEN_TOKEN_ACCESS_KEY = 'xxxxxxxxxx'
 
 export const HIDDEN_TOKEN_SECRET_KEY = 'xxxxxxxxxxxxxxxxxxxxx'

diff --git a/lib/landing/src/Wrapper.tsx b/lib/landing/src/Wrapper.tsx
@@ -28,7 +28,7 @@ const AppBar = styled(MuiAppBar, {
   }),
   ...(open && {
     marginLeft: drawerWidth,
-    width: `calc(100% - ${drawerWidth}px)`,
+    width: 'fit-content',
     transition: theme.transitions.create(['width', 'margin-left'], {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,