From e237b394761af5683f57f8f0cb44193de39f71f8 Mon Sep 17 00:00:00 2001
From: luisa-beerboom <101706784+luisa-beerboom@users.noreply.github.com>
Date: Tue, 26 Sep 2023 16:34:05 +0200
Subject: [PATCH] Livestream window should not overlap other elements (#2411)

---
 .../components/banner/banner.component.html   |  36 +-
 .../components/banner/banner.component.ts     |  18 +-
 .../site-wrapper/site-wrapper.module.ts       |   2 +
 .../user-detail-view.component.html           |   2 +-
 .../list-of-speakers-content.component.html   |   2 +-
 .../list-of-speakers-content.component.ts     |   3 +
 .../projectable-list.component.html           |   1 +
 .../projectable-list.component.ts             |   9 +-
 ...meetings-navigation-wrapper.component.html |   4 +-
 ...meetings-navigation-wrapper.component.scss |   2 +-
 .../list-of-speakers.component.html           |   1 +
 .../topic-detail/topic-detail.component.html  |   2 +-
 .../agenda-sort/agenda-sort.component.html    |   2 +-
 .../mediafile-list.component.html             |   1 +
 .../mediafile-list.component.ts               |  10 +-
 .../mediafile-upload.component.html           |   2 +-
 ...meeting-settings-group-list.component.html |  29 +-
 .../category-detail-sort.component.html       |   2 +-
 .../category-detail.component.html            |   2 +-
 .../category-list-sort.component.html         |   2 +-
 .../comment-section-list.component.html       | 118 ++---
 .../comment-section-sort.component.html       |   2 +-
 .../motion-call-list.component.html           |   2 +-
 .../amendment-create-wizard.component.html    |   2 +-
 .../amendment-create-wizard.component.scss    |  10 +-
 .../motion-detail-view.component.html         |   2 +-
 .../motion-list/motion-list.component.html    |  56 ++-
 .../tag-list/tag-list.component.html          |   1 +
 .../components/tag-list/tag-list.component.ts |   9 +-
 .../workflow-detail-sort.component.html       |   2 +-
 .../workflow-detail.component.scss            |   2 +-
 .../participant-create-wizard.component.html  |   4 +-
 .../participant-list.component.html           |   1 +
 .../participant-list.component.ts             |   8 +-
 .../projector-detail.component.html           | 462 +++++++++---------
 .../projector-list.component.html             |   3 +-
 .../file-list/file-list.component.html        |   1 +
 .../file-list/file-list.component.ts          |   3 +
 .../head-bar/head-bar.component.scss          |   2 +-
 .../filter-menu/filter-menu.component.html    |   2 +-
 .../filter-menu/filter-menu.component.ts      |   3 +
 .../list/components/list/list.component.html  |   1 +
 .../list/components/list/list.component.ts    |   7 +-
 .../sort-filter-bar.component.html            |   1 +
 .../sort-filter-bar.component.ts              |   3 +
 .../view-list/view-list.component.html        |   2 +
 .../view-list/view-list.component.ts          |   3 +
 .../scrolling-table.component.html            |   6 +-
 .../scrolling-table.component.ts              |  18 +-
 client/src/styles.scss                        |   3 +-
 50 files changed, 476 insertions(+), 395 deletions(-)

diff --git a/client/src/app/site/modules/site-wrapper/components/banner/banner.component.html b/client/src/app/site/modules/site-wrapper/components/banner/banner.component.html
index 0d9d282258..5ed51daca6 100644
--- a/client/src/app/site/modules/site-wrapper/components/banner/banner.component.html
+++ b/client/src/app/site/modules/site-wrapper/components/banner/banner.component.html
@@ -1,18 +1,20 @@
-<div
-    *ngFor="let banner of activeBanners | async"
-    class="banner flex-center background-accent"
-    [ngClass]="[banner.class ? banner.class : '', banner.largerOnMobileView ? 'larger-on-mobile' : '']"
->
-    <ng-container *ngIf="banner.component">
-        <ng-template [cdkPortalOutlet]="createComponentPortal(banner.component)"></ng-template>
-    </ng-container>
-    <ng-container *ngIf="!banner.component">
-        <a class="banner-link" [routerLink]="banner.link" [style.cursor]="banner.link ? 'pointer' : 'default'">
-            <mat-icon>{{ banner.icon }}</mat-icon>
-            <span>{{ banner.text | translate }}</span>
-            <div *ngIf="banner.subText">
-                {{ banner.subText | translate }}
-            </div>
-        </a>
-    </ng-container>
+<div osResized (osResizedHeight)="registerBannerHeight($event)">
+    <div
+        *ngFor="let banner of activeBanners | async"
+        class="banner flex-center background-accent"
+        [ngClass]="[banner.class ? banner.class : '', banner.largerOnMobileView ? 'larger-on-mobile' : '']"
+    >
+        <ng-container *ngIf="banner.component">
+            <ng-template [cdkPortalOutlet]="createComponentPortal(banner.component)"></ng-template>
+        </ng-container>
+        <ng-container *ngIf="!banner.component">
+            <a class="banner-link" [routerLink]="banner.link" [style.cursor]="banner.link ? 'pointer' : 'default'">
+                <mat-icon>{{ banner.icon }}</mat-icon>
+                <span>{{ banner.text | translate }}</span>
+                <div *ngIf="banner.subText">
+                    {{ banner.subText | translate }}
+                </div>
+            </a>
+        </ng-container>
+    </div>
 </div>
diff --git a/client/src/app/site/modules/site-wrapper/components/banner/banner.component.ts b/client/src/app/site/modules/site-wrapper/components/banner/banner.component.ts
index 65201a1a4f..abaae24cff 100644
--- a/client/src/app/site/modules/site-wrapper/components/banner/banner.component.ts
+++ b/client/src/app/site/modules/site-wrapper/components/banner/banner.component.ts
@@ -1,5 +1,5 @@
 import { ComponentPortal } from '@angular/cdk/portal';
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Constructable } from 'src/app/domain/interfaces/constructable';
 
@@ -10,14 +10,28 @@ import { BannerDefinition, BannerService } from '../../services/banner.service';
     templateUrl: `./banner.component.html`,
     styleUrls: [`./banner.component.scss`]
 })
-export class BannerComponent {
+export class BannerComponent implements OnDestroy {
     public readonly activeBanners: Observable<BannerDefinition[]>;
 
+    private ownHeight = 0;
+
     public constructor(bannerService: BannerService) {
         this.activeBanners = bannerService.getActiveBannersObservable();
     }
 
+    public ngOnDestroy(): void {
+        this.registerBannerHeight(0);
+    }
+
     public createComponentPortal(component: Constructable): ComponentPortal<any> {
         return new ComponentPortal(component);
     }
+
+    public registerBannerHeight(height: number): void {
+        const areaHeight =
+            Number(document.documentElement.style.getPropertyValue(`--banner-area-height`).replace(`px`, ``)) || 0;
+        const newHeight = areaHeight === this.ownHeight ? height : areaHeight - this.ownHeight + height;
+        document.documentElement.style.setProperty(`--banner-area-height`, `${newHeight}px`);
+        this.ownHeight = height;
+    }
 }
diff --git a/client/src/app/site/modules/site-wrapper/site-wrapper.module.ts b/client/src/app/site/modules/site-wrapper/site-wrapper.module.ts
index 8345038265..855c7bee0e 100644
--- a/client/src/app/site/modules/site-wrapper/site-wrapper.module.ts
+++ b/client/src/app/site/modules/site-wrapper/site-wrapper.module.ts
@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
+import { DirectivesModule } from 'src/app/ui/directives';
 
 import { BannerComponent } from './components/banner/banner.component';
 import { SiteWrapperComponent } from './components/site-wrapper/site-wrapper.component';
@@ -14,6 +15,7 @@ import { SiteWrapperServiceModule } from './services/site-wrapper-service.module
     declarations: [SiteWrapperComponent, BannerComponent],
     imports: [
         CommonModule,
+        DirectivesModule,
         RouterModule,
         PortalModule,
         MatButtonModule,
diff --git a/client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.html b/client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.html
index 605540debb..7357b42d78 100644
--- a/client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.html
+++ b/client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.html
@@ -1,4 +1,4 @@
-<div class="content-container">
+<div class="content-container spacer-bottom-60">
     <ng-container *ngIf="isEditing">
         <ng-container *ngIf="useMatcard">
             <mat-card class="os-card">
diff --git a/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/list-of-speakers-content/list-of-speakers-content.component.html b/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/list-of-speakers-content/list-of-speakers-content.component.html
index 80c54d4115..0a2f28ce01 100644
--- a/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/list-of-speakers-content/list-of-speakers-content.component.html
+++ b/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/list-of-speakers-content/list-of-speakers-content.component.html
@@ -1,4 +1,4 @@
-<mat-card class="os-card">
+<mat-card class="os-card" [ngClass]="{ 'spacer-bottom-60': addBottomSpacer }">
     <!-- Title -->
     <os-projectable-title class="los-title" *ngIf="!explicitTitleContent" [model]="listOfSpeakers">
         <mat-icon
diff --git a/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/list-of-speakers-content/list-of-speakers-content.component.ts b/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/list-of-speakers-content/list-of-speakers-content.component.ts
index a9f0ce806f..8002032018 100644
--- a/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/list-of-speakers-content/list-of-speakers-content.component.ts
+++ b/client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/list-of-speakers-content/list-of-speakers-content.component.ts
@@ -51,6 +51,9 @@ export class ListOfSpeakersContentComponent extends BaseMeetingComponent impleme
     @ViewChild(SortingListComponent)
     public listElement!: SortingListComponent;
 
+    @Input()
+    public addBottomSpacer = false;
+
     public finishedSpeakers: ViewSpeaker[] = [];
     public waitingSpeakers: ViewSpeaker[] = [];
     public activeSpeaker: ViewSpeaker | null = null;
diff --git a/client/src/app/site/pages/meetings/modules/meetings-component-collector/projectable-list/components/projectable-list/projectable-list.component.html b/client/src/app/site/pages/meetings/modules/meetings-component-collector/projectable-list/components/projectable-list/projectable-list.component.html
index 06a86f40de..02a9335222 100644
--- a/client/src/app/site/pages/meetings/modules/meetings-component-collector/projectable-list/components/projectable-list/projectable-list.component.html
+++ b/client/src/app/site/pages/meetings/modules/meetings-component-collector/projectable-list/components/projectable-list/projectable-list.component.html
@@ -14,6 +14,7 @@
     [showMenu]="showMenu"
     [sortService]="sortService"
     [vScrollFixed]="vScrollFixed"
+    [addBottomSpacer]="hasInteractionState | async"
     (selectedRowsChange)="selectedRowsChange.emit($event)"
     (searchFilterUpdated)="searchFilterUpdated.emit($event)"
 >
diff --git a/client/src/app/site/pages/meetings/modules/meetings-component-collector/projectable-list/components/projectable-list/projectable-list.component.ts b/client/src/app/site/pages/meetings/modules/meetings-component-collector/projectable-list/components/projectable-list/projectable-list.component.ts
index 53c5e75472..d3cef7e31e 100644
--- a/client/src/app/site/pages/meetings/modules/meetings-component-collector/projectable-list/components/projectable-list/projectable-list.component.ts
+++ b/client/src/app/site/pages/meetings/modules/meetings-component-collector/projectable-list/components/projectable-list/projectable-list.component.ts
@@ -1,7 +1,9 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
+import { map, Observable } from 'rxjs';
 import { Permission } from 'src/app/domain/definitions/permission';
 import { BaseViewModel } from 'src/app/site/base/base-view-model';
 import { HasListOfSpeakers, hasListOfSpeakers } from 'src/app/site/pages/meetings/pages/agenda';
+import { InteractionService } from 'src/app/site/pages/meetings/pages/interaction/services/interaction.service';
 import { BaseProjectableViewModel } from 'src/app/site/pages/meetings/view-models/base-projectable-model';
 import { OperatorService } from 'src/app/site/services/operator.service';
 import { ViewPortService } from 'src/app/site/services/view-port.service';
@@ -84,6 +86,10 @@ export class ProjectableListComponent<V extends BaseViewModel | BaseProjectableV
         }
     }
 
+    public get hasInteractionState(): Observable<boolean> {
+        return this.interactionService.isConfStateNone.pipe(map(isNone => !isNone));
+    }
+
     public readonly permission = Permission;
 
     public readonly isProjectedFn = (model: BaseProjectableViewModel) => this.service.isProjected(model);
@@ -93,7 +99,8 @@ export class ProjectableListComponent<V extends BaseViewModel | BaseProjectableV
         cd: ChangeDetectorRef,
         scrollingTableManager: ScrollingTableManageService,
         private operator: OperatorService,
-        private service: ProjectableListService
+        private service: ProjectableListService,
+        private interactionService: InteractionService
     ) {
         super(vp, cd, scrollingTableManager);
     }
diff --git a/client/src/app/site/pages/meetings/modules/meetings-navigation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.html b/client/src/app/site/pages/meetings/modules/meetings-navigation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.html
index bbc913c63a..ff6081b0f2 100644
--- a/client/src/app/site/pages/meetings/modules/meetings-navigation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.html
+++ b/client/src/app/site/pages/meetings/modules/meetings-navigation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.html
@@ -66,7 +66,9 @@
     <ng-template osSidenavMainContent>
         <div class="content">
             <os-global-headbar></os-global-headbar>
-            <router-outlet #o="outlet"></router-outlet>
+            <div class="scrollable-content">
+                <router-outlet #o="outlet"></router-outlet>
+            </div>
         </div>
         <div class="toolbars">
             <os-action-bar></os-action-bar>
diff --git a/client/src/app/site/pages/meetings/modules/meetings-navigation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.scss b/client/src/app/site/pages/meetings/modules/meetings-navigation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.scss
index a137ef2440..0dac783cd5 100644
--- a/client/src/app/site/pages/meetings/modules/meetings-navigation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.scss
+++ b/client/src/app/site/pages/meetings/modules/meetings-navigation/components/meetings-navigation-wrapper/meetings-navigation-wrapper.component.scss
@@ -65,7 +65,7 @@ mat-icon {
 }
 
 .scrollable-content {
-    height: calc(100% - var(--global-headbar-height));
+    height: calc(100vh - var(--global-headbar-height) - var(--view-headbar-height) - var(--banner-area-height));
     width: 100%;
     overflow: auto;
 }
diff --git a/client/src/app/site/pages/meetings/pages/agenda/modules/list-of-speakers/components/list-of-speakers/list-of-speakers.component.html b/client/src/app/site/pages/meetings/pages/agenda/modules/list-of-speakers/components/list-of-speakers/list-of-speakers.component.html
index 6ff8e42983..4992447024 100644
--- a/client/src/app/site/pages/meetings/pages/agenda/modules/list-of-speakers/components/list-of-speakers/list-of-speakers.component.html
+++ b/client/src/app/site/pages/meetings/pages/agenda/modules/list-of-speakers/components/list-of-speakers/list-of-speakers.component.html
@@ -33,6 +33,7 @@ <h2>
         #content
         [listOfSpeakers]="viewListOfSpeakers"
         [sortMode]="manualSortMode"
+        [addBottomSpacer]="true"
         (isListOfSpeakersEmptyEvent)="isListOfSpeakersEmpty = $event"
         (canReaddLastSpeakerEvent)="canReaddLastSpeaker = $event"
     ></os-list-of-speakers-content>
diff --git a/client/src/app/site/pages/meetings/pages/agenda/modules/topics/pages/topic-detail/components/topic-detail/topic-detail.component.html b/client/src/app/site/pages/meetings/pages/agenda/modules/topics/pages/topic-detail/components/topic-detail/topic-detail.component.html
index 53f8d78da2..35d304e5ab 100644
--- a/client/src/app/site/pages/meetings/pages/agenda/modules/topics/pages/topic-detail/components/topic-detail/topic-detail.component.html
+++ b/client/src/app/site/pages/meetings/pages/agenda/modules/topics/pages/topic-detail/components/topic-detail/topic-detail.component.html
@@ -110,7 +110,7 @@ <h4>{{ 'Text' | translate }}</h4>
         </form>
     </mat-card>
 
-    <div *ngIf="!editTopic">
+    <div *ngIf="!editTopic" class="spacer-bottom-60">
         <ng-container *ngIf="topic && topic.poll_ids?.length">
             <ng-container *ngFor="let poll of topic.poll_ids | reverse; trackBy: trackById">
                 <os-topic-poll [pollId]="poll" (dialogOpened)="openDialog(poll)"></os-topic-poll>
diff --git a/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-sort/components/agenda-sort/agenda-sort.component.html b/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-sort/components/agenda-sort/agenda-sort.component.html
index d51ece7f40..503dce9f99 100644
--- a/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-sort/components/agenda-sort/agenda-sort.component.html
+++ b/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-sort/components/agenda-sort/agenda-sort.component.html
@@ -36,7 +36,7 @@ <h2>{{ 'Sort agenda' | translate }}</h2>
         </mat-menu>
     </div>
 </div>
-<mat-card>
+<mat-card class="spacer-bottom-60">
     <div class="current-nodes">
         {{ seenNodes[0] }}
         <span>{{ 'of' | translate }}</span>
diff --git a/client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.html b/client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.html
index 548fa635db..a878309ce2 100644
--- a/client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.html
@@ -38,6 +38,7 @@ <h2>{{ 'Files' | translate }}</h2>
     [editFolderTemplate]="fileEditDialog"
     [fileMenuTemplate]="fileMenuTemplate"
     [shouldShowFileMenuFn]="shouldShowFileMenuFn"
+    [addBottomSpacer]="hasInteractionState | async"
     (directoryChanged)="changeDirectory($event.directoryId)"
     (beforeEditing)="onEditFile($event.file)"
     (saved)="onSaveFile($event.update)"
diff --git a/client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.ts b/client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.ts
index 1f9396e049..31707f4a19 100644
--- a/client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.ts
+++ b/client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, map, Observable, Subscription } from 'rxjs';
 import { Permission } from 'src/app/domain/definitions/permission';
 import { Mediafile } from 'src/app/domain/models/mediafiles/mediafile';
 import {
@@ -20,6 +20,7 @@ import { OperatorService } from 'src/app/site/services/operator.service';
 import { ViewPortService } from 'src/app/site/services/view-port.service';
 import { FileListComponent } from 'src/app/ui/modules/file-list/components/file-list/file-list.component';
 
+import { InteractionService } from '../../../../../interaction/services/interaction.service';
 import { ViewGroup } from '../../../../../participants/modules/groups/view-models/view-group';
 import { MEDIAFILES_SUBSCRIPTION } from '../../../../mediafiles.subscription';
 import { MediafileCommonService } from '../../../../services/mediafile-common.service';
@@ -76,6 +77,10 @@ export class MediafileListComponent extends BaseMeetingListViewComponent<ViewMed
      */
     public fileEditForm: UntypedFormGroup | null = null;
 
+    public get hasInteractionState(): Observable<boolean> {
+        return this.interactionService.isConfStateNone.pipe(map(isNone => !isNone));
+    }
+
     private folderSubscription: Subscription | null = null;
     private directorySubscription: Subscription | null = null;
     public directory: ViewMediafile | null = null;
@@ -96,7 +101,8 @@ export class MediafileListComponent extends BaseMeetingListViewComponent<ViewMed
         private formBuilder: UntypedFormBuilder,
         private groupRepo: MediafileListGroupService,
         private cd: ChangeDetectorRef,
-        private commonService: MediafileCommonService
+        private commonService: MediafileCommonService,
+        private interactionService: InteractionService
     ) {
         super(componentServiceCollector, translate);
         this.canMultiSelect = true;
diff --git a/client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-upload/components/mediafile-upload/mediafile-upload.component.html b/client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-upload/components/mediafile-upload/mediafile-upload.component.html
index 01dc078e0f..ce227fbb42 100644
--- a/client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-upload/components/mediafile-upload/mediafile-upload.component.html
+++ b/client/src/app/site/pages/meetings/pages/mediafiles/modules/mediafile-upload/components/mediafile-upload/mediafile-upload.component.html
@@ -12,7 +12,7 @@ <h2>{{ 'Upload files' | translate }}</h2>
     </div> -->
 </os-head-bar>
 
-<mat-card class="os-card">
+<mat-card class="os-card spacer-bottom-60">
     <os-media-upload-content
         [parallel]="parallel"
         [directoryId]="directoryId"
diff --git a/client/src/app/site/pages/meetings/pages/meeting-settings/pages/meeting-settings-group-list/components/meeting-settings-group-list/meeting-settings-group-list.component.html b/client/src/app/site/pages/meetings/pages/meeting-settings/pages/meeting-settings-group-list/components/meeting-settings-group-list/meeting-settings-group-list.component.html
index a406723df9..ceda5c66c6 100644
--- a/client/src/app/site/pages/meetings/pages/meeting-settings/pages/meeting-settings-group-list/components/meeting-settings-group-list/meeting-settings-group-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/meeting-settings/pages/meeting-settings-group-list/components/meeting-settings-group-list/meeting-settings-group-list.component.html
@@ -9,18 +9,25 @@ <h2>{{ 'Settings' | translate }}</h2>
     </div>
 </os-head-bar>
 
-<os-grid>
-    <os-tile *ngFor="let group of this.groups" orientation="vertical" [preferredSize]="2">
-        <div class="settings-group-card" [osPaper]="2" [osPaperRaise]="true" [routerLink]="group.label.toLowerCase()">
-            <div class="flex-center background-selected">
-                <mat-icon>{{ group.icon }}</mat-icon>
+<div class="spacer-bottom-60">
+    <os-grid>
+        <os-tile *ngFor="let group of this.groups" orientation="vertical" [preferredSize]="2">
+            <div
+                class="settings-group-card"
+                [osPaper]="2"
+                [osPaperRaise]="true"
+                [routerLink]="group.label.toLowerCase()"
+            >
+                <div class="flex-center background-selected">
+                    <mat-icon>{{ group.icon }}</mat-icon>
+                </div>
+                <div class="flex-center-unsafe text-center background-card">
+                    {{ group.label | translate }}
+                </div>
             </div>
-            <div class="flex-center-unsafe text-center background-card">
-                {{ group.label | translate }}
-            </div>
-        </div>
-    </os-tile>
-</os-grid>
+        </os-tile>
+    </os-grid>
+</div>
 
 <mat-menu #settingsMenu="matMenu">
     <button mat-menu-item (click)="resetAll()">
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-detail-sort/category-detail-sort.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-detail-sort/category-detail-sort.component.html
index 3a9d0f9e1d..3ac8fa7256 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-detail-sort/category-detail-sort.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-detail-sort/category-detail-sort.component.html
@@ -6,7 +6,7 @@ <h2 *ngIf="category">{{ 'Sort motions' | translate }} ({{ category.prefixedName
         </div>
     </os-head-bar>
 
-    <mat-card class="os-form-card">
+    <mat-card class="os-card spacer-bottom-60">
         <div *ngIf="isMultiSelect">
             <span>{{ sortSelector.multiSelectedIndex.length }}&nbsp;</span>
             <span>{{ 'selected' | translate }}</span>
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-detail/category-detail.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-detail/category-detail.component.html
index 6a25c5dece..291b524cea 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-detail/category-detail.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-detail/category-detail.component.html
@@ -17,7 +17,7 @@ <h2 *ngIf="selectedCategory">
         </div>
     </os-head-bar>
 
-    <mat-card>
+    <mat-card class="os-card spacer-bottom-60">
         <div *ngFor="let category of categories">
             <h2>
                 <span>{{ getLevelDashes(category) }}</span>
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-list-sort/category-list-sort.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-list-sort/category-list-sort.component.html
index bbe7177de4..a20547f95a 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-list-sort/category-list-sort.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/categories/components/category-list-sort/category-list-sort.component.html
@@ -5,7 +5,7 @@ <h2>{{ 'Sort categories' | translate }}</h2>
     </div>
 </os-head-bar>
 
-<mat-card>
+<mat-card class="os-card spacer-bottom-60">
     <os-sorting-tree
         #osSortedTree
         parentKey="parent_id"
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/comments/components/comment-section-list/comment-section-list.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/comments/components/comment-section-list/comment-section-list.component.html
index 8d0cc32028..db99e8b05e 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/comments/components/comment-section-list/comment-section-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/comments/components/comment-section-list/comment-section-list.component.html
@@ -13,64 +13,70 @@ <h2>{{ 'Comment fields' | translate }}</h2>
 </os-head-bar>
 
 <div class="head-spacer"></div>
-<mat-accordion class="os-card">
-    <mat-expansion-panel *ngFor="let section of this.commentSections" multiple="false">
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                <div class="header-container">
-                    <div class="name ellipsis-overflow">
-                        {{ section.name }}
-                    </div>
-                    <div class="read">
-                        <os-icon-container icon="visibility">
-                            <ng-container *ngIf="section.read_groups?.length">
-                                <ng-container
-                                    *ngTemplateOutlet="groupList; context: { groups: section.read_groups }"
-                                ></ng-container>
-                            </ng-container>
-                            <ng-container *ngIf="section.read_groups.length === 0">&ndash;</ng-container>
-                        </os-icon-container>
-                    </div>
-                    <div class="write">
-                        <os-icon-container icon="edit">
-                            <ng-container *ngIf="section.write_groups?.length">
-                                <ng-container
-                                    *ngTemplateOutlet="groupList; context: { groups: section.write_groups }"
-                                ></ng-container>
+<div class="spacer-bottom-60">
+    <mat-accordion class="os-card">
+        <mat-expansion-panel *ngFor="let section of this.commentSections" multiple="false">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <div class="header-container">
+                        <div class="name ellipsis-overflow">
+                            {{ section.name }}
+                        </div>
+                        <div class="read">
+                            <os-icon-container icon="visibility">
+                                <ng-container *ngIf="section.read_groups?.length">
+                                    <ng-container
+                                        *ngTemplateOutlet="groupList; context: { groups: section.read_groups }"
+                                    ></ng-container>
+                                </ng-container>
+                                <ng-container *ngIf="section.read_groups.length === 0">&ndash;</ng-container>
+                            </os-icon-container>
+                        </div>
+                        <div class="write">
+                            <os-icon-container icon="edit">
+                                <ng-container *ngIf="section.write_groups?.length">
+                                    <ng-container
+                                        *ngTemplateOutlet="groupList; context: { groups: section.write_groups }"
+                                    ></ng-container>
+                                </ng-container>
+                                <ng-container *ngIf="section.write_groups.length === 0">&ndash;</ng-container>
+                            </os-icon-container>
+                        </div>
+                        <div class="submitter-write">
+                            <ng-container *ngIf="section.submitter_can_write">
+                                <i>{{ 'Allow submitter edit' | translate }}</i>
                             </ng-container>
-                            <ng-container *ngIf="section.write_groups.length === 0">&ndash;</ng-container>
-                        </os-icon-container>
-                    </div>
-                    <div class="submitter-write">
-                        <ng-container *ngIf="section.submitter_can_write">
-                            <i>{{ 'Allow submitter edit' | translate }}</i>
-                        </ng-container>
+                        </div>
                     </div>
-                </div>
-            </mat-panel-title>
-        </mat-expansion-panel-header>
-        <h3>{{ 'Name' | translate }}</h3>
-        <div class="spacer-left">{{ section.name }}</div>
-        <h3>{{ 'Groups with read permissions' | translate }}</h3>
-        <ul *ngFor="let group of section.read_groups">
-            <li>{{ group.getTitle() | translate }}</li>
-        </ul>
-        <div class="spacer-left" *ngIf="section.read_groups.length === 0">{{ 'No groups selected' | translate }}</div>
-        <h3>{{ 'Groups with write permissions' | translate }}</h3>
-        <ul *ngFor="let group of section.write_groups">
-            <li>{{ group.getTitle() | translate }}</li>
-        </ul>
-        <div class="spacer-left" *ngIf="section.write_groups.length === 0">{{ 'No groups selected' | translate }}</div>
-        <mat-action-row>
-            <button mat-button (click)="openDialog(section)" mat-icon-button>
-                <mat-icon>edit</mat-icon>
-            </button>
-            <button mat-button (click)="onDeleteButton(section)" mat-icon-button>
-                <mat-icon>delete</mat-icon>
-            </button>
-        </mat-action-row>
-    </mat-expansion-panel>
-</mat-accordion>
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+            <h3>{{ 'Name' | translate }}</h3>
+            <div class="spacer-left">{{ section.name }}</div>
+            <h3>{{ 'Groups with read permissions' | translate }}</h3>
+            <ul *ngFor="let group of section.read_groups">
+                <li>{{ group.getTitle() | translate }}</li>
+            </ul>
+            <div class="spacer-left" *ngIf="section.read_groups.length === 0">
+                {{ 'No groups selected' | translate }}
+            </div>
+            <h3>{{ 'Groups with write permissions' | translate }}</h3>
+            <ul *ngFor="let group of section.write_groups">
+                <li>{{ group.getTitle() | translate }}</li>
+            </ul>
+            <div class="spacer-left" *ngIf="section.write_groups.length === 0">
+                {{ 'No groups selected' | translate }}
+            </div>
+            <mat-action-row>
+                <button mat-button (click)="openDialog(section)" mat-icon-button>
+                    <mat-icon>edit</mat-icon>
+                </button>
+                <button mat-button (click)="onDeleteButton(section)" mat-icon-button>
+                    <mat-icon>delete</mat-icon>
+                </button>
+            </mat-action-row>
+        </mat-expansion-panel>
+    </mat-accordion>
+</div>
 
 <mat-menu #commentListMenu="matMenu">
     <button mat-menu-item routerLink="sort">
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/comments/components/comment-section-sort/comment-section-sort.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/comments/components/comment-section-sort/comment-section-sort.component.html
index ce1b330b72..f2e134be40 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/comments/components/comment-section-sort/comment-section-sort.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/comments/components/comment-section-sort/comment-section-sort.component.html
@@ -6,7 +6,7 @@ <h2>{{ 'Sort comments' | translate }}</h2>
 </os-head-bar>
 
 <!-- Content -->
-<mat-card class="os-form-card">
+<mat-card class="os-card spacer-bottom-60">
     <!-- The sorting component -->
     <os-sorting-list (sortEvent)="onSortingChange($event)" [live]="true" [input]="comments" #sorter>
         <ng-template let-comment>
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-call-list/components/motion-call-list/motion-call-list.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/motion-call-list/components/motion-call-list/motion-call-list.component.html
index 09e6517268..837e280318 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-call-list/components/motion-call-list/motion-call-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-call-list/components/motion-call-list/motion-call-list.component.html
@@ -71,7 +71,7 @@ <h2>{{ 'Call list' | translate }}</h2>
     </div>
 </mat-menu>
 
-<mat-card>
+<mat-card class="spacer-bottom-60">
     <os-sorting-tree
         #osSortedTree
         parentKey="sort_parent_id"
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html
index e29759bbf0..8329f73882 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html
@@ -35,7 +35,7 @@ <h2>{{ 'New amendment' | translate }}</h2>
         <mat-horizontal-stepper #matStepper linear>
             <mat-step [completed]="contentForm.value.selectedParagraphs.length > 0">
                 <ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template>
-                <div class="amendment-create-wizard-wrapper">
+                <div class="amendment-create-wizard-wrapper spacer-bottom-20">
                     <cdk-virtual-scroll-viewport
                         itemSize="90"
                         minBufferPx="400"
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss
index fb8bc1de1e..f753416445 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss
@@ -1,6 +1,14 @@
 .amendment-create-wizard-wrapper {
     .paragraph-scroll {
-        height: calc(100vh - 160px);
+        height: calc(
+            100vh -
+                (
+                    var(--global-headbar-height) + var(--view-headbar-height) + var(--banner-area-height)
+                        // Offset for the headbars
+                    + 96px // Offset for the stepper
+                    + 20px // Offset for the bottom spacer
+                )
+        );
     }
 
     .paragraph-row {
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-detail-view/motion-detail-view.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-detail-view/motion-detail-view.component.html
index 87ea09a96c..20ea781c37 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-detail-view/motion-detail-view.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-detail-view/motion-detail-view.component.html
@@ -189,7 +189,7 @@ <h2 *ngIf="amendmentEdit">{{ 'New amendment' | translate }}</h2>
 
 <ng-template #desktopView>
     <div class="desktop-view" *ngIf="motion || newMotion">
-        <div class="desktop-left">
+        <div class="desktop-left" [ngClass]="{ 'spacer-bottom-60': !editMotion }">
             <!-- Meta Info -->
             <div *ngIf="!newMotion">
                 <ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container>
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
index 4befacdec1..8057b87531 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
@@ -194,37 +194,39 @@ <h2>{{ 'Motions' | translate }}</h2>
 </mat-menu>
 
 <ng-template #tiles>
-    <os-grid rowHeight="50%">
-        <os-tile *ngFor="let tile of listTiles" [data]="tile" (clicked)="changeToViewWithTileCategory(tile)">
-            <div class="motion-tile-card" [osPaper]="2" [osPaperRaise]="true">
-                <div class="full-height">
-                    <div class="flex-center background-selected">
-                        <span
-                            class="tile-content-prefix"
-                            [matBadge]="tile.amountOfMotions"
-                            [matBadgeColor]="'accent'"
-                            [ngSwitch]="tile.name"
-                        >
-                            <span *ngSwitchCase="'Favorites'"><mat-icon>star</mat-icon></span>
-                            <span *ngSwitchCase="'No category'"><mat-icon>block</mat-icon></span>
-                            <span *ngSwitchCase="'Personal notes'"><mat-icon>speaker_notes</mat-icon></span>
-                            <span *ngSwitchDefault>
-                                <span *ngIf="tile.prefix">
-                                    {{ tile.prefix }}
-                                </span>
-                                <span *ngIf="!tile.prefix">
-                                    <mat-icon>category</mat-icon>
+    <div class="spacer-bottom-60">
+        <os-grid rowHeight="50%">
+            <os-tile *ngFor="let tile of listTiles" [data]="tile" (clicked)="changeToViewWithTileCategory(tile)">
+                <div class="motion-tile-card" [osPaper]="2" [osPaperRaise]="true">
+                    <div class="full-height">
+                        <div class="flex-center background-selected">
+                            <span
+                                class="tile-content-prefix"
+                                [matBadge]="tile.amountOfMotions"
+                                [matBadgeColor]="'accent'"
+                                [ngSwitch]="tile.name"
+                            >
+                                <span *ngSwitchCase="'Favorites'"><mat-icon>star</mat-icon></span>
+                                <span *ngSwitchCase="'No category'"><mat-icon>block</mat-icon></span>
+                                <span *ngSwitchCase="'Personal notes'"><mat-icon>speaker_notes</mat-icon></span>
+                                <span *ngSwitchDefault>
+                                    <span *ngIf="tile.prefix">
+                                        {{ tile.prefix }}
+                                    </span>
+                                    <span *ngIf="!tile.prefix">
+                                        <mat-icon>category</mat-icon>
+                                    </span>
                                 </span>
                             </span>
-                        </span>
-                    </div>
-                    <div class="tile-content-name background-card">
-                        {{ tile.name | translate }}
+                        </div>
+                        <div class="tile-content-name background-card">
+                            {{ tile.name | translate }}
+                        </div>
                     </div>
                 </div>
-            </div>
-        </os-tile>
-    </os-grid>
+            </os-tile>
+        </os-grid>
+    </div>
 </ng-template>
 
 <mat-menu #motionListMenu="matMenu">
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/tags/components/tag-list/tag-list.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/tags/components/tag-list/tag-list.component.html
index 635db245f8..3eb559e809 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/tags/components/tag-list/tag-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/tags/components/tag-list/tag-list.component.html
@@ -15,6 +15,7 @@ <h2>{{ 'Tags' | translate }}</h2>
     [hiddenInMobile]="['menu']"
     [(selectedRows)]="selectedRows"
     [filterProps]="['name']"
+    [addBottomSpacer]="hasInteractionState | async"
 >
     <!-- Name column -->
     <div *osScrollingTableCell="'name'; value as name" class="cell-slot fill">
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/tags/components/tag-list/tag-list.component.ts b/client/src/app/site/pages/meetings/pages/motions/pages/tags/components/tag-list/tag-list.component.ts
index 5e202b6180..05d6f6978f 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/tags/components/tag-list/tag-list.component.ts
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/tags/components/tag-list/tag-list.component.ts
@@ -2,11 +2,13 @@ import { ChangeDetectorRef, Component, OnInit, TemplateRef, ViewChild } from '@a
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
+import { map, Observable } from 'rxjs';
 import { infoDialogSettings } from 'src/app/infrastructure/utils/dialog-settings';
 import { BaseMeetingListViewComponent } from 'src/app/site/pages/meetings/base/base-meeting-list-view.component';
 import { MeetingComponentServiceCollectorService } from 'src/app/site/pages/meetings/services/meeting-component-service-collector.service';
 import { PromptService } from 'src/app/ui/modules/prompt-dialog';
 
+import { InteractionService } from '../../../../../interaction/services/interaction.service';
 import { ViewTag } from '../../../../modules';
 import { TagControllerService } from '../../../../modules/tags/services';
 
@@ -25,6 +27,10 @@ export class TagListComponent extends BaseMeetingListViewComponent<ViewTag> impl
         name: [``, [Validators.required]]
     });
 
+    public get hasInteractionState(): Observable<boolean> {
+        return this.interactionService.isConfStateNone.pipe(map(isNone => !isNone));
+    }
+
     /**
      * Holds the tag that's currently being edited, or null.
      */
@@ -37,7 +43,8 @@ export class TagListComponent extends BaseMeetingListViewComponent<ViewTag> impl
         private dialog: MatDialog,
         private formBuilder: UntypedFormBuilder,
         private promptService: PromptService,
-        private cd: ChangeDetectorRef
+        private cd: ChangeDetectorRef,
+        private interactionService: InteractionService
     ) {
         super(componentServiceCollector, translate);
     }
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail-sort/workflow-detail-sort.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail-sort/workflow-detail-sort.component.html
index 3aec3e6c2d..a3c5331372 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail-sort/workflow-detail-sort.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail-sort/workflow-detail-sort.component.html
@@ -5,7 +5,7 @@ <h2>{{ 'Sort workflow' | translate }}</h2>
         </div>
     </os-head-bar>
 
-    <mat-card class="os-card">
+    <mat-card class="os-card spacer-bottom-60">
         <os-sorting-list [input]="workflowStatesObservable" (sortEvent)="onSorting($event)" #sorter>
             <ng-template let-state let-index="index">
                 <div class="action-title">
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.scss b/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.scss
index a5ed06a6d2..4711a11a88 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.scss
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/workflows/components/workflow-detail/workflow-detail.component.scss
@@ -51,5 +51,5 @@ table {
     overflow-x: auto;
     // the most simple solution that requires every other size to be exact.
     // TODO: if the whole page is absolute again, this will not be required anymore.
-    max-height: calc(100vh - 155px);
+    max-height: calc(100vh - 200px);
 }
diff --git a/client/src/app/site/pages/meetings/pages/participants/pages/participant-detail/pages/participant-detail-manage/components/participant-create-wizard/participant-create-wizard.component.html b/client/src/app/site/pages/meetings/pages/participants/pages/participant-detail/pages/participant-detail-manage/components/participant-create-wizard/participant-create-wizard.component.html
index 38506c7eaf..626de11595 100644
--- a/client/src/app/site/pages/meetings/pages/participants/pages/participant-detail/pages/participant-detail-manage/components/participant-create-wizard/participant-create-wizard.component.html
+++ b/client/src/app/site/pages/meetings/pages/participants/pages/participant-detail/pages/participant-detail-manage/components/participant-create-wizard/participant-create-wizard.component.html
@@ -36,7 +36,7 @@ <h2>
         <mat-step>
             <ng-template matStepLabel>{{ 'Enter' | translate }}</ng-template>
             <ng-template matStepContent>
-                <mat-card class="os-card">
+                <mat-card class="os-card spacer-bottom-60">
                     <div>
                         <h2>{{ 'Personal information' | translate }}</h2>
                         <div class="full-width first-line">
@@ -101,7 +101,7 @@ <h2>{{ 'Personal information' | translate }}</h2>
             <ng-template matStepContent>
                 <ng-container *ngIf="suitableAccountList.length">
                     <h3>{{ 'Suitable accounts found' | translate }}</h3>
-                    <mat-list>
+                    <mat-list class="spacer-bottom-60">
                         <ng-container *ngFor="let user of suitableAccountList; let last = last">
                             <mat-list-item>
                                 <div class="action-title full-width">
diff --git a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
index 3512dbacd4..bb9179c892 100644
--- a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
@@ -24,6 +24,7 @@ <h2>{{ 'Participants' | translate }}</h2>
     [filterProps]="filterProps"
     [multiSelect]="isMultiSelect"
     [hiddenInMobile]="['group', 'presence']"
+    [addBottomSpacer]="hasInteractionState | async"
     [(selectedRows)]="selectedRows"
 >
     <!-- extra content in the filter bar -->
diff --git a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.ts b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.ts
index 1cf96245a6..7a814862d4 100644
--- a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.ts
+++ b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.ts
@@ -17,6 +17,7 @@ import { OperatorService } from 'src/app/site/services/operator.service';
 import { ChoiceService } from 'src/app/ui/modules/choice-dialog';
 import { PromptService } from 'src/app/ui/modules/prompt-dialog';
 
+import { InteractionService } from '../../../../../interaction/services/interaction.service';
 import { ParticipantCsvExportService } from '../../../../export/participant-csv-export.service';
 import { ParticipantPdfExportService } from '../../../../export/participant-pdf-export.service';
 import { GroupControllerService, ViewGroup } from '../../../../modules';
@@ -99,6 +100,10 @@ export class ParticipantListComponent extends BaseMeetingListViewComponent<ViewU
      */
     public filterProps = [`full_name`, `groups`, `structure_level`, `number`, `delegationName`];
 
+    public get hasInteractionState(): Observable<boolean> {
+        return this.interactionService.isConfStateNone.pipe(map(isNone => !isNone));
+    }
+
     private _allowSelfSetPresent = false;
     private _isElectronicVotingEnabled = false;
     private _isUserInScope = true;
@@ -122,7 +127,8 @@ export class ParticipantListComponent extends BaseMeetingListViewComponent<ViewU
         private infoDialog: ParticipantListInfoDialogService,
         private organizationSettingsService: OrganizationSettingsService,
         private route: ActivatedRoute,
-        private prompt: PromptService
+        private prompt: PromptService,
+        private interactionService: InteractionService
     ) {
         super(componentServiceCollector, translate);
 
diff --git a/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.html b/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.html
index 5138ba5e2f..3cba2ab16e 100644
--- a/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.html
+++ b/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.html
@@ -148,7 +148,7 @@ <h2>{{ projector.name }}</h2>
             </div>
         </os-tile>
         <os-tile [preferredSize]="projectorTileSizeRight">
-            <div *osPerms="permission.projectorCanManage">
+            <div *osPerms="permission.projectorCanManage" style="padding-bottom: 60px">
                 <div class="control-group slide-controls">
                     <button
                         type="button"
@@ -171,267 +171,247 @@ <h2>{{ projector.name }}</h2>
                     <hr />
                 </div>
 
-                <div>
-                    <div *ngIf="projector.nonStableCurrentProjections.length">
-                        <mat-list>
-                            <mat-list-item
-                                *ngFor="let projection of projector.nonStableCurrentProjections"
-                                class="current-element backgroundColorAccent"
+                <div *ngIf="projector.nonStableCurrentProjections.length">
+                    <mat-list>
+                        <mat-list-item
+                            *ngFor="let projection of projector.nonStableCurrentProjections"
+                            class="current-element backgroundColorAccent"
+                        >
+                            <div class="emelent-grid">
+                                <os-projector-button
+                                    [object]="projection.getProjectionBuildDescriptor()"
+                                    [blendIn]="true"
+                                    [projector]="projector"
+                                ></os-projector-button>
+
+                                <!-- Slide title and subtitle -->
+                                <span class="ellipsis-overflow current-element-text">
+                                    {{ projection.getTitle() }}
+                                    <os-icon-container
+                                        class="subtitle-nocolor"
+                                        size="small"
+                                        icon="comment"
+                                        [noWrap]="true"
+                                        *ngIf="projection.getSubtitle()"
+                                    >
+                                        {{ projection.getSubtitle() }}
+                                    </os-icon-container>
+                                </span>
+
+                                <button type="button" mat-icon-button (click)="deleteProjection(projection)">
+                                    <mat-icon>close</mat-icon>
+                                </button>
+                            </div>
+                        </mat-list-item>
+                    </mat-list>
+                </div>
+
+                <!-- Expandable elements -->
+                <mat-accordion multi="true">
+                    <!-- Preview -->
+                    <mat-expansion-panel *ngIf="projector.preview_projections.length" [expanded]="true" class="queue">
+                        <mat-expansion-panel-header>
+                            <span>{{ 'Queue' | translate }}</span>
+                        </mat-expansion-panel-header>
+                        <div
+                            cdkDropList
+                            class="drop-list"
+                            [cdkDropListDisabled]="!editQueue"
+                            (cdkDropListDropped)="onSortingChange($event)"
+                        >
+                            <div
+                                class="drop-list-entry queue-element backgroundColorLight"
+                                *ngFor="let projection of projector.preview_projections; let i = index"
+                                cdkDrag
                             >
-                                <div class="emelent-grid">
+                                <div class="drag-handle" cdkDragHandle *ngIf="editQueue">
+                                    <mat-icon>drag_indicator</mat-icon>
+                                </div>
+                                <div class="drag-handle no-drag" *ngIf="!editQueue">
                                     <os-projector-button
                                         [object]="projection.getProjectionBuildDescriptor()"
                                         [blendIn]="true"
-                                        [projector]="projector"
+                                        [onClickFn]="getProjectPreviewFunction(projection)"
                                     ></os-projector-button>
-
-                                    <!-- Slide title and subtitle -->
-                                    <span class="ellipsis-overflow current-element-text">
+                                </div>
+                                <!-- Slide title ans subtitle -->
+                                <div class="name">
+                                    <div class="ellipsis-overflow">
                                         {{ projection.getTitle() }}
-                                        <os-icon-container
-                                            class="subtitle-nocolor"
-                                            size="small"
-                                            icon="comment"
-                                            [noWrap]="true"
-                                            *ngIf="projection.getSubtitle()"
-                                        >
-                                            {{ projection.getSubtitle() }}
-                                        </os-icon-container>
-                                    </span>
-
-                                    <button type="button" mat-icon-button (click)="deleteProjection(projection)">
-                                        <mat-icon>close</mat-icon>
-                                    </button>
+                                    </div>
+                                    <os-icon-container
+                                        class="subtitle"
+                                        size="small"
+                                        icon="comment"
+                                        [noWrap]="true"
+                                        *ngIf="projection.getSubtitle()"
+                                    >
+                                        {{ projection.getSubtitle() }}
+                                    </os-icon-container>
+                                </div>
+                                <div class="button-right" *ngIf="editQueue">
+                                    <div>
+                                        <button type="button" mat-icon-button (click)="deleteProjection(projection)">
+                                            <mat-icon>delete</mat-icon>
+                                        </button>
+                                    </div>
                                 </div>
+                            </div>
+                        </div>
+                        <mat-action-row>
+                            <button *ngIf="!editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
+                                <mat-icon>edit</mat-icon>
+                            </button>
+                            <button *ngIf="editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
+                                <mat-icon>close</mat-icon>
+                            </button>
+                        </mat-action-row>
+                    </mat-expansion-panel>
+
+                    <!-- countdowns -->
+                    <mat-expansion-panel>
+                        <mat-expansion-panel-header>
+                            <span>{{ 'Countdowns' | translate }}</span>
+                        </mat-expansion-panel-header>
+                        <mat-list>
+                            <mat-list-item *ngFor="let countdown of countdowns" class="larger-mat-list-item">
+                                <os-countdown-controls
+                                    class="dynamic-list-entry"
+                                    [countdown]="countdown"
+                                    [projector]="projector"
+                                ></os-countdown-controls>
                             </mat-list-item>
                         </mat-list>
-                    </div>
+                        <mat-action-row>
+                            <button type="button" mat-button (click)="createProjectorCountdown()">
+                                <mat-icon>add</mat-icon>
+                                <span>{{ 'Add countdown' | translate }}</span>
+                            </button>
+                        </mat-action-row>
+                    </mat-expansion-panel>
 
-                    <!-- Expandable elements -->
-                    <mat-accordion multi="true">
-                        <!-- Preview -->
-                        <mat-expansion-panel
-                            *ngIf="projector.preview_projections.length"
-                            [expanded]="true"
-                            class="queue"
-                        >
-                            <mat-expansion-panel-header>
-                                <span>{{ 'Queue' | translate }}</span>
-                            </mat-expansion-panel-header>
-                            <div
-                                cdkDropList
-                                class="drop-list"
-                                [cdkDropListDisabled]="!editQueue"
-                                (cdkDropListDropped)="onSortingChange($event)"
-                            >
-                                <div
-                                    class="drop-list-entry queue-element backgroundColorLight"
-                                    *ngFor="let projection of projector.preview_projections; let i = index"
-                                    cdkDrag
-                                >
-                                    <div class="drag-handle" cdkDragHandle *ngIf="editQueue">
-                                        <mat-icon>drag_indicator</mat-icon>
-                                    </div>
-                                    <div class="drag-handle no-drag" *ngIf="!editQueue">
+                    <!-- messages -->
+                    <mat-expansion-panel>
+                        <mat-expansion-panel-header>
+                            <span>{{ 'Messages' | translate }}</span>
+                        </mat-expansion-panel-header>
+                        <mat-list>
+                            <mat-list-item class="larger-mat-list-item">
+                                <mat-card class="wifi-card" style="width: 100%">
+                                    <div
+                                        class="wifi-button-area"
+                                        [ngClass]="{ 'spacer-bottom-10': !hasEnoughWiFiData }"
+                                    >
                                         <os-projector-button
-                                            [object]="projection.getProjectionBuildDescriptor()"
-                                            [blendIn]="true"
-                                            [onClickFn]="getProjectPreviewFunction(projection)"
+                                            [object]="wifiDataBuildDesc()"
+                                            [projector]="projector"
+                                            [disabled]="noWiFiData"
                                         ></os-projector-button>
+                                        <span>{{ 'Wifi access data' | translate }}</span>
                                     </div>
-                                    <!-- Slide title ans subtitle -->
-                                    <div class="name">
-                                        <div class="ellipsis-overflow">
-                                            {{ projection.getTitle() }}
-                                        </div>
-                                        <os-icon-container
-                                            class="subtitle"
-                                            size="small"
-                                            icon="comment"
-                                            [noWrap]="true"
-                                            *ngIf="projection.getSubtitle()"
-                                        >
-                                            {{ projection.getSubtitle() }}
-                                        </os-icon-container>
-                                    </div>
-                                    <div class="button-right" *ngIf="editQueue">
-                                        <div>
-                                            <button
-                                                type="button"
-                                                mat-icon-button
-                                                (click)="deleteProjection(projection)"
-                                            >
-                                                <mat-icon>delete</mat-icon>
-                                            </button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <mat-action-row>
-                                <button
-                                    *ngIf="!editQueue"
-                                    type="button"
-                                    mat-icon-button
-                                    (click)="editQueue = !editQueue"
-                                >
-                                    <mat-icon>edit</mat-icon>
-                                </button>
-                                <button
-                                    *ngIf="editQueue"
-                                    type="button"
-                                    mat-icon-button
-                                    (click)="editQueue = !editQueue"
-                                >
-                                    <mat-icon>close</mat-icon>
-                                </button>
-                            </mat-action-row>
-                        </mat-expansion-panel>
-
-                        <!-- countdowns -->
-                        <mat-expansion-panel>
-                            <mat-expansion-panel-header>
-                                <span>{{ 'Countdowns' | translate }}</span>
-                            </mat-expansion-panel-header>
-                            <mat-list>
-                                <mat-list-item *ngFor="let countdown of countdowns" class="larger-mat-list-item">
-                                    <os-countdown-controls
-                                        class="dynamic-list-entry"
-                                        [countdown]="countdown"
-                                        [projector]="projector"
-                                    ></os-countdown-controls>
-                                </mat-list-item>
-                            </mat-list>
-                            <mat-action-row>
-                                <button type="button" mat-button (click)="createProjectorCountdown()">
-                                    <mat-icon>add</mat-icon>
-                                    <span>{{ 'Add countdown' | translate }}</span>
-                                </button>
-                            </mat-action-row>
-                        </mat-expansion-panel>
-
-                        <!-- messages -->
-                        <mat-expansion-panel>
-                            <mat-expansion-panel-header>
-                                <span>{{ 'Messages' | translate }}</span>
-                            </mat-expansion-panel-header>
-                            <mat-list>
-                                <mat-list-item class="larger-mat-list-item">
-                                    <mat-card class="wifi-card" style="width: 100%">
-                                        <div
-                                            class="wifi-button-area"
-                                            [ngClass]="{ 'spacer-bottom-10': !hasEnoughWiFiData }"
-                                        >
-                                            <os-projector-button
-                                                [object]="wifiDataBuildDesc()"
-                                                [projector]="projector"
-                                                [disabled]="noWiFiData"
-                                            ></os-projector-button>
-                                            <span>{{ 'Wifi access data' | translate }}</span>
-                                        </div>
-                                        <small class="wifi-help-text" *ngIf="!hasEnoughWiFiData" translate>
-                                            Attention: First enter the wifi data in [Settings > General]
-                                        </small>
-                                    </mat-card>
-                                </mat-list-item>
-                                <mat-list-item *ngFor="let message of messages" class="larger-mat-list-item">
-                                    <os-message-controls
-                                        class="dynamic-list-entry"
-                                        [message]="message"
-                                        [projector]="projector"
-                                    ></os-message-controls>
-                                </mat-list-item>
-                            </mat-list>
-                            <mat-action-row>
-                                <button type="button" mat-button (click)="createProjectorMessage()">
-                                    <mat-icon>add</mat-icon>
-                                    <span>{{ 'Add message' | translate }}</span>
-                                </button>
-                            </mat-action-row>
-                        </mat-expansion-panel>
+                                    <small class="wifi-help-text" *ngIf="!hasEnoughWiFiData" translate>
+                                        Attention: First enter the wifi data in [Settings > General]
+                                    </small>
+                                </mat-card>
+                            </mat-list-item>
+                            <mat-list-item *ngFor="let message of messages" class="larger-mat-list-item">
+                                <os-message-controls
+                                    class="dynamic-list-entry"
+                                    [message]="message"
+                                    [projector]="projector"
+                                ></os-message-controls>
+                            </mat-list-item>
+                        </mat-list>
+                        <mat-action-row>
+                            <button type="button" mat-button (click)="createProjectorMessage()">
+                                <mat-icon>add</mat-icon>
+                                <span>{{ 'Add message' | translate }}</span>
+                            </button>
+                        </mat-action-row>
+                    </mat-expansion-panel>
 
-                        <!-- Current list of speakers -->
-                        <mat-expansion-panel>
-                            <mat-expansion-panel-header>
-                                <span>{{ 'Current list of speakers' | translate }}</span>
-                            </mat-expansion-panel-header>
+                    <!-- Current list of speakers -->
+                    <mat-expansion-panel>
+                        <mat-expansion-panel-header>
+                            <span>{{ 'Current list of speakers' | translate }}</span>
+                        </mat-expansion-panel-header>
 
-                            <!-- Slide-->
-                            <mat-list *ngIf="projectorCount > 1 && !projector.isReferenceProjector">
-                                <mat-list-item>
-                                    <os-projector-button
-                                        [object]="getCurrentLoSBuildDesc(false)"
-                                        [projector]="projector"
-                                    ></os-projector-button>
-                                    <span class="spacer-left-10">{{ 'Slide' | translate }}</span>
-                                </mat-list-item>
-                            </mat-list>
+                        <!-- Slide-->
+                        <mat-list *ngIf="projectorCount > 1 && !projector.isReferenceProjector">
+                            <mat-list-item>
+                                <os-projector-button
+                                    [object]="getCurrentLoSBuildDesc(false)"
+                                    [projector]="projector"
+                                ></os-projector-button>
+                                <span class="spacer-left-10">{{ 'Slide' | translate }}</span>
+                            </mat-list-item>
+                        </mat-list>
 
-                            <!-- Overlay -->
-                            <mat-list>
-                                <mat-list-item>
-                                    <os-projector-button
-                                        [object]="getCurrentLoSBuildDesc(true)"
-                                        [projector]="projector"
-                                    ></os-projector-button>
-                                    <span class="spacer-left-10">{{ 'Overlay' | translate }}</span>
-                                </mat-list-item>
-                            </mat-list>
+                        <!-- Overlay -->
+                        <mat-list>
+                            <mat-list-item>
+                                <os-projector-button
+                                    [object]="getCurrentLoSBuildDesc(true)"
+                                    [projector]="projector"
+                                ></os-projector-button>
+                                <span class="spacer-left-10">{{ 'Overlay' | translate }}</span>
+                            </mat-list-item>
+                        </mat-list>
 
-                            <!-- Chyron -->
-                            <mat-list>
-                                <mat-list-item>
-                                    <os-projector-button
-                                        [object]="getChyronBuildDesc()"
-                                        [projector]="projector"
-                                    ></os-projector-button>
-                                    <span class="spacer-left-10">{{ 'Chyron' | translate }}</span>
-                                </mat-list-item>
-                            </mat-list>
-                        </mat-expansion-panel>
+                        <!-- Chyron -->
+                        <mat-list>
+                            <mat-list-item>
+                                <os-projector-button
+                                    [object]="getChyronBuildDesc()"
+                                    [projector]="projector"
+                                ></os-projector-button>
+                                <span class="spacer-left-10">{{ 'Chyron' | translate }}</span>
+                            </mat-list-item>
+                        </mat-list>
+                    </mat-expansion-panel>
 
-                        <!-- Current slide -->
-                        <mat-expansion-panel *ngIf="hasSlide">
-                            <mat-expansion-panel-header>
-                                <span>{{ 'Current slide' | translate }}</span>
-                            </mat-expansion-panel-header>
+                    <!-- Current slide -->
+                    <mat-expansion-panel *ngIf="hasSlide">
+                        <mat-expansion-panel-header>
+                            <span>{{ 'Current slide' | translate }}</span>
+                        </mat-expansion-panel-header>
 
-                            <!-- Toggle -->
-                            <mat-list *ngIf="getCurrentProjectionLoSToggleBuildDesc()">
-                                <mat-list-item>
-                                    <os-projector-button
-                                        [object]="getCurrentProjectionLoSToggleBuildDesc()"
-                                        [projector]="projector"
-                                    ></os-projector-button>
-                                    <span class="spacer-left-10">
-                                        {{
-                                            currentProjectionIsLoS
-                                                ? ('Toggle to parent item' | translate)
-                                                : ('Toggle to list of speakers' | translate)
-                                        }}
-                                    </span>
-                                </mat-list-item>
-                            </mat-list>
-                        </mat-expansion-panel>
+                        <!-- Toggle -->
+                        <mat-list *ngIf="getCurrentProjectionLoSToggleBuildDesc()">
+                            <mat-list-item>
+                                <os-projector-button
+                                    [object]="getCurrentProjectionLoSToggleBuildDesc()"
+                                    [projector]="projector"
+                                ></os-projector-button>
+                                <span class="spacer-left-10">
+                                    {{
+                                        currentProjectionIsLoS
+                                            ? ('Toggle to parent item' | translate)
+                                            : ('Toggle to list of speakers' | translate)
+                                    }}
+                                </span>
+                            </mat-list-item>
+                        </mat-list>
+                    </mat-expansion-panel>
 
-                        <!-- History -->
-                        <mat-expansion-panel *ngIf="projector.history_projections.length">
-                            <mat-expansion-panel-header>
-                                <span>{{ 'Previous slides' | translate }}</span>
-                            </mat-expansion-panel-header>
-                            <ol>
-                                <li *ngFor="let projection of projector.history_projections">
-                                    {{ projection.getTitle() }}
-                                    {{ projection.getSubtitle() }}
-                                </li>
-                            </ol>
-                        </mat-expansion-panel>
+                    <!-- History -->
+                    <mat-expansion-panel *ngIf="projector.history_projections.length">
+                        <mat-expansion-panel-header>
+                            <span>{{ 'Previous slides' | translate }}</span>
+                        </mat-expansion-panel-header>
+                        <ol>
+                            <li *ngFor="let projection of projector.history_projections">
+                                {{ projection.getTitle() }}
+                                {{ projection.getSubtitle() }}
+                            </li>
+                        </ol>
+                    </mat-expansion-panel>
 
-                        <os-presentation-controls
-                            *ngIf="projectorObservable"
-                            [projectorObservable]="projectorObservable"
-                        ></os-presentation-controls>
-                    </mat-accordion>
-                </div>
+                    <os-presentation-controls
+                        *ngIf="projectorObservable"
+                        [projectorObservable]="projectorObservable"
+                    ></os-presentation-controls>
+                </mat-accordion>
             </div>
         </os-tile>
     </os-grid>
diff --git a/client/src/app/site/pages/meetings/pages/projectors/modules/projector-list/components/projector-list/projector-list.component.html b/client/src/app/site/pages/meetings/pages/projectors/modules/projector-list/components/projector-list/projector-list.component.html
index 3eb095d92b..de1824d247 100644
--- a/client/src/app/site/pages/meetings/pages/projectors/modules/projector-list/components/projector-list/projector-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/projectors/modules/projector-list/components/projector-list/projector-list.component.html
@@ -37,8 +37,7 @@ <h1 mat-dialog-title>
         </div>
     </form>
 </ng-template>
-
-<div id="card-wrapper">
+<div id="card-wrapper" class="spacer-bottom-60">
     <div class="projector-card" *ngFor="let projector of projectors | async; trackBy: trackByIndex">
         <os-projector-list-entry [projector]="projector"></os-projector-list-entry>
     </div>
diff --git a/client/src/app/ui/modules/file-list/components/file-list/file-list.component.html b/client/src/app/ui/modules/file-list/components/file-list/file-list.component.html
index 11c5d74b10..c39303065d 100644
--- a/client/src/app/ui/modules/file-list/components/file-list/file-list.component.html
+++ b/client/src/app/ui/modules/file-list/components/file-list/file-list.component.html
@@ -54,6 +54,7 @@
     [alwaysShowMenu]="true"
     [componentHeight]="fileListHeight"
     [multiSelect]="isMultiSelect"
+    [addBottomSpacer]="addBottomSpacer"
     (selectedRowsChange)="onSelectedRowsChange($event)"
 >
     <!-- Icon column -->
diff --git a/client/src/app/ui/modules/file-list/components/file-list/file-list.component.ts b/client/src/app/ui/modules/file-list/components/file-list/file-list.component.ts
index 940fa62da2..bf3831eaa7 100644
--- a/client/src/app/ui/modules/file-list/components/file-list/file-list.component.ts
+++ b/client/src/app/ui/modules/file-list/components/file-list/file-list.component.ts
@@ -89,6 +89,9 @@ export class FileListComponent extends BaseUiComponent implements OnInit, OnDest
         this._hiddenInMobile = [`indicator`, ...cols];
     }
 
+    @Input()
+    public addBottomSpacer = false;
+
     /**
      * Determine generally hidden columns
      */
diff --git a/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.scss b/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.scss
index 68472d6fd0..34715dbf08 100644
--- a/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.scss
+++ b/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.scss
@@ -9,7 +9,7 @@
     top: 0;
     z-index: 1000;
     position: sticky;
-    height: 50px !important;
+    height: var(--view-headbar-height) !important;
 
     .toolbar-left {
         display: flex;
diff --git a/client/src/app/ui/modules/list/components/filter-menu/filter-menu.component.html b/client/src/app/ui/modules/list/components/filter-menu/filter-menu.component.html
index fedd2ff250..1b74dba76c 100644
--- a/client/src/app/ui/modules/list/components/filter-menu/filter-menu.component.html
+++ b/client/src/app/ui/modules/list/components/filter-menu/filter-menu.component.html
@@ -1,4 +1,4 @@
-<div class="filter-menu-content-wrapper">
+<div [ngClass]="{ 'filter-menu-content-wrapper': true, 'spacer-bottom-60': showSpacer }">
     <mat-accordion (keyup)="checkKeyEvent($event)">
         <mat-expansion-panel *ngFor="let filter of service.filterDefinitionsObservable | async">
             <mat-expansion-panel-header *ngIf="filter && filter.options && filter.options.length">
diff --git a/client/src/app/ui/modules/list/components/filter-menu/filter-menu.component.ts b/client/src/app/ui/modules/list/components/filter-menu/filter-menu.component.ts
index 2872b66d27..4adcdd3626 100644
--- a/client/src/app/ui/modules/list/components/filter-menu/filter-menu.component.ts
+++ b/client/src/app/ui/modules/list/components/filter-menu/filter-menu.component.ts
@@ -54,6 +54,9 @@ export class FilterMenuComponent<V extends Identifiable> implements OnInit {
     @Input()
     public service!: FilterListService<V>;
 
+    @Input()
+    public showSpacer = false;
+
     public constructor(private cd: ChangeDetectorRef) {}
 
     /**
diff --git a/client/src/app/ui/modules/list/components/list/list.component.html b/client/src/app/ui/modules/list/components/list/list.component.html
index 34981480dc..bb36d25d27 100644
--- a/client/src/app/ui/modules/list/components/list/list.component.html
+++ b/client/src/app/ui/modules/list/components/list/list.component.html
@@ -15,6 +15,7 @@
     [sortService]="sortService"
     [vScrollFixed]="vScrollFixed"
     [fullScreen]="fullScreen"
+    [addBottomSpacer]="addBottomSpacer"
     (selectedRowsChange)="selectedRowsChange.emit($event)"
     (searchFilterUpdated)="searchFilterUpdated.emit($event)"
 ></os-view-list>
diff --git a/client/src/app/ui/modules/list/components/list/list.component.ts b/client/src/app/ui/modules/list/components/list/list.component.ts
index d15c160d60..0477b9f7df 100644
--- a/client/src/app/ui/modules/list/components/list/list.component.ts
+++ b/client/src/app/ui/modules/list/components/list/list.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Identifiable } from 'src/app/domain/interfaces';
 
 import { BaseListComponent } from '../../base/base-list.component';
@@ -9,4 +9,7 @@ import { BaseListComponent } from '../../base/base-list.component';
     styleUrls: [`./list.component.scss`],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ListComponent<V extends Identifiable> extends BaseListComponent<V> {}
+export class ListComponent<V extends Identifiable> extends BaseListComponent<V> {
+    @Input()
+    public addBottomSpacer = false;
+}
diff --git a/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.html b/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.html
index ca7ddb4578..c64ce53b2f 100644
--- a/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.html
+++ b/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.html
@@ -96,6 +96,7 @@
         *ngIf="filterService"
         (dismissed)="this.filterMenu.close()"
         [service]="filterService"
+        [showSpacer]="showSpacer"
     ></os-filter-menu>
 </mat-drawer>
 
diff --git a/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.ts b/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.ts
index c2a5c25783..dc15a0d2cf 100644
--- a/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.ts
+++ b/client/src/app/ui/modules/list/components/sort-filter-bar/sort-filter-bar.component.ts
@@ -117,6 +117,9 @@ export class SortFilterBarComponent<V extends Identifiable> {
     @Input()
     public totalCount = 0;
 
+    @Input()
+    public showSpacer = false;
+
     public get sortOptions(): OsSortOption<V>[] {
         return this.sortService.sortOptions;
     }
diff --git a/client/src/app/ui/modules/list/components/view-list/view-list.component.html b/client/src/app/ui/modules/list/components/view-list/view-list.component.html
index 7eec909f1f..657e5ad78b 100644
--- a/client/src/app/ui/modules/list/components/view-list/view-list.component.html
+++ b/client/src/app/ui/modules/list/components/view-list/view-list.component.html
@@ -9,6 +9,7 @@
             [sortService]="sortService!"
             [searchService]="searchService!"
             [searchFieldInput]="searchFieldValue"
+            [showSpacer]="addBottomSpacer"
             (searchFieldChanged)="searchFilterUpdated.emit($event)"
         >
             <div class="extra-info-slot">
@@ -23,6 +24,7 @@
             [tableHeight]="fullScreen ? undefined : '50vh'"
             [hiddenColumns]="hiddenColumns"
             [selectionMode]="multiSelect"
+            [addBottomSpacer]="addBottomSpacer"
             (selectionChanged)="selectedRowsChange.emit($event.selectedRows)"
         >
             <div *osScrollingTableNoData class="no-data-placeholder subtitle">{{ 'No data' | translate }}</div>
diff --git a/client/src/app/ui/modules/list/components/view-list/view-list.component.ts b/client/src/app/ui/modules/list/components/view-list/view-list.component.ts
index 5a3800c179..d1a4ce16c1 100644
--- a/client/src/app/ui/modules/list/components/view-list/view-list.component.ts
+++ b/client/src/app/ui/modules/list/components/view-list/view-list.component.ts
@@ -120,6 +120,9 @@ export class ViewListComponent<V extends Identifiable> implements OnInit, OnDest
     @Input()
     public searchFieldValue = ``;
 
+    @Input()
+    public addBottomSpacer = false;
+
     /**
      * Double binding the selected rows
      */
diff --git a/client/src/app/ui/modules/scrolling-table/components/scrolling-table/scrolling-table.component.html b/client/src/app/ui/modules/scrolling-table/components/scrolling-table/scrolling-table.component.html
index 555f5daf88..26760fdb15 100644
--- a/client/src/app/ui/modules/scrolling-table/components/scrolling-table/scrolling-table.component.html
+++ b/client/src/app/ui/modules/scrolling-table/components/scrolling-table/scrolling-table.component.html
@@ -5,7 +5,7 @@
                 <div
                     *ngIf="showHeader"
                     class="flex-vertical-center placeholder divider-bottom scrolling-table-header"
-                    [ngStyle]="ngStyle"
+                    [ngStyle]="getNgStyle()"
                 >
                     <ng-container *ngFor="let definition of definitions; let first = first">
                         <div
@@ -27,11 +27,11 @@
                         </div>
                     </ng-container>
                 </div>
-                <ng-container *cdkVirtualFor="let item of dataSource">
+                <ng-container *cdkVirtualFor="let item of dataSource; last as isLast">
                     <div
                         class="scrolling-table-row divider-bottom flex-vertical-center"
                         [ngClass]="rowClass"
-                        [ngStyle]="ngStyle"
+                        [ngStyle]="getNgStyle(isLast)"
                         (click)="onRowClick($event, item)"
                     >
                         <div *ngIf="isSelectionMode" class="selection-cell scrolling-table-cell flex-vertical-center">
diff --git a/client/src/app/ui/modules/scrolling-table/components/scrolling-table/scrolling-table.component.ts b/client/src/app/ui/modules/scrolling-table/components/scrolling-table/scrolling-table.component.ts
index 84c775913b..d146509acc 100644
--- a/client/src/app/ui/modules/scrolling-table/components/scrolling-table/scrolling-table.component.ts
+++ b/client/src/app/ui/modules/scrolling-table/components/scrolling-table/scrolling-table.component.ts
@@ -101,6 +101,9 @@ export class ScrollingTableComponent<T extends Partial<Mutable<Identifiable>>>
         }
     }
 
+    @Input()
+    public addBottomSpacer = false;
+
     @Output()
     public selectionChanged = new EventEmitter<ScrollingTableSelectionChangeEvent<T>>();
 
@@ -108,13 +111,6 @@ export class ScrollingTableComponent<T extends Partial<Mutable<Identifiable>>>
         return this.dataSource.pipe(map(items => !!items.length));
     }
 
-    public get ngStyle(): object {
-        return {
-            height: `${this.rowHeight}px`,
-            maxHeight: `${this.rowHeight}px`
-        };
-    }
-
     public get isSelectionMode(): boolean {
         return this._isSelectionMode;
     }
@@ -177,6 +173,14 @@ export class ScrollingTableComponent<T extends Partial<Mutable<Identifiable>>>
         this.changeSelection(this._fullSource, false);
     }
 
+    public getNgStyle(isLast = false): object {
+        return {
+            height: `${this.rowHeight}px`,
+            maxHeight: `${this.rowHeight}px`,
+            ...(this.addBottomSpacer && isLast ? { marginBottom: `50px` } : {})
+        };
+    }
+
     private select(rows: T[]): void {
         this.changeSelection(rows, true);
     }
diff --git a/client/src/styles.scss b/client/src/styles.scss
index bab9318310..2fc0bac646 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -25,6 +25,7 @@
 
 :root {
     --global-headbar-height: 28px;
+    --view-headbar-height: 50px;
 }
 
 /**
@@ -530,7 +531,7 @@ button.mat-menu-item.selected {
 
 .content-container {
     margin: 0 25px;
-    
+
     h1 {
         font-size: 30px;
     }