fix(admin-ui): Fix long nav items (#1362)

Closes #1361 
* fix(admin-ui): Overflowing navigation item
* fix(admin-ui): Alignment of multiline navigation items
* fix(admin-ui): Overflowing navigation header

packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.html

@@ -15,7 +15,7 @@
                         ></vdr-status-badge>
                     </ng-container>
                     <input [id]="section.id" type="checkbox" [checked]="section.collapsedByDefault" />
-                    <label [for]="section.id">{{ section.label | translate }}</label>
+                    <label class="nav-group-header" [for]="section.id">{{ section.label | translate }}</label>
                     <ul class="nav-list">
                         <ng-container *ngFor="let item of section.items">
                             <li *ngIf="shouldDisplayLink(item)">

packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.scss

@@ -12,7 +12,22 @@ nav.sidenav {
     border-right-color: var(--clr-sidenav-border-color);
 }
 
+.sidenav .nav-group {
+    .nav-list {
+        margin: 0;
+    }
+    .nav-group-header {
+        margin: 0;
+    }
+    .nav-link {
+        display: inline-flex;
+        line-height: 1rem;
+        padding-right: 0.6rem;
+    }
+}
+
 .nav-list clr-icon {
+    flex-shrink: 0;
     margin-right: 12px;
 }