Alignment issue in action button is fixed (#371)

Author: SambhuPega

packages/angular-sdk-components/src/lib/_components/infra/action-buttons/action-buttons.component.html

@@ -1,5 +1,5 @@
-<mat-grid-list *ngIf="arMainButtons$ && arSecondaryButtons$" cols="2" rowHeight="6.25rem">
-  <mat-grid-tile>
+<div class="button-bar" *ngIf="arMainButtons$ && arSecondaryButtons$">
+  <div class="left-group">
     <button
       *ngFor="let aButton of arSecondaryButtons$"
       mat-stroked-button
@@ -8,10 +8,10 @@
     >
       {{ localizedVal(aButton.name, localeCategory) }}
     </button>
-  </mat-grid-tile>
-  <mat-grid-tile>
+  </div>
+  <div class="right-group">
     <button *ngFor="let aButton of arMainButtons$" mat-flat-button (click)="buttonClick(aButton.jsAction, 'primary')">
       {{ localizedVal(aButton.name, localeCategory) }}
     </button>
-  </mat-grid-tile>
-</mat-grid-list>
+  </div>
+</div>

packages/angular-sdk-components/src/lib/_components/infra/action-buttons/action-buttons.component.scss

@@ -1,5 +1,23 @@
+.button-bar {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+}
+
+.left-group,
+.right-group {
+  display: flex;
+  gap: 1rem;
+}
+
+.right-group {
+  margin-left: auto;
+}
+
 .secondary-button {
   background-color: var(--app-sys-secondary-button-background);
   border-color: var(--app-sys-secondary-button-border);
-  margin: 0 5px;
 }

packages/angular-sdk-components/src/lib/_components/infra/action-buttons/action-buttons.component.ts

@@ -1,13 +1,12 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
-import { MatGridListModule } from '@angular/material/grid-list';
 
 @Component({
   selector: 'app-action-buttons',
   templateUrl: './action-buttons.component.html',
   styleUrls: ['./action-buttons.component.scss'],
-  imports: [CommonModule, MatGridListModule, MatButtonModule]
+  imports: [CommonModule, MatButtonModule]
 })
 export class ActionButtonsComponent {
   @Input() arMainButtons$: any[];