Merge pull request #10524 from opf/fix/42025-big-white-space-in-empty-team-planner

[42025] Big white space in empty team planner

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],

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