WEB-356:fix(clients): improve upload signature dialog sizing and layout (#2961)

src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.html

@@ -1,9 +1,9 @@
 <h1 mat-dialog-title>{{ 'labels.heading.Upload Client Signature' | translate }}</h1>
 
 <div>
-  <mifosx-file-upload flex="60%" (change)="onFileSelect($event)" acceptFilter=".png,.jpeg,.jpg"></mifosx-file-upload>
+  <mifosx-file-upload (change)="onFileSelect($event)" acceptFilter=".png,.jpeg,.jpg"></mifosx-file-upload>
 
-  <mat-dialog-actions align="end">
+  <mat-dialog-actions align="center">
     <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
     <button mat-raised-button color="primary" [disabled]="!signature" [mat-dialog-close]="signature">
       {{ 'labels.buttons.Confirm' | translate }}

src/app/clients/clients-view/custom-dialogs/upload-signature-dialog/upload-signature-dialog.component.scss

@@ -0,0 +1,67 @@
+:host {
+  display: block;
+}
+
+[mat-dialog-title] {
+  margin: 0 0 0.75rem;
+  padding: 0;
+  text-align: center;
+}
+
+div {
+  padding: 0 1.25rem 1rem;
+  min-width: 25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+mifosx-file-upload {
+  width: 100%;
+  display: block;
+
+  ::ng-deep {
+    .mat-mdc-form-field {
+      margin-bottom: 0;
+
+      .mat-mdc-text-field-wrapper {
+        padding-bottom: 0;
+      }
+
+      .mat-mdc-form-field-subscript-wrapper {
+        margin-top: 0;
+      }
+    }
+
+    mat-form-field {
+      width: 100%;
+
+      .mat-mdc-form-field-infix {
+        padding: 0.5rem 0;
+        min-height: 2.5rem;
+      }
+    }
+  }
+}
+
+mat-dialog-actions {
+  margin: 0;
+  padding: 0.5rem 0 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.75rem;
+
+  button {
+    min-width: 5.625rem;
+    padding: 0 1rem;
+  }
+}
+
+@media (width <= 48rem) {
+  div {
+    min-width: 18.75rem;
+    padding: 0 1rem 0.75rem;
+    gap: 0.75rem;
+  }
+}