fix: initial tab values, menu alignment, grid header padding

Author: ihar-tsykala

frontend/src/app/modules/policy-engine/dialogs/math-editor-dialog/math-editor-dialog.component.html

@@ -231,7 +231,7 @@
             <ng-container *ngIf="step === 'step_2'" >
                 <div class="step-container {{codeTab === 'general' ? 'pages' : ''}}">
                     <div class="tabs-nav">
-                        <p-tabs (valueChange)="onCodeChangeTab($event)" class="guardian-header-tabs">
+                        <p-tabs [value]="0" (valueChange)="onCodeChangeTab($event)" class="guardian-header-tabs">
                             <p-tablist>
                                 <p-tab [value]="0"><div class="tabview-label">General</div></p-tab>
                                 <p-tab [value]="1"><div class="tabview-label">Advanced (Optional)</div></p-tab>

frontend/src/app/modules/policy-engine/policies/policies.component.scss

@@ -310,13 +310,15 @@
         font-size: 14px;
         font-style: normal;
         font-weight: 500;
-        min-height: 40px;
+        height: 48px;
         border: none !important;
         border-radius: 8px;
         width: 100%;
-        display: grid;
-        grid-template-columns: 40px auto;
-        text-align: left;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 8px;
+        padding: 0 12px;
     }
 
     ::ng-deep .accent-color-red {

frontend/src/app/modules/schema-engine/schema-dialog/schema-dialog.component.html

@@ -14,7 +14,7 @@
         <div class="guardian-loading-image"></div>
     </div>
     <div class="g-dialog-header">
-        <p-tabs class="guardian-tabs action-tabs" [(value)]="tab">
+        <p-tabs class="guardian-tabs action-tabs" [value]="tab" (valueChange)="onTabChange($event)">
             <p-tablist>
                 <p-tab *ngFor="let tab of items; let i = index" [value]="i"><div class="tabview-label">{{ tab.label }}</div></p-tab>
             </p-tablist>

frontend/src/app/modules/schema-engine/schema-dialog/schema-dialog.component.ts

@@ -203,8 +203,8 @@ export class SchemaDialog {
     }
 
 
-    public onChangeTab($event: any, order: number): void {
-        $event.stopPropagation();
+    public onTabChange(order: string | number | undefined): void {
+        if (typeof order !== 'number') { return; }
         this.error = null;
         if (this.tab === order) {
             return;

frontend/src/app/views/schemas/schemas.component.html

@@ -3,7 +3,7 @@
 
     <div class="actions">
         <div class="tabs-nav">
-            <p-tabs >
+            <p-tabs [value]="0">
                 <p-tablist>
                     <p-tab *ngFor="let tab of schemasTypes; let i = index" [value]="i" (click)="onChangeType(tab.value)"><div class="tabview-label">{{ tab.label }}</div></p-tab>
                 </p-tablist>

frontend/src/app/views/schemas/schemas.component.scss

@@ -582,13 +582,15 @@ a {
         font-style: normal;
         font-weight: 500;
         background-color: #ffffff;
-        min-height: 40px;
+        height: 48px;
         border: none !important;
         border-radius: 8px;
         width: 100%;
-        display: grid;
-        grid-template-columns: 40px auto;
-        text-align: left;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 8px;
+        padding: 0 12px;
     }
 
     ::ng-deep .accent-color-red {
@@ -626,31 +628,32 @@ a {
     .menu-options {
         .schema-menu-btn {
             display: block;
-            line-height: 48px;
-            width: 100%
+            width: 100%;
         }
 
         .schema-menu-btn button {
             border: none;
-            overflow: hidden;
             height: 48px;
             font-size: 14px;
             color: var(--color-grey-black-1);
             width: 100%;
-            display: grid;
-            grid-template-columns: 40px 1fr;
-            padding: 12px;
-            column-gap: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            gap: 8px;
+            padding: 0 12px;
         }
 
         .p-button-icon {
             font-size: 20px;
+            width: 24px;
+            text-align: center;
+            flex-shrink: 0;
             color: var(--primary-color);
         }
 
         .p-button-label {
-            display: grid;
-            justify-self: start;
+            text-align: left;
         }
     }
 }
@@ -837,6 +840,10 @@ a {
 
     .guardian-grid-header th {
         padding: 0.5rem 1rem;
+
+        &:first-child {
+            padding-left: 24px;
+        }
     }
 
     ::ng-deep .guardian-grid-table {