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,29 +1,32 @@
-<div class="flex flex-row flex-wrap -mr-5 -mb-5">
-  <mat-card
-    class="flex flex-col square-button mr-5, mb-5"
-    matRipple
-    (click)="select('REGULAR_BILL')"
-    [class.selected]="selected === 'REGULAR_BILL'"
-  >
-    <h3 class="item-name">Regular</h3>
-  </mat-card>
-  <mat-card
-    class="flex flex-col square-button mr-5, mb-5"
-    matRipple
-    (click)="select('STAFF')"
-    [class.selected]="selected === 'STAFF'"
-  >
-    <h3 class="item-name">Staff</h3>
-  </mat-card>
-  <mat-card
-    class="flex flex-col square-button mr-5, mb-5"
-    matRipple
-    (click)="select('NO_CHARGE')"
-    [class.selected]="selected === 'NO_CHARGE'"
-  >
-    <h3 class="item-name">No Charge</h3>
-  </mat-card>
-</div>
+<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"
+      matRipple
+      (click)="select('REGULAR_BILL')"
+      [class.selected]="selected === 'REGULAR_BILL'"
+    >
+      <h3 class="item-name">Regular</h3>
+    </mat-card>
+    <mat-card
+      class="flex flex-col square-button mr-5, mb-5"
+      matRipple
+      (click)="select('STAFF')"
+      [class.selected]="selected === 'STAFF'"
+    >
+      <h3 class="item-name">Staff</h3>
+    </mat-card>
+    <mat-card
+      class="flex flex-col square-button mr-5, mb-5"
+      matRipple
+      (click)="select('NO_CHARGE')"
+      [class.selected]="selected === 'NO_CHARGE'"
+    >
+      <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,20 +1,22 @@
 <h2 mat-dialog-title>Tables</h2>
-<mat-dialog-content class="flex flex-row flex-wrap -mr-5 -mb-5">
-  <mat-card
-    class="flex flex-col square-button mr-5, mb-5"
-    matRipple
-    *ngFor="let table of list"
-    (click)="select(table)"
-    [class.running]="table.status === 'running'"
-    [class.printed]="table.status === 'printed'"
-    [class.selected]="table === selected"
-  >
-    <h3 class="item-name">{{ table.name }}</h3>
-    <mat-card-subtitle class="center">{{ table.guest }}</mat-card-subtitle>
-    <span class="center">{{ table.pax ?? 0 }} / {{ table.seats }} Seats</span>
-    <span class="center" *ngIf="table.date">{{ table.date }}</span>
-    <span class="center" *ngIf="table.amount">{{ table.amount | currency : 'INR' }}</span>
-  </mat-card>
+<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
+      *ngFor="let table of list"
+      (click)="select(table)"
+      [class.running]="table.status === 'running'"
+      [class.printed]="table.status === 'printed'"
+      [class.selected]="table === selected"
+    >
+      <h3 class="item-name">{{ table.name }}</h3>
+      <mat-card-subtitle class="center">{{ table.guest }}</mat-card-subtitle>
+      <span class="center">{{ table.pax ?? 0 }} / {{ table.seats }} Seats</span>
+      <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>