Smoother overflow in navbar

Arquisoft · Apr 29, 2024 · 9722121 · 9722121
1 parent 062b70f
commit 9722121
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/webapp/src/common/Nav.tsx b/webapp/src/common/Nav.tsx
@@ -64,8 +64,7 @@ const NavBar: React.FC<{}> = () =>
         <AppBar className="nav-appBar" sx={
             { 
                 display: 'flex', 
-                flexDirection: 'row',
-                flexWrap: 'nowrap', 
+                flexDirection: 'row', 
                 alignItems: 'flex-start', 
                 justifyContent: 'flex-start',
                 width: '100%',
@@ -77,6 +76,7 @@ const NavBar: React.FC<{}> = () =>
                 <Container sx={{ maxWidth: '100% !important' }}>
                     <Grid
                     container
+                    flexWrap={'nowrap'}
                     direction="row"
                     alignItems="center"
                     justifyContent="space-between"

diff --git a/webapp/src/common/nav.scss b/webapp/src/common/nav.scss
@@ -1,6 +1,5 @@
 .navbar {
   width:100%;
-  height: 50px;
   display: flex;
   align-items: center;
 }
@@ -20,6 +19,13 @@
 }
 
 .logo{
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: nowrap;
+  height: 40px;
   font-weight: 500;
   font-size: xx-large;
   margin-right: 15px !important;