fix:layout issues

src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.html

@@ -1,14 +1,16 @@
 <div class="layout-row-wrap gap-2px responsive-column">
-  <h4 class="mat-h4 flex-23">
-    {{ 'labels.inputs.Market Price Period' | translate }}
-    <i class="fas fa-question" matTooltip="{{ 'tooltips.Add future share value with date range' | translate }}"></i>
-  </h4>
+  <div class="add-option">
+    <h4 class="mat-h4">
+      {{ 'labels.inputs.Market Price Period' | translate }}
+      <i class="fas fa-question" matTooltip="{{ 'tooltips.Add future share value with date range' | translate }}"></i>
+    </h4>
 
-  <div class="flex-73">
-    <button type="button" mat-raised-button color="primary" (click)="addMarketPricePeriod()">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Add' | translate }}
-    </button>
+    <div class="">
+      <button type="button" mat-raised-button color="primary" (click)="addMarketPricePeriod()">
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Add' | translate }}
+      </button>
+    </div>
   </div>
 
   <table

src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.scss

@@ -14,3 +14,10 @@ h4 {
 .margin-t {
   margin-top: 1em;
 }
+
+.add-option {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+}

src/app/reports/run-report/run-report.component.html

@@ -1,10 +1,10 @@
 <div class="container input">
   <mat-card *ngIf="!isCollapsed">
     <form [formGroup]="reportForm">
-      <mat-card-content class="layout-column">
+      <mat-card-content class="form-grid">
         <ng-container *ngFor="let param of paramData" [ngSwitch]="param.displayType">
-          <ng-container *ngIf="reportForm.contains(param.name)">
-            <mat-form-field class="flex-fill" *ngSwitchCase="'text'">
+          <ng-container class="test" *ngIf="reportForm.contains(param.name)">
+            <mat-form-field class="form-field" *ngSwitchCase="'text'">
               <mat-label>{{ param.label }}</mat-label>
               <input matInput required [formControlName]="param.name" />
               <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
@@ -13,7 +13,7 @@
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field class="flex-fill" *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
+            <mat-form-field class="form-field" *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
               <mat-label>{{ param.label }}</mat-label>
               <input
                 matInput
@@ -31,7 +31,7 @@
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field class="flex-fill" *ngSwitchCase="'select'">
+            <mat-form-field class="form-field" *ngSwitchCase="'select'">
               <mat-label>{{ param.label }}</mat-label>
               <mat-select required [formControlName]="param.name">
                 <mat-option *ngFor="let option of param.selectOptions" [value]="option">
@@ -46,7 +46,7 @@
           </ng-container>
         </ng-container>
 
-        <mat-form-field class="flex-fill">
+        <mat-form-field class="form-field">
           <mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
           <mat-select [formControl]="decimalChoice">
             <mat-option value="0">0</mat-option>
@@ -57,7 +57,7 @@
           </mat-select>
         </mat-form-field>
 
-        <mat-form-field class="flex-fill" *ngIf="isPentahoReport()">
+        <mat-form-field class="form-field" *ngIf="isPentahoReport()">
           <mat-label>{{ 'labels.inputs.Output Type' | translate }}</mat-label>
           <mat-select required formControlName="outputType">
             <mat-option *ngFor="let option of outputTypeOptions" [value]="option.value">
@@ -77,7 +77,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
+      <mat-card-actions class="layout-row align-between gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['/reports']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/reports/run-report/run-report.component.scss

@@ -1,3 +1,12 @@
 .input {
   max-width: 37rem;
 }
+
+.form-grid {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-field {
+  width: 100%;
+}

src/main.scss

@@ -305,6 +305,7 @@
 
 .flex-50 {
   flex: 0 0 50%;
+  margin-bottom: 1rem;
 }
 
 .flex-53 {