Change lu-backdrop parent node

#351

src/lineup/ARankingView.ts

@@ -293,6 +293,11 @@ export abstract class ARankingView extends AView {
       violationChanged: (_: IRule, violation: string) => this.panel.setViolation(violation)
     }));
 
+    // LineUp creates an element with class `lu-backdrop` that fades out all content when a dialog is opened.
+    // Append `lu-backdrop` one level higher so fading effect can be applied also to the sidePanel when a dialog is opened.
+    const luBackdrop = this.node.querySelector('.lu-backdrop');
+    this.node.appendChild(luBackdrop);
+
     this.panel = new LineUpPanelActions(this.provider, this.taggle.ctx, this.options, this.node.ownerDocument);
     this.panel.on(LineUpPanelActions.EVENT_SAVE_NAMED_SET, (_event, order: number[], name: string, description: string, sec: Partial<ISecureItem>) => {
       this.saveNamedSet(order, name, description, sec);

src/styles/_view_lineup.scss

@@ -11,13 +11,15 @@
     line-height: 1;
   }
 
-  > div {
+  // Select only first div containing the `lineup-engine`.
+  // Don't select the `div.lu-backdrop` element
+  > div:first-child() {
     flex: 1 1 auto;
     position: relative;
   }
 
   &.overview-detail {
-    > div {
+    > div:first-child() {
       display: flex;
       flex-direction: column;