fix white change-recommendation-overview

Fixes a bug where a white or blank change-recommendation-overview appeared

client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.html

@@ -1,5 +1,6 @@
 <!-- A summary of all changes -->
-<section class="change-recommendation-overview" *ngIf="changes.length > 0">
+<div class="motion-detail-diff">
+    <section class="change-recommendation-overview" *ngIf="changes.length > 0">
         <strong> {{ 'Summary of changes' | translate }}: </strong>
 
         <ul>
@@ -15,7 +16,9 @@
                     </span>
                     <span *ngIf="change.isTitleChange()">{{ 'Title' | translate }}</span>
                     <span *ngIf="isChangeRecommendation(change)"> ({{ 'Change recommendation' | translate }})</span>
-                <span *ngIf="isAmendment(change)"> ({{ 'Amendment' | translate }} {{ change.getIdentifier() }})</span>
+                    <span *ngIf="isAmendment(change)">
+                        ({{ 'Amendment' | translate }} {{ change.getIdentifier() }})</span
+                    >
                     <span class="operation" *ngIf="isChangeRecommendation(change)">
                         – {{ getRecommendationTypeName(change) | translate }}
                         <!--
@@ -38,12 +41,12 @@
         </ul>
 
         <div *ngIf="changes.length === 0" class="no-changes">{{ 'No change recommendations yet' | translate }}</div>
-</section>
+    </section>
 
-<span class="text-prefix-label" *ngIf="showPreamble">{{ preamble | translate }}</span>
+    <span class="text-prefix-label" *ngIf="showPreamble">{{ preamble | translate }}</span>
 
-<!-- The actual diff view -->
+    <!-- The actual diff view -->
-<div class="motion-text-with-diffs">
+    <div class="motion-text-with-diffs">
         <div *ngIf="getTitleChangingObject() as changedTitle">
             <div class="diff-box diff-box-{{ changedTitle.getChangeId() }} clearfix">
                 <div class="action-row" *osPerms="'motions.can_manage'">
@@ -121,8 +124,7 @@
                         <i class="fa fa-info"></i>
                         {{ change.original.identifier }}
                     </a>
-                -->
+                --></div>
-            </div>
                 <div class="status-row" *ngIf="isChangeRecommendation(change) && change.isRejected()">
                     <i class="grey">{{ 'Rejected' | translate }}</i>
                 </div>
@@ -132,7 +134,9 @@
                  However, if showAllAmendments === true, the prefix should be shown alwayes,
                  even if it's accepted -->
                 <div class="status-row" *ngIf="isAmendment(change) && showAllAmendments">
-                <i class="grey">{{ change.amendment.identifier }} - {{ change.amendment.state.name | translate }}</i>
+                    <i class="grey"
+                        >{{ change.amendment.identifier }} - {{ change.amendment.state.name | translate }}</i
+                    >
                 </div>
 
                 <div
@@ -158,14 +162,15 @@
                 (createChangeRecommendation)="onCreateChangeRecommendation($event)"
             ></os-motion-detail-original-change-recommendations>
         </div>
-</div>
+    </div>
 
-<mat-menu #amendmentMenu="matMenu">
+    <mat-menu #amendmentMenu="matMenu">
         <ng-template matMenuContent let-change="change">
             <button
                 type="button"
                 mat-menu-item
-            [routerLink]="change.amendment.getDetailStateURL()" [state]="{ back: 'true' }"
+                [routerLink]="change.amendment.getDetailStateURL()"
+                [state]="{ back: 'true' }"
             >
                 <mat-icon>visibility_on</mat-icon>
                 <span>{{ 'Show amendment' | translate }}</span>
@@ -173,7 +178,11 @@
 
             <mat-divider *ngIf="change.amendment.state.next_states.length > 0"></mat-divider>
 
-        <button *ngFor="let state of change.amendment.state.next_states" mat-menu-item (click)="setAmendmentState(change, state.id)">
+            <button
+                *ngFor="let state of change.amendment.state.next_states"
+                mat-menu-item
+                (click)="setAmendmentState(change, state.id)"
+            >
                 {{ state.name | translate }} <span *ngIf="state.show_state_extension_field">&nbsp;...</span>
             </button>
             <mat-divider *ngIf="change.amendment.state.next_states.length > 0"></mat-divider>
@@ -193,24 +202,16 @@
 
             <!-- perms.isAllowed('change_state', motion) -->
         </ng-template>
-</mat-menu>
+    </mat-menu>
 
-<mat-menu #changeRecommendationMenu="matMenu">
+    <mat-menu #changeRecommendationMenu="matMenu">
         <ng-template matMenuContent let-change="change">
-        <button
+            <button type="button" mat-menu-item (click)="setAcceptanceValue(change, 'accepted')">
-            type="button"
-            mat-menu-item
-            (click)="setAcceptanceValue(change, 'accepted')"
-        >
                 <mat-icon>thumb_up</mat-icon>
                 <span>{{ 'Accept' | translate }}</span>
                 <mat-icon class="active-indicator">{{ change.isAccepted() ? 'done' : '' }}</mat-icon>
             </button>
-        <button
+            <button type="button" mat-menu-item (click)="setAcceptanceValue(change, 'rejected')">
-            type="button"
-            mat-menu-item
-            (click)="setAcceptanceValue(change, 'rejected')"
-        >
                 <mat-icon>thumb_down</mat-icon>
                 <span>{{ 'Reject' | translate }}</span>
                 <mat-icon class="active-indicator">{{ change.isRejected() ? 'done' : '' }}</mat-icon>
@@ -242,4 +243,5 @@
                 <span>{{ 'Edit' | translate }}</span>
             </button>
         </ng-template>
-</mat-menu>
+    </mat-menu>
+</div>

client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss

@@ -3,7 +3,7 @@
 @mixin os-motion-detail-diff-style($theme) {
     $background: map-get($theme, background);
 
-    .motion-text-with-diffs {
+    .motion-detail-diff {
         .change-recommendation-overview,
         .diff-box {
             background-color: mat-color($background, background);