fix: Change Header padding and sizing

* Add max width to name and set it to truncate to ... * Drop padding to make more room for name * Delete old unused header * Set menu items to not wrap text
bcgov · Dec 5, 2024 · 4801893 · 4801893
1 parent 3219a4d
commit 4801893
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 32 deletions.
diff --git a/frontend/src/components/BCNavbar/components/DefaultNavbarLink.jsx b/frontend/src/components/BCNavbar/components/DefaultNavbarLink.jsx
@@ -31,7 +31,7 @@ function DefaultNavbarLink({
       mb={isMobileView ? 0.2 : -1}
       mr={isMobileView ? 2 : 1}
       py={1}
-      px={2}
+      px={1}
       display="flex"
       alignItems="center"
       sx={({ transitions, palette }) => ({
@@ -54,8 +54,7 @@ function DefaultNavbarLink({
           backgroundColor: isMobileView
             ? 'rgba(0, 0, 0, 0.2)'
             : 'rgba(0, 0, 0, 0.3)',
-          paddingBottom: isMobileView ? '11px' : '12px',
-          paddingLeft: isMobileView ? '13px' : 2
+          paddingBottom: isMobileView ? '11px' : '12px'
         },
         transform: 'translateX(0)',
         transition: transitions.create('transform', {
@@ -87,7 +86,9 @@ function DefaultNavbarLink({
           lineHeight: 0,
           '&:hover': {
             textDecoration: 'none'
-          }
+          },
+          whiteSpace: 'nowrap',
+          flexShrink: 0
         }}
       >
         {name}

diff --git a/frontend/src/components/BCNavbar/components/MenuBar.jsx b/frontend/src/components/BCNavbar/components/MenuBar.jsx
@@ -17,18 +17,19 @@ const MenuBar = (props) => {
         backdropFilter: `saturate(200%) blur(30px)`,
         color: white.main,
         maxHeight: '50px',
-        display: { xs: 'none', sm: 'flex' }
+        display: { xs: 'none', sm: 'flex' },
+        justifyContent: 'space-between'
       })}
       disableGutters
       variant="dense"
     >
       <BCBox
         sx={{
-          flexGrow: 1,
           display: { xs: 'none', lg: 'flex' },
           flexDirection: 'row',
           margin: 0,
-          padding: 0
+          padding: 0,
+          marginLeft: 1
         }}
       >
         {routes.map(

diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
diff --git a/frontend/src/layouts/MainLayout/components/Logout.jsx b/frontend/src/layouts/MainLayout/components/Logout.jsx
@@ -18,15 +18,27 @@ export const Logout = () => {
       <BCBox
         display="flex"
         alignItems="center"
-        justifyContent="space-around"
+        justifyContent="space-between"
         mr={3}
       >
         {currentUser?.firstName && (
-          <BCTypography variant="subtitle1" color="light" mx={3}>
+          <BCTypography
+            style={{
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              flexShrink: 1,
+              marginRight: '12px',
+              maxWidth: '17vw'
+            }}
+            variant="subtitle1"
+            color="light"
+          >
             {currentUser?.firstName + ' ' + currentUser?.lastName}
           </BCTypography>
         )}
         <BCButton
+          style={{ whiteSpace: 'nowrap', flexShrink: 0 }}
           onClick={() => {
             logout()
           }}