Fix unsafe use of ::ng-deep (#3011)

sillsdev · Feb 14, 2025 · 56609f8 · 56609f8
1 parent 105a4f9
commit 56609f8
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 13 deletions.
diff --git a/...ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.scss b/...ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.scss
@@ -107,10 +107,11 @@
 
 // Section: Question list screen
 
-::ng-deep .filter-text {
+.filter-text {
   padding: 0;
 
-  div {
+  // below is to make denser
+  ::ng-deep div {
     display: flex;
     align-items: center;
     mat-form-field:not(.mdc-text-field--textarea) {

diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/navigation/navigation.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/navigation/navigation.component.scss
@@ -67,7 +67,7 @@ mat-nav-list .mdc-list-item {
   }
 }
 
-::ng-deep #sync-icon .mat-badge-content {
+#sync-icon ::ng-deep .mat-badge-content {
   font-family: 'Material Icons';
   background: transparent;
   color: variables.$errorColor;

diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.scss
@@ -117,7 +117,7 @@ mat-icon {
   padding: 3px 0px;
 }
 
-::ng-deep .mat-mdc-checkbox .mdc-label {
+:host ::ng-deep .mat-mdc-checkbox .mdc-label {
   line-height: normal !important;
 }
 

diff --git a/...pp/src/app/translate/editor/editor-history/history-chooser/history-chooser.component.html b/...pp/src/app/translate/editor/editor-history/history-chooser/history-chooser.component.html
@@ -6,6 +6,7 @@
           [value]="selectedRevision"
           (selectionChange)="onSelectionChanged($event)"
           panelWidth="''"
+          panelClass="history-select-panel"
           [disabled]="isSelectDisabled$ | async"
           hideSingleSelectionIndicator
         >

diff --git a/...pp/src/app/translate/editor/editor-history/history-chooser/history-chooser.component.scss b/...pp/src/app/translate/editor/editor-history/history-chooser/history-chooser.component.scss
@@ -1,6 +1,6 @@
 @use 'src/material-styles';
 
-::ng-deep .mdc-list-item__primary-text {
+::ng-deep .history-select-panel .mdc-list-item__primary-text {
   width: 100%;
 }
 

diff --git a/...rge.Scripture/ClientApp/src/app/translate/editor/multi-viewer/multi-viewer.component.scss b/...rge.Scripture/ClientApp/src/app/translate/editor/multi-viewer/multi-viewer.component.scss
@@ -10,8 +10,7 @@
   width: 36px;
 }
 
-.app-avatar-container > button,
-::ng-deep div.avatar-content {
+.app-avatar-container > button {
   height: 32px;
   width: 32px;
 }
@@ -24,10 +23,8 @@ app-avatar {
   cursor: pointer;
 }
 
-.other-viewer ::ng-deep {
-  > span {
-    display: flex;
-    align-items: center;
-    column-gap: 4px;
-  }
+.other-viewer ::ng-deep span {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
 }