fix: multiple layout issues

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplehomeaccounting",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "license": "MIT",
   "main": "main.js",
   "author": "Benlenem",

src/app/app.component.css

@@ -2,25 +2,21 @@ body {
     overflow: hidden;
   }
 
-.main {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+  .example-spacer {
+    flex: 1 1 auto;
+  }
 
-    min-height: 100vh;
+.main {
+  display: flex;
+  height: 100vh;
+  max-height: 100vh;
+  flex-direction: column;
 }
 
 mat-tab-group {
-  flex: 1;
-}
-
-mat-sidenav {
-  width: 400px;
-  padding:5px;
-}
-
-mat-toolbar {
-    flex: 0 0 auto;
+  flex-grow: 1;
+  height: 100px;
+  display:flex;
 }
 
 mat-progress-spinner {
@@ -33,12 +29,6 @@ mat-progress-spinner {
   justify-content: center;
 }
 
-.content {
-    flex: 1 1 auto;
-    position: relative;/* need this to position inner content */
-    overflow-y: auto;
-}
-
 .footer {
     position: absolute;
     bottom: 0;

src/app/app.component.html

@@ -1,4 +1,3 @@
-<mat-sidenav-container class="mat-typography">
   <div class="main">
     <mat-toolbar color="primary">
 
@@ -73,6 +72,4 @@
       </mat-tab>
     </mat-tab-group>
 
-  </div>
-
-</mat-sidenav-container>
+  </div>

src/app/app.component.ts

@@ -3,7 +3,7 @@ import {throwError as observableThrowError, of as observableOf,  BehaviorSubject
 
 import {tap, take, map, zip,  filter, concatMap, mergeMap } from 'rxjs/operators';
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatSidenav, MatTabGroup } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatTabGroup } from '@angular/material';
 import * as fileSaver from 'file-saver';
 import { LedgerService } from './shared/services/ledger/ledger.service';
 import { OfxService } from './shared/services/ofx/ofx.service';

src/app/app.module.ts

@@ -11,7 +11,6 @@ import {
   MatNativeDateModule,
   MatPaginatorModule,
   MatProgressSpinnerModule,
-  MatSidenavModule,
   MatSortModule,
   MatTableModule,
   MatToolbarModule,
@@ -70,7 +69,6 @@ import { TagsComponent } from './components/tags/tags.component';
     MatButtonModule,
     MatCheckboxModule,
     MatToolbarModule,
-    MatSidenavModule,
     CdkTableModule,
     MatTableModule,
     MatPaginatorModule,

src/app/components/transactions/transactions.component.css

@@ -7,6 +7,10 @@ mat-cell {
     padding: 5px 0;
 }
 
+p {
+    margin: 0;
+}
+
 .invalid {
   background: repeating-linear-gradient(
     45deg,
@@ -28,6 +32,9 @@ mat-cell {
 
 .postings {
     padding-right: 12px;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
 }
 
 .posting {

src/app/components/transactions/transactions.component.html

@@ -8,25 +8,19 @@
 
   <mat-table #table [dataSource]="dataSource" matSort [class.hidden]="noTransactionsToDisplay | async">
 
-  <!--- Note that these columns can be defined in any order.
-        The actual rendered columns are set as a property on the row definition" -->
-
-  <!-- ID Column -->
   <ng-container cdkColumnDef="title">
     <mat-header-cell *cdkHeaderCellDef mat-sort-header> Titre </mat-header-cell>
     <mat-cell *cdkCellDef="let row">
-      <p class="mat-body-2">{{row.title}}</p>
-      <app-tags [tags]="row.headerTags" [allowEditing]="false"></app-tags>
+      <p>{{row.title}}</p>
+      <app-tags [tags]="row.headerTags" [allowEditing]="false" *ngIf="row.headerTags"></app-tags>
     </mat-cell>
   </ng-container>
 
-  <!-- Progress Column -->
   <ng-container cdkColumnDef="date">
     <mat-header-cell *cdkHeaderCellDef mat-sort-header [ngClass]="'shrink_cell'"> Date </mat-header-cell>
     <mat-cell *cdkCellDef="let row" [ngClass]="'shrink_cell'"> {{row.date}} </mat-cell>
   </ng-container>
 
-  <!-- Name Column -->
   <ng-container cdkColumnDef="movements">
     <mat-header-cell *cdkHeaderCellDef [ngClass]="'grow_cell'"> Mouvements </mat-header-cell>
     <mat-cell *cdkCellDef="let row" [ngClass]="'grow_cell postings'" (click)="$event.stopPropagation()">
@@ -38,6 +32,7 @@
             [ngClass]="{positive:p.isPositive == true, negative:p.isPositive == false}">
               {{p.amount}}
           </span>
+
         </div>
 
         <div *ngIf="(row.postings | async).length > 2" class="posting">

src/styles.css

@@ -1,19 +1,13 @@
 /* You can add global styles to this file, and also import other style files */
 @import '@angular/material/prebuilt-themes/deeppurple-amber.css';
 
-
 .example-icon {
   padding: 0 14px;
 }
 
-.example-spacer {
-  flex: 1 1 auto;
-}
-
-html, body, mat-sidenav-container, .content {
+html, body {
   margin: 0;
-  width: 100%;
-  height: 100%;
+  padding: 0;
 }
 
 .mat-tab-body-wrapper {
@@ -22,4 +16,5 @@ html, body, mat-sidenav-container, .content {
   https://material.angular.io/guide/customizing-component-styles
   */
   flex: 1;
-}
+  flex-grow: 1;
+}