[US TRTL-611] Metadata update redesign & improve modal display

ui/ui-frontend-common/src/app/modules/components/footer/footer.component.scss

+$footer-height: 100px !default;
+
 :host {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
-  height: 100px;
+  height: $footer-height;
   background-color: var(--vitamui-background);
   align-items: center;
   justify-content: center;

ui/ui-frontend-common/src/app/modules/components/header/header.component.scss

 @import '../../../../sass/mixins/elevation';
 
-$header-height: 72px;
+$header-height: 72px !default;
 
 mat-toolbar {
   @include elevation-4;

ui/ui-frontend-common/src/sass/_layout.scss

+$header-height: 72px !default;
+$footer-height: 100px !default;
+
 .vitamui-header {
     background-image: url('/assets/background.jpg');
     background-size: cover;
@@ -38,7 +41,7 @@
 
 .vitamui-body {
     padding: 40px 100px;
-    min-height: calc(100vh - 172px); // header + footer
+    min-height: calc(100vh - #{$header-height + $footer-height});
 }
 
 .bg-fingerprint {

ui/ui-frontend-common/src/sass/_variables.scss

 @import "variables/colors";
+
+$header-height: 72px;
+$footer-height: 100px;
\ No newline at end of file

ui/ui-frontend-common/src/sass/material/_modal.scss

 $arrow-size: 70px;
-$max-height: 95vh;
-$radius: 20px;
+$header-height: 72px !default;
+$footer-height: 100px !default;
 
-.vitamui-modal .mat-dialog-container {
-    border-radius: $radius;
+%mat-dialog-container {
+    border-radius: 20px;
     padding: 0;
-    min-width: 800px;
-    max-width: fit-content;
-    max-height: $max-height;
+    max-height: calc(100vh - #{$header-height + $footer-height});
+    top: 72px;
+}
+
+.vitamui-modal .mat-dialog-container {
 
+    @extend %mat-dialog-container;
+    
     .header {
             padding: 20px 60px 0 60px;
         }
@@ -42,7 +46,7 @@ $radius: 20px;
             max-height: 43vh;
 
             &::-webkit-scrollbar {
-              display: none;
+                display: none;
             }
         }
 
@@ -50,12 +54,11 @@ $radius: 20px;
         .form-group {
             margin-bottom: 20px;
         }
-}
+} 
 
 .vitamui-form-dual-panel .mat-dialog-container {
-    border-radius: $radius;
-    padding: 0;
-    max-height: $max-height;
+
+    @extend %mat-dialog-container;
 
     .vitamui-form-dual-panel-content {
         display: flex;
@@ -172,4 +175,4 @@ $radius: 20px;
             }
         }
     }
-}
\ No newline at end of file
+} 
\ No newline at end of file