From fc03bc83683e8fc3101648b10798bfb76530c514 Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Wed, 16 Feb 2022 13:15:14 +0100
Subject: [PATCH] Vertically align the date with the toolbar buttons and take
 care that the date stays in place when opening the addExisting pane

---
 .../planner/team-planner.component.html       |  1 +
 .../content/modules/_team_planner.sass        |  6 ++++-
 .../global_styles/vendor/_full_calendar.sass  | 23 +++++++++++--------
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html b/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html
index 68839eca15..c10a496504 100644
--- a/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html
+++ b/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"
diff --git a/frontend/src/global_styles/content/modules/_team_planner.sass b/frontend/src/global_styles/content/modules/_team_planner.sass
index c4f9a8f266..2501b81e28 100644
--- a/frontend/src/global_styles/content/modules/_team_planner.sass
+++ b/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
diff --git a/frontend/src/global_styles/vendor/_full_calendar.sass b/frontend/src/global_styles/vendor/_full_calendar.sass
index 5c7ce63e71..ecee60c03b 100644
--- a/frontend/src/global_styles/vendor/_full_calendar.sass
+++ b/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