Adjusted category UI styling to Angular 15 updates

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>
 

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;
 }