Removed all mr-5, mb-5 and basis tailwind classes.

Will soon remove tailwind totally.

bookie/src/app/sales/products/products.component.html

@@ -1,8 +1,8 @@
 <mat-card>
   <mat-card-content>
-    <div class="flex flex-row flex-wrap -mr-5 -mb-5">
+    <div class="tables-grid">
       <mat-card
-        class="flex flex-col square-button mr-5, mb-5 warn"
+        class="flex flex-col square-button warn"
         matRipple
         [routerLink]="['../../menu-categories']"
         queryParamsHandling="preserve"
@@ -11,7 +11,7 @@
       </mat-card>
       @for (item of list; track item) {
         <mat-card
-          class="flex flex-col square-button mr-5, mb-5"
+          class="flex flex-col square-button"
           matRipple
           (click)="addProduct(item)"
           [class.accent]="item.hasHappyHour"

bookie/src/app/sales/products/products.component.sass

@@ -0,0 +1,8 @@
+.tables-grid
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+  gap: 20px
+
+
+.tables-grid > h2
+  grid-column: 1 / -1

bookie/src/app/sales/products/products.component.ts

@@ -10,7 +10,7 @@ import { BillService } from '../bill.service';
 @Component({
   selector: 'app-products',
   templateUrl: './products.component.html',
-  styleUrls: ['./products.component.css'],
+  styleUrls: ['./products.component.sass'],
   imports: [CurrencyPipe, MatCardModule, MatRippleModule, RouterLink],
 })
 export class ProductsComponent implements OnInit {