teams: smoother reports (fixes #7683) (#7684)

Co-authored-by: dogi <[email protected]>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.16",
+  "version": "0.15.17",
   "myplanet": {
     "latest": "v0.20.69",
     "min": "v0.19.69"

src/app/teams/teams-reports-detail.component.html

@@ -1,19 +1,21 @@
-<div class="report-grid">
-  <b i18n>Beginning Balance</b><b>{{report.beginningBalance | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</b>
-  <mat-divider class="full-width"></mat-divider>
-  <span i18n>Sales</span><span>{{report.sales | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</span>
-  <span i18n>Other</span><span>{{report.otherIncome | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</span>
-  <b i18n>Total Income</b><b>{{income | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</b>
-  <mat-divider class="full-width"></mat-divider>
-  <span i18n>Personnel</span><span>{{report.wages | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</span>
-  <span i18n>Non-Personnel</span><span>{{report.otherExpenses | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</span>
-  <b i18n>Total Expenses</b><b>{{expenses | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</b>
-  <mat-divider class="full-width"></mat-divider>
-  <b i18n>Profit/Loss</b><b>{{net | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</b>
-  <b i18n>Ending Balance</b><b>{{endingBalance | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</b>
+<div class="report-grid-container">
+  <div class="report-grid">
+    <b i18n>Beginning Balance</b><b>{{report.beginningBalance | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</b>
+    <mat-divider class="full-width"></mat-divider>
+    <span i18n>Sales</span><span>{{report.sales | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</span>
+    <span i18n>Other</span><span>{{report.otherIncome | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</span>
+    <b i18n>Total Income</b><b>{{income | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</b>
+    <mat-divider class="full-width"></mat-divider>
+    <span i18n>Personnel</span><span>{{report.wages | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</span>
+    <span i18n>Non-Personnel</span><span>{{report.otherExpenses | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</span>
+    <b i18n>Total Expenses</b><b>{{expenses | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</b>
+    <mat-divider class="full-width"></mat-divider>
+    <b i18n>Profit/Loss</b><b>{{net | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</b>
+    <b i18n>Ending Balance</b><b>{{endingBalance | currency:this.curCode?.code:this.curCode?.symbol:'1.0-2'}}</b>
+  </div>
+  <ng-container *ngIf="showSummary">
+    <h4 i18n>Report Summary</h4>
+    <planet-markdown [content]="report.description"></planet-markdown>
+    <div><ng-container i18n>Report created on:</ng-container> {{report.createdDate | date }}<ng-container *ngIf="report.createdDate !== report.updatedDate"> | <ng-container i18n>Updated on:</ng-container> {{report.updatedDate | date}}</ng-container></div>
+  </ng-container>
 </div>
-<ng-container *ngIf="showSummary">
-  <h4 i18n>Report Summary</h4>
-  <planet-markdown [content]="report.description"></planet-markdown>
-  <div><ng-container i18n>Report created on:</ng-container> {{report.createdDate | date }}<ng-container *ngIf="report.createdDate !== report.updatedDate"> | <ng-container i18n>Updated on:</ng-container> {{report.updatedDate | date}}</ng-container></div>
-</ng-container>

src/app/teams/teams-reports-detail.component.ts

@@ -5,10 +5,15 @@ import { StateService } from '../shared/state.service';
   selector: 'planet-teams-reports-detail',
   templateUrl: './teams-reports-detail.component.html',
   styles: [ `
+    .report-grid-container {
+      overflow-x: auto;
+      overflow-y: auto;
+    }
     .report-grid {
       display: grid;
-      grid-template-columns: 250px auto;
+      grid-template-columns: 250px 1fr;
       grid-row-gap: 0.25rem;
+      overflow-wrap: break-word;
     }
     .report-grid .full-width {
       grid-column: 1 / -1;