diff --git a/frontend/src/Link.tsx b/frontend/src/Link.tsx index 40ef297d8..376a61cb0 100644 --- 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 & Omit @@ -58,6 +59,7 @@ const Link = forwardRef(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(function Link(props, ref) ref={ref} {...nextjsProps} {...other} - style={{ textDecoration: 'none' }} + style={ + noWrap + ? { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', textDecoration: 'none' } + : { textDecoration: 'none' } + } /> ) } - return + return ( + + ) }) export default Link diff --git a/frontend/src/entry/model/releases/FileDownload.tsx b/frontend/src/entry/model/releases/FileDownload.tsx index 0796c50bc..be8673e28 100644 --- 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) && ( - + - {file.name} + + {file.name} + diff --git a/frontend/src/entry/model/releases/ReleaseDisplay.tsx b/frontend/src/entry/model/releases/ReleaseDisplay.tsx index 0187c0fcf..1485b64bd 100644 --- 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 }} > - - - {model.name} - {release.semver} - + + + + {model.name} - + + + {release.semver} + + ( - + {entry.name} - + {entry.description} ({ 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 index a3f9c1b0c..8373d75d9 100644 --- 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 index ae999a3e0..2b753b4f7 100644 --- 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 index 053bb56e8..8ba9d66c1 100644 --- 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,