From 3daacd6b0d371d8ed8cc4a52c5a87168b212265d Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Wed, 20 Apr 2022 13:06:31 +0200
Subject: [PATCH] Remove the 100% height again to avoid that the team planner
 takes the whole availabe height. Instead, make the toolbar sticky so that the
 smoother scrolling effect rem remains

---
 .../planner/team-planner.component.ts         |  1 -
 .../content/modules/_team_planner.sass        | 24 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.ts b/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.ts
index a0af1bdd5f..d59c51f5bd 100644
--- a/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.ts
+++ b/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.ts
@@ -382,7 +382,6 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit,
       .then(() => {
         this.calendarOptions$.next(
           this.calendar.calendarOptions({
-            height: '100%',
             schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
             selectable: true,
             plugins: [resourceTimelinePlugin, interactionPlugin],
diff --git a/frontend/src/global_styles/content/modules/_team_planner.sass b/frontend/src/global_styles/content/modules/_team_planner.sass
index 9795db3ed7..4889283394 100644
--- a/frontend/src/global_styles/content/modules/_team_planner.sass
+++ b/frontend/src/global_styles/content/modules/_team_planner.sass
@@ -20,8 +20,30 @@
     .fc-scrollgrid-section-footer
       display: none
 
+  // -----------------
+  // This whole block is necessary to make the toolbar sticky and create a feeling of the team planner scrolling only inside.
+  // FullCalendar would normally do that on its own when passing `height: 100%` as parameter.
+  // However, this results in the team planner always spanning the complete screen which looks weird,
+  // if you only have few assignees. The last row is then always blown up.
   .fc-header-toolbar
-    margin-left: 138px
+    position: sticky
+    top: 0
+    background: white
+    z-index: 5
+    padding-left: 138px
+    padding-bottom: 1.5rem
+    margin: 0 !important
+
+  &--add-existing-toggle
+    z-index: 6
+
+  .fc-scrollgrid
+    border-top: none !important
+
+  .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky > *
+    top: 58px !important
+    border-top: 1px solid var(--fc-border-color, #ddd)
+  //-----------------
 
   &_with_left_side_pane
     .fc-header-toolbar