Vertically align the date with the toolbar buttons and take care that the date stays in place when opening the addExisting pane

frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html

@@ -1,5 +1,6 @@
 <div
   class="op-team-planner"
+  [ngClass]="{'op-team-planner_with_left_side_pane' : (showAddExistingPane | async)}"
 >
   <ng-container
     *ngIf="(calendarOptions$ | async) as calendarOptions"

frontend/src/global_styles/content/modules/_team_planner.sass

@@ -21,4 +21,8 @@
       display: none
 
   .fc-header-toolbar
-    margin-left: 132px
+    margin-left: 138px
+
+  &_with_left_side_pane
+    .fc-header-toolbar
+      margin-left: -136px

frontend/src/global_styles/vendor/_full_calendar.sass

@@ -123,6 +123,7 @@
     // ------------------------ BEGIN: Calendar toolbar ------------------------
     .fc-toolbar-title
       font-size: 16px
+      padding-bottom: 0
 
     .fc-header-toolbar.fc-toolbar .fc-toolbar-chunk
       .fc-button
@@ -135,16 +136,18 @@
         &:focus
           box-shadow: none
 
-        // ensure to have higher specificity than above extend
-        .fc-button-group
-          .fc-button
-            margin-right: 0
-            margin-bottom: 0
-            padding: 0.4em 0.65em
-
-            &.fc-button-active
-              @extend .button, .-active
-              margin-right: 0 !important
+      // ensure to have higher specificity than above extend
+      .fc-button-group
+        margin-left: 8px
+        .fc-button
+          margin-right: 0
+          margin-bottom: 0
+          padding: 0.4em 0.65em
+
+          &.fc-button-active
+            @extend .button, .-active
+            margin-right: 0 !important
+            margin-bottom: 0 !important
 
       .fc-today-button
         margin: 0