Make advanced editing tabs header sticky and update styles

Author: breity

src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html

@@ -1,11 +1,13 @@
-<h2 mat-dialog-title i18n>Advanced Activity Settings</h2>
-<mat-divider />
-<div mat-dialog-content>
-  <div #component></div>
+<div class="edit-component-advanced">
+  <h2 mat-dialog-title i18n>Advanced Activity Settings</h2>
+  <mat-divider />
+  <div mat-dialog-content>
+    <div #component></div>
+  </div>
+  <mat-divider />
+  <mat-dialog-actions align="end">
+    <button class="enable-in-translation" mat-button mat-dialog-close cdkFocusRegionstart i18n>
+      Close
+    </button>
+  </mat-dialog-actions>
 </div>
-<mat-divider />
-<mat-dialog-actions align="end">
-  <button class="enable-in-translation" mat-button mat-dialog-close cdkFocusRegionstart i18n>
-    Close
-  </button>
-</mat-dialog-actions>

src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts

@@ -6,7 +6,8 @@ import {
   ElementRef,
   EnvironmentInjector,
   Inject,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -15,9 +16,28 @@ import { Component as WISEComponent } from '../../../assets/wise5/common/Compone
 import { components } from '../../../assets/wise5/components/Components';
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
   imports: [MatDivider, MatDialogModule, MatButtonModule],
   styles: [
-    '.mat-divider { margin: 0 -16px; } .mat-mdc-dialog-content { padding-top: 10px !important; padding-bottom: 10px !important; }'
+    `
+      .edit-component-advanced {
+        --mat-tab-divider-color: var(--mat-divider-color);
+        --mat-tab-divider-height: 1px;
+        .mat-divider {
+          margin: 0 -16px;
+        }
+        .mat-mdc-tab-body-content {
+          padding: 16px 0;
+        }
+        .mat-mdc-tab-header {
+          position: sticky;
+          top: 0;
+          z-index: 2;
+          background-color: white;
+          margin: 0 -16px;
+        }
+      }
+    `
   ],
   templateUrl: './edit-component-advanced.component.html'
 })