From e2438a236bc4a2439f7b4ef4ca2472d49f599324 Mon Sep 17 00:00:00 2001
From: Tzahi12345 <tzahi2@hotmail.com>
Date: Sun, 23 Apr 2023 22:14:20 -0400
Subject: [PATCH] Adjusted category UI styling to Angular 15 updates

---
 .../edit-category-dialog.component.html           |  8 +++++---
 .../edit-category-dialog.component.scss           | 15 ++++++++++++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/app/dialogs/edit-category-dialog/edit-category-dialog.component.html b/src/app/dialogs/edit-category-dialog/edit-category-dialog.component.html
index 4552b73..f2e7d67 100644
--- a/src/app/dialogs/edit-category-dialog/edit-category-dialog.component.html
+++ b/src/app/dialogs/edit-category-dialog/edit-category-dialog.component.html
@@ -31,9 +31,11 @@
             <mat-form-field class="value-input">
                 <input matInput [(ngModel)]="rule['value']">
             </mat-form-field>
-            <button [disabled]="i === category['rules'].length-1" (click)="swapRules(i, i+1)" mat-icon-button><mat-icon>arrow_downward</mat-icon></button>
-            <button [disabled]="i === 0" (click)="swapRules(i, i-1)" mat-icon-button><mat-icon>arrow_upward</mat-icon></button>
-            <button (click)="removeRule(i)" mat-icon-button><mat-icon>cancel</mat-icon></button>
+            <span class="rule-buttons">
+                <button [disabled]="i === category['rules'].length-1" (click)="swapRules(i, i+1)" mat-icon-button><mat-icon>arrow_downward</mat-icon></button>
+                <button [disabled]="i === 0" (click)="swapRules(i, i-1)" mat-icon-button><mat-icon>arrow_upward</mat-icon></button>
+                <button (click)="removeRule(i)" mat-icon-button><mat-icon>cancel</mat-icon></button>
+            </span>
         </mat-list-item>
     </mat-list>
 
diff --git a/src/app/dialogs/edit-category-dialog/edit-category-dialog.component.scss b/src/app/dialogs/edit-category-dialog/edit-category-dialog.component.scss
index 53fcc70..1ee4ff2 100644
--- a/src/app/dialogs/edit-category-dialog/edit-category-dialog.component.scss
+++ b/src/app/dialogs/edit-category-dialog/edit-category-dialog.component.scss
@@ -1,5 +1,5 @@
 .operator-select {
-    width: 55px;
+    width: 90px;
 }
 
 .property-select {
@@ -13,4 +13,17 @@
 
 .value-input {
     margin-left: 10px;
+}
+
+:host ::ng-deep.mdc-list-item {
+    height: 75px !important;
+}
+
+:host ::ng-deep.mdc-list-item__content {
+    pointer-events: unset;
+}
+
+.rule-buttons {
+    position: relative;
+    top: 8px;
 }
\ No newline at end of file