Fix: The dialogs were not rendering properly.

The select table dialog was long and narrow.
The billtype was selection was also not showing properly.

bookie/src/app/sales/bill-type/bill-type.component.html

@@ -1,3 +1,5 @@
+<h2 mat-dialog-title>Bill Type</h2>
+<mat-dialog-content>
   <div class="flex flex-row flex-wrap -mr-5 -mb-5">
     <mat-card
       class="flex flex-col square-button mr-5, mb-5"
@@ -24,6 +26,7 @@
       <h3 class="item-name">No Charge</h3>
     </mat-card>
   </div>
+</mat-dialog-content>
 <mat-dialog-actions align="end">
   <button mat-button [mat-dialog-close]="false">Cancel</button>
   <button mat-button [mat-dialog-close]="selectedVal">Done</button>

bookie/src/app/sales/choose-customer/choose-customer.component.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Customer</h1>
+<h2 mat-dialog-title>Customer</h2>
 <mat-dialog-content>
   <form [formGroup]="form" class="flex flex-col">
     <div class="flex flex-row justify-around content-start items-start">

bookie/src/app/sales/home/sales-home.component.ts

@@ -350,7 +350,6 @@ export class SalesHomeComponent {
   showChooseTableDialog(canChooseRunning: boolean): Observable<Table | undefined | null> {
     return this.dialog
       .open(TablesDialogComponent, {
-        // width: '750px',
         data: {
           list: this.tableService.running(),
           canChooseRunning,

bookie/src/app/sales/tables-dialog/tables-dialog.component.html

@@ -1,5 +1,6 @@
 <h2 mat-dialog-title>Tables</h2>
-<mat-dialog-content class="flex flex-row flex-wrap -mr-5 -mb-5">
+<mat-dialog-content>
+  <div class="flex flex-row flex-wrap -mr-5 -mb-5">
     <mat-card
       class="flex flex-col square-button mr-5, mb-5"
       matRipple
@@ -15,6 +16,7 @@
       <span class="center" *ngIf="table.date">{{ table.date }}</span>
       <span class="center" *ngIf="table.amount">{{ table.amount | currency : 'INR' }}</span>
     </mat-card>
+  </div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
   <button mat-button [mat-dialog-close]="false">Cancel</button>