alerts fix:

- fix alerts wrapper component position;
- define alerts position in mat-sidenav-content component;
- fix alert position in Permissions dialog.

Author: lyubov-voloshko

frontend/src/app/app.component.css

@@ -23,8 +23,11 @@
 }
 
 .nav-bar {
+    position: sticky;
+    top: 0;
     flex-shrink: 0;
     background-color: #212121;
+    z-index: 3;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -33,18 +36,6 @@
     }
 }
 
-.nav-bar_interior {
-    --mat-toolbar-standard-height: 44px !important;
-
-    position: sticky;
-    top: 0;
-    z-index: 3;
-}
-
-.nav-bar_exterior {
-    --mat-toolbar-standard-height: 56px !important;
-}
-
 .nav-bar_home {
     display: flex;
     align-items: center;
@@ -246,6 +237,14 @@
     flex-direction: column;
 }
 
+.main-menu-content_interior {
+    --mat-toolbar-standard-height: 44px !important;
+}
+
+.main-menu-content_exterior {
+    --mat-toolbar-standard-height: 56px !important;
+}
+
 .tab-content-wrapper {
     flex: 1 0 auto;
 }

frontend/src/app/app.component.html

@@ -51,7 +51,8 @@
         </a>
     </mat-sidenav>
 
-    <mat-sidenav-content class="main-menu-content">
+    <mat-sidenav-content class="main-menu-content"
+        [ngClass]="{'main-menu-content_exterior': userLoggedIn === false, 'main-menu-content_interior': userLoggedIn === true}">
         <mat-toolbar color="primary" class="nav-bar"
             [ngClass]="{'nav-bar_home': !connectionID, 'nav-bar_connection': connectionID,
                 'nav-bar_exterior': userLoggedIn === false, 'nav-bar_interior': userLoggedIn === true}">

frontend/src/app/components/ui-components/alert/alert.component.css

@@ -1,13 +1,16 @@
-.alert {
+:host {
     position: sticky;
-    top: 44px;
+    top: var(--mat-toolbar-standard-height);
+    z-index: 2;
+}
+
+.alert {
     display: flex;
     gap: 12px;
     background-color: var(--bg-color);
     border-left: 12px solid var(--alert-theme-color);
     margin-bottom: 8px;
     padding: 12px 16px;
-    z-index: 2;
 }
 
 @media (prefers-color-scheme: dark) {

frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css

@@ -2,6 +2,11 @@
     margin-bottom: 12px;
 }
 
+.permissions-alert {
+    position: relative;
+    top: -8px;
+}
+
 .permissions-form ::ng-deep .mat-mdc-dialog-content {
     color: var(--mat-sidenav-content-text-color);
 }

frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.html

@@ -1,8 +1,8 @@
 <h1 mat-dialog-title>Permissions for <strong>{{ group.title }}</strong> group</h1>
 <form #addPermissionsForm="ngForm" class="permissions-form" (ngSubmit)="addPermissions()">
     <mat-dialog-content>
-        <app-alert *ngIf="connectionAccess === 'edit' && group.title === 'Admin'" [alert]="adminGroupAlert"></app-alert>
-        <app-alert *ngIf="connectionAccess === 'edit' && group.title !== 'Admin'" [alert]="connectionFullAccessAlert"></app-alert>
+        <app-alert *ngIf="connectionAccess === 'edit' && group.title === 'Admin'" [alert]="adminGroupAlert" class="permissions-alert"></app-alert>
+        <app-alert *ngIf="connectionAccess === 'edit' && group.title !== 'Admin'" [alert]="connectionFullAccessAlert" class="permissions-alert"></app-alert>
 
         <div class="permissions">
             <h2 class="mat-subtitle-1 permissions__title">Connection credentials</h2>