From 49ae98cbc69de3d0a2f93d4fb3da204e2b66dd60 Mon Sep 17 00:00:00 2001
From: chrisaige <christoph.aigensberger@gmail.com>
Date: Mon, 12 Sep 2022 08:31:21 +0200
Subject: [PATCH 1/3] Update quick-list.component.html

---
 .../src/lib/quick-list/quick-list.component.html   | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/projects/material-addons/src/lib/quick-list/quick-list.component.html b/projects/material-addons/src/lib/quick-list/quick-list.component.html
index c3547a68..8606b2dc 100644
--- a/projects/material-addons/src/lib/quick-list/quick-list.component.html
+++ b/projects/material-addons/src/lib/quick-list/quick-list.component.html
@@ -3,10 +3,16 @@ <h3>
 </h3>
 <ng-container *ngFor="let item of allItems">
   <div *ngIf="itemTemplate" #row>
-    <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
-    <mad-icon-button *ngIf="!readonly && isDeleteAllowed()" (click)="removeItem(item)">
-      <mat-icon>delete</mat-icon>
-    </mad-icon-button>
+    <mat-grid-list cols="10" fxFill>
+      <mat-grid-tile colspan="9">
+        <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
+      </mat-grid-tile>
+      <mat-grid-tile *ngIf="!readonly && isDeleteAllowed()" colspan="1">
+        <mad-icon-button (click)="removeItem(item)">
+          <mat-icon>delete</mat-icon>
+        </mad-icon-button>
+      </mat-grid-tile>
+    </mat-grid-list>
   </div>
 </ng-container>
 <mad-link-button *ngIf="!readonly" (click)="addItem()"

From 72f49e72d861d17911503a522bf68ce07653ad15 Mon Sep 17 00:00:00 2001
From: chrisaige <christoph.aigensberger@gmail.com>
Date: Mon, 12 Sep 2022 08:32:38 +0200
Subject: [PATCH 2/3] Update quick-list.module.ts

---
 .../material-addons/src/lib/quick-list/quick-list.module.ts    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/projects/material-addons/src/lib/quick-list/quick-list.module.ts b/projects/material-addons/src/lib/quick-list/quick-list.module.ts
index f71c8e53..e6122efb 100644
--- a/projects/material-addons/src/lib/quick-list/quick-list.module.ts
+++ b/projects/material-addons/src/lib/quick-list/quick-list.module.ts
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatGridListModule } from '@angular/material/grid-list'; 
 import { QuickListComponent } from './quick-list.component';
 import { ButtonModule } from '../button/button.module';
 import { BaseQuickListComponent } from './base-quick-list.component';
@@ -9,7 +10,7 @@ import { QuickListCompactComponent } from './quick-list-compact/quick-list-compa
 
 @NgModule({
   declarations: [QuickListComponent, BaseQuickListComponent, QuickListCompactComponent],
-  imports: [CommonModule, MatButtonModule, MatIconModule, ButtonModule],
+  imports: [CommonModule, MatButtonModule, MatIconModule, ButtonModule, MatGridListModule],
   exports: [QuickListComponent, QuickListCompactComponent, BaseQuickListComponent],
 })
 export class QuickListModule {}

From 255a23a90295eaa62bd8ec73a95dd6c20eca98e2 Mon Sep 17 00:00:00 2001
From: chrisaige <christoph.aigensberger@gmail.com>
Date: Mon, 12 Sep 2022 08:37:21 +0200
Subject: [PATCH 3/3] Update quick-list-compact.component.html

---
 .../quick-list-compact.component.html          | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/projects/material-addons/src/lib/quick-list/quick-list-compact/quick-list-compact.component.html b/projects/material-addons/src/lib/quick-list/quick-list-compact/quick-list-compact.component.html
index 6b5d04c2..f4639386 100644
--- a/projects/material-addons/src/lib/quick-list/quick-list-compact/quick-list-compact.component.html
+++ b/projects/material-addons/src/lib/quick-list/quick-list-compact/quick-list-compact.component.html
@@ -3,13 +3,21 @@ <h3>
 </h3>
 <ng-container *ngFor="let item of allItems; let isLast = last;">
     <div class="flex-container" *ngIf="itemTemplate" #row>
-        <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
-        <mad-icon-button *ngIf="!readonly && isDeleteAllowed()" (click)="removeItem(item)">
+      <mat-grid-list cols="10" fxFill>
+        <mat-grid-tile colspan="8">
+          <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
+        </mat-grid-tile>
+        <mat-grid-tile *ngIf="!readonly && isDeleteAllowed()" [colspan]="isLast ? 1 : 2">
+          <mad-icon-button (click)="removeItem(item)">
             <mat-icon>delete</mat-icon>
-        </mad-icon-button>
-        <mad-icon-button *ngIf="!readonly && isLast" [disabled]="!isAddAllowed()" (click)="addItem()">
+          </mad-icon-button>
+        </mat-grid-tile>
+        <mat-grid-tile *ngIf="!readonly && isLast" [colspan]="isDeleteAllowed() ? 1 : 2">
+          <mad-icon-button [disabled]="!isAddAllowed()" (click)="addItem()">
             <mat-icon>add_circle_outline</mat-icon>
-        </mad-icon-button>
+          </mad-icon-button>
+        </mat-grid-tile>
+      </mat-grid-list>
     </div>
 </ng-container>
 <mad-link-button *ngIf="!readonly && !this.allItems.length"