feat: add establishment name ellipsis + reduce menu width

frontend/src/components/Collapse/collapse.module.scss

@@ -2,7 +2,7 @@
   $background-color: var(--grey-975);
 
   line-height: initial;
-  width: 350px;
+  width: 300px;
   text-align: left;
 
   .header {

frontend/src/components/Header/SmallHeader.tsx

@@ -39,6 +39,7 @@ function SmallHeader() {
   ): MainNavigationProps.Item {
     const link = getUserNavItem(navItem);
     return {
+      className: styles.mainNavigationItem,
       linkProps: {
         to: link.url
       },
@@ -116,7 +117,7 @@ function SmallHeader() {
                   }}
                 />
               ) : (
-                <Typography component="span" mr={2} variant="body2">
+                <Typography className={styles.establishmentName} component="span" mr={2} variant="body2">
                   {establishment?.name}
                 </Typography>
               )

frontend/src/components/Header/small-header.module.scss

@@ -26,3 +26,40 @@
   position: relative;
   top: -2px;
 }
+
+.mainNavigationItem {
+  margin-left: 0px !important;
+}
+
+@media screen and (max-width: 1484px) {
+  .establishmentName {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@media screen and (max-width: 1412px) {
+  .establishmentName {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@media screen and (max-width: 1362px) {
+  .establishmentName {
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@media screen and (max-width: 1312px) {
+  .establishmentName {
+    display: none;
+  }
+}

frontend/src/dsfr-fix.scss

@@ -110,7 +110,3 @@ span.fr-icon-checkbox-circle-line.ds-fr-tag-icon {
     }
   }
 }
-
-.fr-nav__list > :first-child:nth-last-child(4) ~ * {
-  margin-left: 0px;
-}

frontend/src/views/Account/AccountSideMenu.tsx

@@ -5,6 +5,7 @@ import { logOut } from '../../store/actions/authenticationAction';
 import { useUser } from '../../hooks/useUser';
 import { useLocation } from 'react-router-dom';
 import classNames from 'classnames';
+import styles from './account-side-menu.module.scss';
 
 const AccountSideMenu = () => {
   const location = useLocation();
@@ -31,7 +32,7 @@ const AccountSideMenu = () => {
         </AppLink>
       </div>
       <hr className="fr-py-1w" />
-      <Text className="color-grey-625" size="sm" bold spacing="mb-0">
+      <Text className={`color-grey-625 ${styles.establishmentName}`} size="sm" bold spacing="mb-0">
         {establishment?.name}
       </Text>
       <div className="fr-py-2w">

frontend/src/views/Account/account-side-menu.module.scss

@@ -0,0 +1,4 @@
+.establishmentName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}