fix: Fix sidenav element on multiple lines

Author: marienfressinaud

src/assets/stylesheets/layouts/sidenav.css

@@ -84,19 +84,21 @@
 }
 
 .sidenav__menu-item {
-    overflow-wrap: anywhere;
-
-    display: block;
+    display: flex;
     width: 100%;
     padding: var(--space-small);
 
+    align-items: flex-start;
+
     color: var(--color-text);
     line-height: 1.5;
     text-decoration: none;
 
     border-radius: var(--border-radius);
 
     transition: background-color 0.2s ease-in-out;
+    overflow-wrap: anywhere;
+    gap: var(--space-small);
 }
 
 .sidenav__menu-item:hover,
@@ -112,19 +114,22 @@
 }
 
 .sidenav__menu-item .icon {
-    margin-right: var(--space-smaller);
+    flex-shrink: 0;
 }
 
 .sidenav__menu-item .sidenav__menu-image {
     width: 1.5em;
     height: 1.5em;
-    margin-right: var(--space-smaller);
 
-    vertical-align: top;
+    flex-shrink: 0;
 
     border-radius: var(--border-radius-small);
 }
 
+.sidenav__menu-label {
+    flex: 1;
+}
+
 .sidenav__menu-title {
     font-size: var(--font-size-normal);
     font-weight: 600;

src/views/layouts/_sidenav_element.html.twig

@@ -45,6 +45,8 @@
             {{ icon(element.icon) }}
         {% endif %}
 
-        {{ element.label }}
+        <span class="sidenav__menu-label">
+            {{ element.label }}
+        </span>
     </a>
 {% endif %}