From 22a374a1506675805e422b1d9a824aa2511a1dee Mon Sep 17 00:00:00 2001
From: Sean <sean.f.t.engelhardt@gmail.com>
Date: Wed, 17 Jun 2020 15:24:23 +0200
Subject: [PATCH] Cleanup main routing page and ngrid lists

Sets the main container to absolute,
makes it easier to detect the pages height
ngrid lists can dynamically detect the page height using flexbox,
remove external class injection from list-views,
add "spacer-bottom-60" class for the jitsi-container,
add it everywhere where the jitsi container could hide the content.
---
 .../list-view-table.component.html            | 128 +++++++++---------
 .../list-view-table.component.scss            |  51 ++++---
 .../list-view-table.component.ts              |  30 ----
 .../privacy-policy-content.component.html     |   2 +-
 .../privacy-policy-content.component.scss     |   3 -
 .../assignment-poll-detail.component.html     |   4 +-
 .../assignment-poll-detail.component.scss     |   4 +
 .../legal-notice/legal-notice.component.html  |   2 +-
 .../components/start/start.component.html     |   2 +-
 .../user-statistics.component.html            |   2 +-
 .../user-statistics.component.scss            |   5 +-
 .../config-list/config-list.component.html    |   2 +-
 .../history-list/history-list.component.html  | 118 ++++++++--------
 .../history-list/history-list.component.scss  |  13 +-
 .../mediafile-list.component.html             |   2 +-
 .../mediafile-list.component.scss             |   7 +
 .../category-list.component.scss              |  21 ---
 .../motion-block-list.component.html          |   1 -
 .../motion-block-list.component.scss          |   8 --
 .../motion-detail.component.html              |   2 +-
 .../motion-poll-detail.component.html         |   4 +-
 .../motion-poll-detail.component.scss         |   5 +
 .../workflow-list.component.scss              |  14 --
 .../statute-paragraph-list.component.html     |  50 +++----
 .../statute-paragraph-list.component.scss     |  19 +--
 .../poll-progress.component.html              |   4 +-
 client/src/app/site/site.component.html       |   2 -
 client/src/app/site/site.component.scss       |   3 +-
 .../group-list/group-list.component.html      |  85 ++++++------
 .../group-list/group-list.component.scss      |   2 +-
 client/src/styles.scss                        |  35 ++---
 31 files changed, 290 insertions(+), 340 deletions(-)

diff --git a/client/src/app/shared/components/list-view-table/list-view-table.component.html b/client/src/app/shared/components/list-view-table/list-view-table.component.html
index 4af34c745..1df325bb2 100644
--- a/client/src/app/shared/components/list-view-table/list-view-table.component.html
+++ b/client/src/app/shared/components/list-view-table/list-view-table.component.html
@@ -1,70 +1,72 @@
-<mat-drawer-container *ngIf="columns && columnSet">
-    <os-sort-filter-bar
-        *ngIf="showFilterBar"
-        [totalCount]="totalCount"
-        [filterCount]="countFilter"
-        [filterService]="filterService"
-        [sortService]="sortService"
-        [searchFieldInput]="inputValue"
-        (searchFieldChange)="searchFilter($event)"
-    >
-    </os-sort-filter-bar>
+<mat-drawer-container class="list-view-frame" *ngIf="columns && columnSet">
+    <div class="list-view-table-wrapper">
+        <os-sort-filter-bar
+            class="sort-filter-bar"
+            *ngIf="showFilterBar"
+            [totalCount]="totalCount"
+            [filterCount]="countFilter"
+            [filterService]="filterService"
+            [sortService]="sortService"
+            [searchFieldInput]="inputValue"
+            (searchFieldChange)="searchFilter($event)"
+        >
+        </os-sort-filter-bar>
 
-    <!-- vScrollFixed="110" -->
-    <!-- vScrollAuto () -->
-    <pbl-ngrid
-        [ngClass]="cssClasses"
-        [attr.vScrollFixed]="vScrollFixed !== -1 ? vScrollFixed : false"
-        [attr.vScrollAuto]="vScrollFixed === -1"
-        [showHeader]="!showFilterBar || !fullScreen"
-        matCheckboxSelection="selection"
-        [dataSource]="dataSource"
-        [columns]="columnSet"
-        [hideColumns]="hiddenColumns"
-        (rowClick)="onSelectRow($event)"
-        [rowClassUpdate]="isElementProjected"
-        rowClassUpdateFreq="ngDoCheck"
-    >
-        <!-- "row" has the view model -->
-        <!-- "value" has the property, that was defined in the columnDefinition -->
-        <!-- "col" has a column reference -->
+        <pbl-ngrid
+            class="vscroll-list-view"
+            [attr.vScrollFixed]="vScrollFixed !== -1 ? vScrollFixed : false"
+            [attr.vScrollAuto]="vScrollFixed === -1"
+            [showHeader]="!showFilterBar || !fullScreen"
+            [showHeader]="false"
+            matCheckboxSelection="selection"
+            [dataSource]="dataSource"
+            [columns]="columnSet"
+            [hideColumns]="hiddenColumns"
+            (rowClick)="onSelectRow($event)"
+            [rowClassUpdate]="isElementProjected"
+            rowClassUpdateFreq="ngDoCheck"
+        >
+            <!-- "row" has the view model -->
+            <!-- "value" has the property, that was defined in the columnDefinition -->
+            <!-- "col" has a column reference -->
 
-        <!-- Projector column -->
-        <div *pblNgridCellDef="'projector'; row as viewModel" class="fill ngrid-lg">
-            <os-projector-button
-                *osPerms="'core.can_manage_projector'"
-                class="projector-button"
-                [object]="getProjectable(viewModel)"
-                (changeEvent)="viewUpdateEvent()"
-            ></os-projector-button>
-            <!-- Projector indicator -->
-            <div class="projector-button" *osPerms="'core.can_manage_projector'; complement: true">
-                <mat-icon
-                    color="accent"
-                    *ngIf="projectorService.isProjected(getProjectable(viewModel))"
-                    matTooltip="{{ 'Currently projected' | translate }}"
-                >
-                    videocam
-                </mat-icon>
+            <!-- Projector column -->
+            <div *pblNgridCellDef="'projector'; row as viewModel" class="fill ngrid-lg">
+                <os-projector-button
+                    *osPerms="'core.can_manage_projector'"
+                    class="projector-button"
+                    [object]="getProjectable(viewModel)"
+                    (changeEvent)="viewUpdateEvent()"
+                ></os-projector-button>
+                <!-- Projector indicator -->
+                <div class="projector-button" *osPerms="'core.can_manage_projector'; complement: true">
+                    <mat-icon
+                        color="accent"
+                        *ngIf="projectorService.isProjected(getProjectable(viewModel))"
+                        matTooltip="{{ 'Currently projected' | translate }}"
+                    >
+                        videocam
+                    </mat-icon>
+                </div>
             </div>
-        </div>
 
-        <!-- No Results -->
-        <div *pblNgridNoDataRef class="pbl-ngrid-no-data">
-            <span>{{ 'No data' | translate }}</span>
-        </div>
+            <!-- No Results -->
+            <div *pblNgridNoDataRef class="pbl-ngrid-no-data">
+                <span>{{ 'No data' | translate }}</span>
+            </div>
 
-        <!-- Slot transclusion for the individual cells -->
-        <div #contentWrapper>
-            <ng-content class="ngrid-lg" select=".cell-slot"></ng-content>
-        </div>
+            <!-- Slot transclusion for the individual cells -->
+            <div #contentWrapper>
+                <ng-content class="ngrid-lg" select=".cell-slot"></ng-content>
+            </div>
 
-        <!-- Speaker -->
-        <div *pblNgridCellDef="'speaker'; row as viewModel; rowContext as rowContext" class="fill">
-            <os-speaker-button
-                [object]="viewModel.contentObjectData ? viewModel.contentObjectData : viewModel"
-                [disabled]="multiSelect"
-            ></os-speaker-button>
-        </div>
-    </pbl-ngrid>
+            <!-- Speaker -->
+            <div *pblNgridCellDef="'speaker'; row as viewModel; rowContext as rowContext" class="fill">
+                <os-speaker-button
+                    [object]="viewModel.contentObjectData ? viewModel.contentObjectData : viewModel"
+                    [disabled]="multiSelect"
+                ></os-speaker-button>
+            </div>
+        </pbl-ngrid>
+    </div>
 </mat-drawer-container>
diff --git a/client/src/app/shared/components/list-view-table/list-view-table.component.scss b/client/src/app/shared/components/list-view-table/list-view-table.component.scss
index ef31713db..0d1bed762 100644
--- a/client/src/app/shared/components/list-view-table/list-view-table.component.scss
+++ b/client/src/app/shared/components/list-view-table/list-view-table.component.scss
@@ -2,26 +2,45 @@
 
 $pbl-height: var(--pbl-height);
 
-.projector-button {
-    margin: auto;
+.list-view-frame {
+    // remove the height of the top-bar
+    height: calc(100vh - 64px);
+}
+
+.list-view-table-wrapper {
     display: flex;
-}
+    flex-flow: column;
+    height: 100%;
 
-.pbl-ngrid-row {
-    height: $pbl-height;
-}
+    .sort-filter-bar {
+        flex: 0 1 auto;
+        display: block;
+    }
 
-// additional space if the jitsi integration is active
-.pbl-ngrid-row:last-of-type {
-    margin-bottom: 30px !important;
-}
+    .vscroll-list-view {
+        flex: 1 1 auto;
 
-.pbl-ngrid-cell {
-    height: inherit;
-}
+        .projector-button {
+            margin: auto;
+            display: flex;
+        }
 
-.multiselect {
-    .pbl-ngrid-cell {
-        cursor: pointer;
+        .pbl-ngrid-row {
+            height: $pbl-height;
+        }
+
+        .pbl-ngrid-row:last-of-type {
+            margin-bottom: 60px !important;
+        }
+
+        .pbl-ngrid-cell {
+            height: inherit;
+        }
+
+        .multiselect {
+            .pbl-ngrid-cell {
+                cursor: pointer;
+            }
+        }
     }
 }
diff --git a/client/src/app/shared/components/list-view-table/list-view-table.component.ts b/client/src/app/shared/components/list-view-table/list-view-table.component.ts
index bbe376d74..8bb07975a 100644
--- a/client/src/app/shared/components/list-view-table/list-view-table.component.ts
+++ b/client/src/app/shared/components/list-view-table/list-view-table.component.ts
@@ -214,31 +214,6 @@ export class ListViewTableComponent<V extends BaseViewModel | BaseViewModelWithC
     @Input()
     public fullScreen = true;
 
-    /**
-     * Option to apply additional classes to the virtual-scrolling-list.
-     */
-    @Input()
-    public set cssClasses(values: CssClassDefinition) {
-        this._cssClasses = values;
-    }
-
-    /**
-     * Returns the list of classes, that are applied to the virtual-scrolling-list.
-     * Already prepared for the `[ngClass]`-property.
-     *
-     * `Warning: The defaultClasses will overwrite custom classes with the same key.`
-     *
-     * @returns An object looking like `{ [key: string]: boolean }`.
-     */
-    public get cssClasses(): CssClassDefinition {
-        const defaultClasses = {
-            'virtual-scroll-with-head-bar ngrid-hide-head': this.fullScreen && this.showFilterBar,
-            'virtual-scroll-full-page': this.fullScreen && !this.showFilterBar,
-            multiselect: this.multiSelect
-        };
-        return Object.assign(this._cssClasses, defaultClasses);
-    }
-
     /**
      * Inform about changes in the dataSource
      */
@@ -275,11 +250,6 @@ export class ListViewTableComponent<V extends BaseViewModel | BaseViewModelWithC
      */
     public inputValue: string;
 
-    /**
-     * Private variable to hold all classes for the virtual-scrolling-list.
-     */
-    private _cssClasses: CssClassDefinition = {};
-
     /**
      * Collect subsciptions
      */
diff --git a/client/src/app/shared/components/privacy-policy-content/privacy-policy-content.component.html b/client/src/app/shared/components/privacy-policy-content/privacy-policy-content.component.html
index 2e1d2e2d0..ec0657579 100644
--- a/client/src/app/shared/components/privacy-policy-content/privacy-policy-content.component.html
+++ b/client/src/app/shared/components/privacy-policy-content/privacy-policy-content.component.html
@@ -1,4 +1,4 @@
-<mat-card [ngClass]="isEditing ? 'os-form-card' : 'os-card'">
+<mat-card class="spacer-bottom-60" [ngClass]="isEditing ? 'os-form-card' : 'os-card'">
     <ng-container *ngIf="!isEditing">
         <div *ngIf="privacyPolicy" [innerHtml]="privacyPolicy | trust: 'html'"></div>
         <div *ngIf="!privacyPolicy">
diff --git a/client/src/app/shared/components/privacy-policy-content/privacy-policy-content.component.scss b/client/src/app/shared/components/privacy-policy-content/privacy-policy-content.component.scss
index 7caed3739..e69de29bb 100644
--- a/client/src/app/shared/components/privacy-policy-content/privacy-policy-content.component.scss
+++ b/client/src/app/shared/components/privacy-policy-content/privacy-policy-content.component.scss
@@ -1,3 +0,0 @@
-mat-card {
-    height: 100%;
-}
diff --git a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html
index 483d891b2..af6030cb3 100644
--- a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html
+++ b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html
@@ -10,7 +10,7 @@
     </div>
 </os-head-bar>
 
-<mat-card class="os-card">
+<mat-card class="os-card spacer-bottom-60">
     <ng-container [ngTemplateOutlet]="viewTemplate"></ng-container>
 </mat-card>
 
@@ -46,6 +46,7 @@
             <div class="named-result-table" *ngIf="poll.type === 'named'">
                 <h3>{{ 'Single votes' | translate }}</h3>
                 <os-list-view-table
+                    class="single-votes-table"
                     *ngIf="votesDataObservable"
                     [listObservable]="votesDataObservable"
                     [columns]="columnDefinitionSingleVotes"
@@ -56,7 +57,6 @@
                     listStorageKey="assignment-poll-vote"
                     [showListOfSpeakers]="false"
                     [showMenu]="false"
-                    [cssClasses]="{ 'single-votes-table': true }"
                 >
                     <!-- Header -->
                     <div *pblNgridHeaderCellDef="'user'; col as col">
diff --git a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss
index edc458269..de55c583a 100644
--- a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss
+++ b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss
@@ -13,6 +13,10 @@
             display: block;
             height: 500px;
 
+            .list-view-frame {
+                height: 100%;
+            }
+
             .single-vote-result + .single-vote-result {
                 margin-top: 1em;
             }
diff --git a/client/src/app/site/common/components/legal-notice/legal-notice.component.html b/client/src/app/site/common/components/legal-notice/legal-notice.component.html
index 56136f488..988b3b1e1 100644
--- a/client/src/app/site/common/components/legal-notice/legal-notice.component.html
+++ b/client/src/app/site/common/components/legal-notice/legal-notice.component.html
@@ -54,7 +54,7 @@
     </mat-card>
 </mat-card>
 
-<mat-card class="os-card" *osPerms="'users.can_manage'">
+<mat-card class="os-card spacer-bottom-60" *osPerms="'users.can_manage'">
     <h2>{{ 'Statistics' | translate }}</h2>
     <div>
         <h3>{{ 'Active users' | translate }}</h3>
diff --git a/client/src/app/site/common/components/start/start.component.html b/client/src/app/site/common/components/start/start.component.html
index 87ac8e75b..ce3b12ee1 100644
--- a/client/src/app/site/common/components/start/start.component.html
+++ b/client/src/app/site/common/components/start/start.component.html
@@ -12,7 +12,7 @@
     </div>
 </os-head-bar>
 
-<mat-card [ngClass]="isEditing ? 'os-form-card' : 'os-card'">
+<mat-card class="spacer-bottom-60" [ngClass]="isEditing ? 'os-form-card' : 'os-card'">
     <ng-container *ngIf="!isEditing">
         <div class="app-content">
             <h1>{{ startContent.general_event_welcome_title | translate }}</h1>
diff --git a/client/src/app/site/common/components/user-statistics/user-statistics.component.html b/client/src/app/site/common/components/user-statistics/user-statistics.component.html
index 8e1bb9888..05407f4ea 100644
--- a/client/src/app/site/common/components/user-statistics/user-statistics.component.html
+++ b/client/src/app/site/common/components/user-statistics/user-statistics.component.html
@@ -20,6 +20,7 @@
         </tr>
     </table>
     <os-list-view-table
+        class="user-statistics-table--virtual-scroll "
         [listObservable]="statisticsByStructureLevelObservable"
         [columns]="columnDefinition"
         [filterProps]="filterProps"
@@ -27,7 +28,6 @@
         [allowProjector]="false"
         [fullScreen]="false"
         [showListOfSpeakers]="false"
-        [cssClasses]="{ 'user-statistics-table--virtual-scroll': true }"
     >
         <!-- Header -->
         <div *pblNgridHeaderCellDef="'*'; col as col">
diff --git a/client/src/app/site/common/components/user-statistics/user-statistics.component.scss b/client/src/app/site/common/components/user-statistics/user-statistics.component.scss
index 66eb4f9f5..3acc3c07a 100644
--- a/client/src/app/site/common/components/user-statistics/user-statistics.component.scss
+++ b/client/src/app/site/common/components/user-statistics/user-statistics.component.scss
@@ -17,9 +17,10 @@
 }
 
 .user-statistics-table--virtual-scroll {
+    display: block;
     height: 500px;
 
-    .pbl-ngrid-header-cell:not(:first-child):before {
-        display: none;
+    .list-view-frame {
+        height: 100%;
     }
 }
diff --git a/client/src/app/site/config/components/config-list/config-list.component.html b/client/src/app/site/config/components/config-list/config-list.component.html
index ae68e53a1..970b7ac3b 100644
--- a/client/src/app/site/config/components/config-list/config-list.component.html
+++ b/client/src/app/site/config/components/config-list/config-list.component.html
@@ -22,7 +22,7 @@
 
 <div class="spacer-top-20"></div>
 
-<mat-card class="os-card" *ngIf="configGroup">
+<mat-card class="os-card spacer-bottom-60" *ngIf="configGroup">
     <div id="wrapper">
         <ng-container *ngFor="let subgroup of configGroup.subgroups; trackBy: trackByIndex">
             <h3 class="accent" *ngIf="configGroup.subgroups.length > 1">{{ subgroup.name | translate }}</h3>
diff --git a/client/src/app/site/history/components/history-list/history-list.component.html b/client/src/app/site/history/components/history-list/history-list.component.html
index ee93d1385..11ea0fa52 100644
--- a/client/src/app/site/history/components/history-list/history-list.component.html
+++ b/client/src/app/site/history/components/history-list/history-list.component.html
@@ -11,73 +11,75 @@
     </div>
 </os-head-bar>
 
-<div class="custom-table-header">
-    <div>
-        <span [formGroup]="modelSelectForm">
+<mat-card class="os-card spacer-bottom-60">
+    <div class="history-table-header">
+        <div>
+            <span [formGroup]="modelSelectForm">
+                <mat-form-field>
+                    <os-search-value-selector
+                        formControlName="model"
+                        [multiple]="false"
+                        [includeNone]="false"
+                        placeholder="{{ 'Motion' | translate }}"
+                        [inputListValues]="collectionObserver"
+                    ></os-search-value-selector>
+                </mat-form-field>
+            </span>
+            <span class="spacer-left-20">
+                <button mat-button (click)="refresh()" *ngIf="currentModelId">
+                    <mat-icon>refresh</mat-icon>
+                    <span>{{ 'Refresh' | translate }}</span>
+                </button>
+            </span>
+        </div>
+        <div>
             <mat-form-field>
-                <os-search-value-selector
-                    formControlName="model"
-                    [multiple]="false"
-                    [includeNone]="false"
-                    placeholder="{{ 'Motion' | translate }}"
-                    [inputListValues]="collectionObserver"
-                ></os-search-value-selector>
+                <input matInput (keyup)="applySearch($event.target.value)" placeholder="{{ 'Search' | translate }}" />
+                <mat-icon matSuffix>search</mat-icon>
             </mat-form-field>
-        </span>
-        <span class="spacer-left-20">
-            <button mat-button (click)="refresh()" *ngIf="currentModelId">
-                <mat-icon>refresh</mat-icon>
-                <span>{{ 'Refresh' | translate }}</span>
-            </button>
-        </span>
+        </div>
     </div>
-    <div>
-        <mat-form-field>
-            <input matInput (keyup)="applySearch($event.target.value)" placeholder="{{ 'Search' | translate }}" />
-            <mat-icon matSuffix>search</mat-icon>
-        </mat-form-field>
-    </div>
-</div>
 
-<mat-table [dataSource]="dataSource" matSort class="os-headed-listview-table">
-    <!-- Timestamp -->
-    <ng-container matColumnDef="time">
-        <mat-header-cell *matHeaderCellDef>{{ 'Timestamp' | translate }}</mat-header-cell>
-        <mat-cell *matCellDef="let history">{{ getTimestamp(history) }}</mat-cell>
-    </ng-container>
+    <mat-table [dataSource]="dataSource" matSort class="os-headed-listview-table">
+        <!-- Timestamp -->
+        <ng-container matColumnDef="time">
+            <mat-header-cell *matHeaderCellDef>{{ 'Timestamp' | translate }}</mat-header-cell>
+            <mat-cell *matCellDef="let history">{{ getTimestamp(history) }}</mat-cell>
+        </ng-container>
 
-    <!-- Element -->
-    <ng-container matColumnDef="element">
-        <mat-header-cell *matHeaderCellDef>{{ 'Element' | translate }}</mat-header-cell>
-        <mat-cell *matCellDef="let history">
-            <div *ngIf="getElementInfo(history)">{{ getElementInfo(history) | translate }}</div>
-            <div
-                class="no-info"
-                matTooltip="{{ 'This element does not exist at this time.' | translate }}"
-                *ngIf="!getElementInfo(history)"
-            >
-                <span>{{ 'No information available' | translate }} ({{ history.element_id }})</span>
-            </div>
-        </mat-cell>
-    </ng-container>
+        <!-- Element -->
+        <ng-container matColumnDef="element">
+            <mat-header-cell *matHeaderCellDef>{{ 'Element' | translate }}</mat-header-cell>
+            <mat-cell *matCellDef="let history">
+                <div *ngIf="getElementInfo(history)">{{ getElementInfo(history) | translate }}</div>
+                <div
+                    class="no-info"
+                    matTooltip="{{ 'This element does not exist at this time.' | translate }}"
+                    *ngIf="!getElementInfo(history)"
+                >
+                    <span>{{ 'No information available' | translate }} ({{ history.element_id }})</span>
+                </div>
+            </mat-cell>
+        </ng-container>
 
-    <!-- Info -->
-    <ng-container matColumnDef="info">
-        <mat-header-cell *matHeaderCellDef>{{ 'Comment' | translate }}</mat-header-cell>
-        <mat-cell *matCellDef="let history">{{ parseInformation(history) }}</mat-cell>
-    </ng-container>
+        <!-- Info -->
+        <ng-container matColumnDef="info">
+            <mat-header-cell *matHeaderCellDef>{{ 'Comment' | translate }}</mat-header-cell>
+            <mat-cell *matCellDef="let history">{{ parseInformation(history) }}</mat-cell>
+        </ng-container>
 
-    <!-- User -->
-    <ng-container matColumnDef="user">
-        <mat-header-cell *matHeaderCellDef>{{ 'Changed by' | translate }}</mat-header-cell>
-        <mat-cell *matCellDef="let history">{{ getUserName(history) }}</mat-cell>
-    </ng-container>
+        <!-- User -->
+        <ng-container matColumnDef="user">
+            <mat-header-cell *matHeaderCellDef>{{ 'Changed by' | translate }}</mat-header-cell>
+            <mat-cell *matCellDef="let history">{{ getUserName(history) }}</mat-cell>
+        </ng-container>
 
-    <mat-header-row *matHeaderRowDef="getRowDef()"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: getRowDef()" (click)="onClickRow(row)"></mat-row>
-</mat-table>
+        <mat-header-row *matHeaderRowDef="getRowDef()"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: getRowDef()" (click)="onClickRow(row)"></mat-row>
+    </mat-table>
 
-<mat-paginator [pageSizeOptions]="pageSizes"></mat-paginator>
+    <mat-paginator [pageSizeOptions]="pageSizes"></mat-paginator>
+</mat-card>
 
 <mat-menu #historyMenu="matMenu">
     <button mat-menu-item class="red-warning-text" (click)="clearHistory()">
diff --git a/client/src/app/site/history/components/history-list/history-list.component.scss b/client/src/app/site/history/components/history-list/history-list.component.scss
index 8fe9cce38..5fb8b3097 100644
--- a/client/src/app/site/history/components/history-list/history-list.component.scss
+++ b/client/src/app/site/history/components/history-list/history-list.component.scss
@@ -1,13 +1,16 @@
 .no-info {
     font-style: italic;
-    color: slategray; // TODO: Colors per theme
 }
 
-.custom-table-header {
+.history-table-header {
+    display: flex;
     justify-content: space-between;
-    text-align: left;
+}
 
-    & > div {
-        padding: 0 20px;
+.os-headed-listview-table {
+    .mat-header-cell,
+    .mat-cell {
+        padding-left: 5px;
+        padding-right: 5px;
     }
 }
diff --git a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
index b1a38bbc7..812baa65e 100644
--- a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
+++ b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
@@ -82,7 +82,7 @@
 
 <!-- the actual file manager -->
 <pbl-ngrid
-    class="virtual-scroll-with-head-bar ngrid-hide-head file-manager-table"
+    class="file-manager-table"
     showHeader="false"
     vScrollAuto
     [dataSource]="dataSource"
diff --git a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss
index aa00316c1..0d8666128 100644
--- a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss
+++ b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss
@@ -51,6 +51,9 @@ $navbar-size: 64px;
 }
 
 .file-manager-table {
+    display: block;
+    height: calc(100vh - 130px);
+
     .file-title {
         font-weight: 500;
         font-size: 16px;
@@ -68,4 +71,8 @@ $navbar-size: 64px;
             height: $size !important;
         }
     }
+
+    .pbl-ngrid-row:last-of-type {
+        margin-bottom: 60px !important;
+    }
 }
diff --git a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.scss b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.scss
index f5efea718..b4325e882 100644
--- a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.scss
+++ b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.scss
@@ -1,22 +1 @@
 @import '~assets/styles/tables.scss';
-
-.os-headed-listview-table {
-    // Title
-    .mat-column-title {
-        flex: 9 0 0;
-    }
-
-    // Amount
-    .mat-column-amount {
-        flex: 1 0 60px;
-    }
-
-    // Menu
-    .mat-column-menu {
-        flex: 0 0 40px;
-    }
-}
-
-.mat-cell > div {
-    z-index: 1 !important;
-}
diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html b/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html
index c9d6c02da..c4a247a8b 100644
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html
@@ -6,7 +6,6 @@
 </os-head-bar>
 
 <os-list-view-table
-    class="block-list"
     [vScrollFixed]="64"
     [listObservableProvider]="repo"
     [showFilterBar]="true"
diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.scss b/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.scss
index 83f48c826..b6cbcc2a9 100644
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.scss
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.scss
@@ -1,13 +1,5 @@
 @import '~assets/styles/tables.scss';
 
-.block-list {
-    display: block;
-
-    .virtual-scroll-full-page {
-        height: calc(100vh - 150px);
-    }
-}
-
 .mat-dialog-container {
     .mat-dialog-title {
         margin: 0;
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html b/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
index 339de828b..96eea921e 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
@@ -115,7 +115,7 @@
     </mat-menu>
 </os-head-bar>
 
-<div class="content-container" (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
+<div class="content-container spacer-bottom-60" (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
     <!-- Title -->
     <div class="title" *ngIf="motion && !editMotion">
         <div class="title-line">
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html
index 4f587078a..9971e4948 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html
@@ -10,7 +10,7 @@
     </div>
 </os-head-bar>
 
-<mat-card class="os-card">
+<mat-card class="os-card spacer-bottom-60">
     <ng-container [ngTemplateOutlet]="viewTemplate"></ng-container>
 </mat-card>
 
@@ -40,6 +40,7 @@
                 <h2>{{ 'Single votes' | translate }}</h2>
                 <os-list-view-table
                     *ngIf="votesDataObservable"
+                    class="single-votes-table"
                     [listObservable]="votesDataObservable"
                     [columns]="columnDefinition"
                     [filterProps]="filterProps"
@@ -47,7 +48,6 @@
                     [fullScreen]="true"
                     [vScrollFixed]="-1"
                     listStorageKey="motion-poll-vote"
-                    [cssClasses]="{ 'single-votes-table': true }"
                 >
                     <!-- Header -->
                     <div *pblNgridHeaderCellDef="'*'; col as col">
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss
index 1372bdc13..c17d3fb29 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss
@@ -26,7 +26,12 @@
 }
 
 .single-votes-table {
+    display: block;
     height: 500px;
+
+    .list-view-frame {
+        height: 100%;
+    }
 }
 
 .openslides-theme .pbl-ngrid-no-data {
diff --git a/client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.scss b/client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.scss
index 8893fc535..e69de29bb 100644
--- a/client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.scss
+++ b/client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.scss
@@ -1,14 +0,0 @@
-.os-headed-listview-table {
-    /** name */
-    .mat-column-name {
-        width: 100%;
-        flex: 1 0 200px;
-        padding-left: 10px;
-    }
-
-    /** delete */
-    .mat-column-delete {
-        flex: 0 0 190px;
-        justify-content: flex-end !important;
-    }
-}
diff --git a/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html b/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html
index 12af1e2ab..f1baf79f7 100644
--- a/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html
+++ b/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html
@@ -12,30 +12,32 @@
     </div>
 </os-head-bar>
 
-<cdk-virtual-scroll-viewport itemSize="50" [ngClass]="statuteParagraphs.length ? 'virtual-scroll-full-page' : ''">
-    <mat-accordion class="os-card">
-        <mat-expansion-panel *cdkVirtualFor="let statuteParagraph of statuteParagraphs" multiple="false">
-            <mat-expansion-panel-header>
-                <mat-panel-title>
-                    {{ statuteParagraph.title }}
-                </mat-panel-title>
-            </mat-expansion-panel-header>
-            <mat-card>
-                <mat-card-title>{{ statuteParagraph.title }}</mat-card-title>
-                <mat-card-content>
-                    <div [innerHTML]="statuteParagraph.text | trust: 'html'"></div>
-                </mat-card-content>
-            </mat-card>
-            <mat-action-row>
-                <button mat-button mat-icon-button (click)="openDialog(statuteParagraph)">
-                    <mat-icon>edit</mat-icon>
-                </button>
-                <button mat-button mat-icon-button (click)="onDeleteButton(statuteParagraph)">
-                    <mat-icon>delete</mat-icon>
-                </button>
-            </mat-action-row>
-        </mat-expansion-panel>
-    </mat-accordion>
+<cdk-virtual-scroll-viewport class="statute-vscroll-wrapper" itemSize="50">
+    <mat-card>
+        <mat-accordion>
+            <mat-expansion-panel *cdkVirtualFor="let statuteParagraph of statuteParagraphs" multiple="false">
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        {{ statuteParagraph.title }}
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <mat-card>
+                    <mat-card-title>{{ statuteParagraph.title }}</mat-card-title>
+                    <mat-card-content>
+                        <div [innerHTML]="statuteParagraph.text | trust: 'html'"></div>
+                    </mat-card-content>
+                </mat-card>
+                <mat-action-row>
+                    <button mat-button mat-icon-button (click)="openDialog(statuteParagraph)">
+                        <mat-icon>edit</mat-icon>
+                    </button>
+                    <button mat-button mat-icon-button (click)="onDeleteButton(statuteParagraph)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
+                </mat-action-row>
+            </mat-expansion-panel>
+        </mat-accordion>
+    </mat-card>
 </cdk-virtual-scroll-viewport>
 
 <mat-card *ngIf="statuteParagraphs.length === 0">
diff --git a/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.scss b/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.scss
index 542c10c78..fc96549ec 100644
--- a/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.scss
+++ b/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.scss
@@ -1,16 +1,11 @@
-.head-spacer {
-    width: 100%;
-    height: 60px;
-    line-height: 60px;
-    text-align: right;
-    background: white; /* TODO: remove this and replace with theme */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-}
+.statute-vscroll-wrapper {
+    height: calc(100vh - 64px);
 
-mat-card {
-    margin-bottom: 20px;
+    .mat-card {
+        margin-bottom: 20px;
 
-    mat-form-field {
-        width: 100%;
+        .mat-form-field {
+            width: 100%;
+        }
     }
 }
diff --git a/client/src/app/site/polls/components/poll-progress/poll-progress.component.html b/client/src/app/site/polls/components/poll-progress/poll-progress.component.html
index f8cffffd3..38d997f37 100644
--- a/client/src/app/site/polls/components/poll-progress/poll-progress.component.html
+++ b/client/src/app/site/polls/components/poll-progress/poll-progress.component.html
@@ -1,4 +1,6 @@
-<div *ngIf="poll" class="poll-progress-wrapper">
+out of poll
+<div class="poll-progress-wrapper">
+    in the poll
     <div class="vote-number">
         <span>{{ votescast }} / {{ max }}</span>
     </div>
diff --git a/client/src/app/site/site.component.html b/client/src/app/site/site.component.html
index 0fbd729b8..a44da9e74 100644
--- a/client/src/app/site/site.component.html
+++ b/client/src/app/site/site.component.html
@@ -95,9 +95,7 @@
             </main>
         </div>
         <div class="toolbars">
-            <!-- test -->
             <os-jitsi></os-jitsi>
-            <!-- <os-live-stream></os-live-stream> -->
         </div>
     </mat-sidenav-content>
 </mat-sidenav-container>
diff --git a/client/src/app/site/site.component.scss b/client/src/app/site/site.component.scss
index 884823065..ee2df519d 100644
--- a/client/src/app/site/site.component.scss
+++ b/client/src/app/site/site.component.scss
@@ -122,12 +122,11 @@ mat-sidenav-container {
     position: relative;
 
     main {
+        position: absolute;
         display: flex;
         flex-direction: column;
         width: 100%;
-        position: relative;
         z-index: 50;
-        flex: 1;
         > *:not(router-outlet) {
             flex: 1;
             display: block;
diff --git a/client/src/app/site/users/components/group-list/group-list.component.html b/client/src/app/site/users/components/group-list/group-list.component.html
index 66629bb1a..457527838 100644
--- a/client/src/app/site/users/components/group-list/group-list.component.html
+++ b/client/src/app/site/users/components/group-list/group-list.component.html
@@ -5,53 +5,54 @@
     </div>
 </os-head-bar>
 
-<div class="hint-text">
-    <span>{{ 'All your changes are saved immediately.' | translate }}</span>
-</div>
+<mat-card class="spacer-bottom-60">
+    <div class="hint-text">
+        <span>{{ 'All your changes are saved immediately.' | translate }}</span>
+    </div>
+    <mat-accordion *ngFor="let app of appPermissions">
+        <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    {{ app.name | translate }}
+                </mat-panel-title>
+            </mat-expansion-panel-header>
 
-<mat-accordion *ngFor="let app of appPermissions">
-    <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                {{ app.name | translate }}
-            </mat-panel-title>
-        </mat-expansion-panel-header>
-
-        <div class="scrollable-perm-matrix">
-            <table mat-table [dataSource]="getTableDataSource(app.permissions)">
-                <ng-container matColumnDef="perm" sticky>
-                    <mat-header-cell *matHeaderCellDef>{{ 'Permissions' | translate }}</mat-header-cell>
-                    <mat-cell *matCellDef="let perm">
-                        {{ perm.display_name | translate }}
-                    </mat-cell>
-                </ng-container>
-
-                <div *ngFor="let group of groups; trackBy: trackByIndex">
-                    <ng-container [matColumnDef]="group.name">
-                        <mat-header-cell class="group-head-table-cell" *matHeaderCellDef (click)="selectGroup(group)">
-                            <div class="inner-table">
-                                {{ group.name | translate }}
-                            </div>
-                        </mat-header-cell>
+            <div class="scrollable-perm-matrix">
+                <table mat-table [dataSource]="getTableDataSource(app.permissions)">
+                    <ng-container matColumnDef="perm" sticky>
+                        <mat-header-cell *matHeaderCellDef>{{ 'Permissions' | translate }}</mat-header-cell>
                         <mat-cell *matCellDef="let perm">
-                            <div class="inner-table">
-                                <mat-checkbox
-                                    *ngIf="group.id !== 2"
-                                    [checked]="group.hasPermission(perm.value)"
-                                    (change)="togglePerm(group, perm.value)"
-                                ></mat-checkbox>
-                                <mat-checkbox *ngIf="group.id === 2" [checked]="true" [disabled]="true"></mat-checkbox>
-                            </div>
+                            {{ perm.display_name | translate }}
                         </mat-cell>
                     </ng-container>
-                </div>
 
-                <mat-header-row *matHeaderRowDef="headerRowDef"></mat-header-row>
-                <mat-row *matRowDef="let row; columns: headerRowDef"></mat-row>
-            </table>
-        </div>
-    </mat-expansion-panel>
-</mat-accordion>
+                    <div *ngFor="let group of groups; trackBy: trackByIndex">
+                        <ng-container [matColumnDef]="group.name">
+                            <mat-header-cell class="group-head-table-cell" *matHeaderCellDef (click)="selectGroup(group)">
+                                <div class="inner-table">
+                                    {{ group.name | translate }}
+                                </div>
+                            </mat-header-cell>
+                            <mat-cell *matCellDef="let perm">
+                                <div class="inner-table">
+                                    <mat-checkbox
+                                        *ngIf="group.id !== 2"
+                                        [checked]="group.hasPermission(perm.value)"
+                                        (change)="togglePerm(group, perm.value)"
+                                    ></mat-checkbox>
+                                    <mat-checkbox *ngIf="group.id === 2" [checked]="true" [disabled]="true"></mat-checkbox>
+                                </div>
+                            </mat-cell>
+                        </ng-container>
+                    </div>
+
+                    <mat-header-row *matHeaderRowDef="headerRowDef"></mat-header-row>
+                    <mat-row *matRowDef="let row; columns: headerRowDef"></mat-row>
+                </table>
+            </div>
+        </mat-expansion-panel>
+    </mat-accordion>
+</mat-card>
 
 <ng-template #groupEditDialog>
     <h1 mat-dialog-title>
diff --git a/client/src/app/site/users/components/group-list/group-list.component.scss b/client/src/app/site/users/components/group-list/group-list.component.scss
index 0dcaee684..02ddd30ab 100644
--- a/client/src/app/site/users/components/group-list/group-list.component.scss
+++ b/client/src/app/site/users/components/group-list/group-list.component.scss
@@ -20,7 +20,7 @@ table {
 }
 
 .hint-text {
-    padding-top: 30px;
+    padding-top: 1em;
     padding-left: 25px;
 }
 
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 887bbf083..476638e45 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -309,11 +309,6 @@ b,
     @extend %os-table;
 }
 
-/* TODO: find a better way to get more vertical space in (empty/small) tables for maximize filter dialog */
-.mat-paginator {
-    min-height: 800px;
-}
-
 /* hide scrollbars caused by hidden filter dialog outside of the viewport */
 .mat-drawer-content {
     overflow-x: hidden !important;
@@ -447,6 +442,10 @@ button.mat-menu-item.selected {
     margin-bottom: 40px !important;
 }
 
+.spacer-bottom-60 {
+    margin-bottom: 60px !important;
+}
+
 .spacer-left-10 {
     margin-left: 10px;
 }
@@ -499,19 +498,6 @@ button.mat-menu-item.selected {
     }
 }
 
-/**
- * cdk-virtual-scroll-viewport requires a hight, otherwise it would always be 0
- * Depending in mobile-mode and desktop mode we need to subtract different values
- * from 100vh
- */
-.virtual-scroll-full-page {
-    height: calc(100vh - 64px);
-}
-
-.virtual-scroll-with-head-bar {
-    height: calc(100vh - 129px);
-}
-
 /** css hacks https://codepen.io/edge0703/pen/iHJuA */
 .innerTable {
     display: inline-block;
@@ -519,12 +505,13 @@ button.mat-menu-item.selected {
     width: -webkit-fill-available;
 }
 
-.ngrid-hide-head {
-    // For some reason, hiding the table header adds an empty meta bar.
-    .pbl-ngrid-container {
-        > div {
-            height: 0;
-        }
+/**
+ * Compilcated ngrid hack: The meta row won't disappear (just like that)
+ * Select the first ever container pbl-ngrid-container div and hide
+ */
+.pbl-ngrid-container {
+    > div {
+        height: 0;
     }
 }