Skip to content

Commit

Permalink
Merge pull request #1783 from gchq/dev/update-long-text-overflow
Browse files Browse the repository at this point in the history
fixed some text wrapping issues in side nav and file download component
ARADDCC002 authored Jan 28, 2025
2 parents fe0cf5f + ebd4221 commit dfb4897
Showing 8 changed files with 42 additions and 19 deletions.
19 changes: 17 additions & 2 deletions frontend/src/Link.tsx
Original file line number Diff line number Diff line change
@@ -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
6 changes: 4 additions & 2 deletions frontend/src/entry/model/releases/FileDownload.tsx
Original file line number Diff line number Diff line change
@@ -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>
14 changes: 10 additions & 4 deletions frontend/src/entry/model/releases/ReleaseDisplay.tsx
Original file line number Diff line number Diff line change
@@ -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}`}
11 changes: 9 additions & 2 deletions frontend/src/marketplace/EntryList.tsx
Original file line number Diff line number Diff line change
@@ -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
4 changes: 1 addition & 3 deletions frontend/src/wrapper/SideNavigation.tsx
Original file line number Diff line number Diff line change
@@ -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,
3 changes: 0 additions & 3 deletions frontend/src/wrapper/TopNavigation.tsx
Original file line number Diff line number Diff line change
@@ -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,
2 changes: 0 additions & 2 deletions frontend/utils/constants.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
export const DRAWER_WIDTH = 240

export const HIDDEN_TOKEN_ACCESS_KEY = 'xxxxxxxxxx'

export const HIDDEN_TOKEN_SECRET_KEY = 'xxxxxxxxxxxxxxxxxxxxx'
2 changes: 1 addition & 1 deletion lib/landing/src/Wrapper.tsx
Original file line number Diff line number Diff line change
@@ -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,

0 comments on commit dfb4897

Please sign in to comment.