From a39c3e27e7bf21a3a4b8505ebdd1165fa819c859 Mon Sep 17 00:00:00 2001 From: araddcc002 Date: Fri, 24 Jan 2025 14:03:57 +0000 Subject: [PATCH 1/4] fixed some text wrapping issues in side nav and file download component --- frontend/src/entry/model/releases/FileDownload.tsx | 6 ++++-- frontend/src/wrapper/SideNavigation.tsx | 4 +--- frontend/src/wrapper/TopNavigation.tsx | 3 --- frontend/utils/constants.ts | 2 -- lib/landing/src/Wrapper.tsx | 2 +- 5 files changed, 6 insertions(+), 11 deletions(-) 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/wrapper/SideNavigation.tsx b/frontend/src/wrapper/SideNavigation.tsx index b489b2d15..ab10eccb3 100644 --- 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 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, From 0edad69afb0d98c94534bf1f9425cf87bfc6d37e Mon Sep 17 00:00:00 2001 From: araddcc002 Date: Mon, 27 Jan 2025 11:20:36 +0000 Subject: [PATCH 2/4] entry list text overflow improved --- frontend/src/marketplace/EntryList.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/marketplace/EntryList.tsx b/frontend/src/marketplace/EntryList.tsx index 383cac9b9..cae9ad396 100644 --- 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) => ( - + {entry.name} - + {entry.description} Date: Mon, 27 Jan 2025 14:15:43 +0000 Subject: [PATCH 3/4] added an optional nowrap property to link component for handling long text --- frontend/src/Link.tsx | 19 +++++++++++++++++-- .../entry/model/releases/ReleaseDisplay.tsx | 5 +++-- 2 files changed, 20 insertions(+), 4 deletions(-) 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/ReleaseDisplay.tsx b/frontend/src/entry/model/releases/ReleaseDisplay.tsx index 0187c0fcf..b7c8e896b 100644 --- a/frontend/src/entry/model/releases/ReleaseDisplay.tsx +++ b/frontend/src/entry/model/releases/ReleaseDisplay.tsx @@ -101,9 +101,10 @@ export default function ReleaseDisplay({ justifyContent='space-between' alignItems='center' spacing={1} + sx={{ minWidth: 0 }} > - - + + {model.name} - {release.semver} From ebd4221ef7b7b9440cf9fd5673bad381a17465e8 Mon Sep 17 00:00:00 2001 From: araddcc002 Date: Tue, 28 Jan 2025 09:37:05 +0000 Subject: [PATCH 4/4] updated release name display --- frontend/src/entry/model/releases/ReleaseDisplay.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/src/entry/model/releases/ReleaseDisplay.tsx b/frontend/src/entry/model/releases/ReleaseDisplay.tsx index b7c8e896b..1485b64bd 100644 --- a/frontend/src/entry/model/releases/ReleaseDisplay.tsx +++ b/frontend/src/entry/model/releases/ReleaseDisplay.tsx @@ -104,9 +104,14 @@ export default function ReleaseDisplay({ sx={{ minWidth: 0 }} > - - {model.name} - {release.semver} - + + + {model.name} - + + + {release.semver} + +