fix: small breadcrumb adjustments (#2893)

https://linear.app/unleash/issue/2-577/small-breadcrumb-adjustments Includes small adjustments to the breadcrumb navigation component. ### Long chain path (ellipts if width > 200px) ![image](https://user-images.githubusercontent.com/14320932/212155100-973c2b31-d990-4c0a-a67b-3d3110231569.png) ### Long final path (no longer ellipts as long as it has enough remaining space) ![image](https://user-images.githubusercontent.com/14320932/212156184-041f671a-6bf5-4e43-9ef0-4c89015837cc.png) ### Long final path with resized window (still ellipts when needed) ![image](https://user-images.githubusercontent.com/14320932/212157091-6453c881-1c0f-4785-935e-4993ed479280.png)
Unleash · Jan 16, 2023 · b3fcc97 · b3fcc97
1 parent 4286103
commit b3fcc97
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
@@ -3,27 +3,29 @@ import { Link, useLocation } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import AccessContext from 'contexts/AccessContext';
 import { useContext } from 'react';
-import StringTruncator from '../StringTruncator/StringTruncator';
 import { styled } from '@mui/material';
+import { textTruncated } from 'themes/themeStyles';
 
 const StyledBreadcrumbContainer = styled('div')(({ theme }) => ({
     height: theme.spacing(2.5),
     margin: theme.spacing(2, 0),
 }));
 
-const StyledParagraph = styled('p')({
-    color: 'inherit',
-    '& > *': {
-        verticalAlign: 'middle',
+const StyledBreadcrumbs = styled(Breadcrumbs)({
+    '& > ol': {
+        flexWrap: 'nowrap',
+        '& > li:last-child': {
+            minWidth: 0,
+        },
     },
 });
 
+const StyledParagraph = styled('p')(textTruncated);
+
 const StyledLink = styled(Link)(({ theme }) => ({
-    textDecoration: 'none',
     '& > *': {
-        verticalAlign: 'middle',
+        maxWidth: theme.spacing(25),
     },
-    color: theme.palette.primary.main,
 }));
 
 const BreadcrumbNav = () => {
@@ -60,17 +62,13 @@ const BreadcrumbNav = () => {
                     <ConditionallyRender
                         condition={paths.length > 1}
                         show={
-                            <Breadcrumbs aria-label="Breadcrumbs">
+                            <StyledBreadcrumbs aria-label="Breadcrumbs">
                                 {paths.map((path, index) => {
                                     const lastItem = index === paths.length - 1;
                                     if (lastItem) {
                                         return (
                                             <StyledParagraph key={path}>
-                                                <StringTruncator
-                                                    text={path}
-                                                    maxWidth="200"
-                                                    maxLength={25}
-                                                />
+                                                {path}
                                             </StyledParagraph>
                                         );
                                     }
@@ -87,15 +85,13 @@ const BreadcrumbNav = () => {
 
                                     return (
                                         <StyledLink key={path} to={link}>
-                                            <StringTruncator
-                                                maxLength={25}
-                                                text={path}
-                                                maxWidth="200"
-                                            />
+                                            <StyledParagraph>
+                                                {path}
+                                            </StyledParagraph>
                                         </StyledLink>
                                     );
                                 })}
-                            </Breadcrumbs>
+                            </StyledBreadcrumbs>
                         }
                     />
                 }

diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts
@@ -190,9 +190,9 @@ export default createTheme({
                     fontSize: '0.875rem',
                     '& a': {
                         color: colors.purple[900],
-                        textDecoration: 'underline',
+                        textDecoration: 'none',
                         '&:hover': {
-                            textDecoration: 'none',
+                            textDecoration: 'underline',
                         },
                     },
                 },

diff --git a/frontend/src/themes/themeStyles.ts b/frontend/src/themes/themeStyles.ts
@@ -29,6 +29,12 @@ export const textCenter = {
     textAlign: 'center',
 } as const;
 
+export const textTruncated = {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+} as const;
+
 export const flexRow = {
     display: 'flex',
     alignItems: 'center',