fix(editor-container): minor UI issues (#371)

* fix(editor-container): missing tabindex on root editor-container

* test: adapt snapshots

* refactor(substation-editor): remove unused section close tag

* fix(editor-container): remove overflow set padding to prevent margin collapse

Author: JakobVogelsang

__snapshots__/bay-editor.md

@@ -3,7 +3,10 @@
 #### `looks like the latest snapshot`
 
 ```html
-<editor-container nomargin="">
+<editor-container
+  nomargin=""
+  tabindex="0"
+>
   <abbr
     slot="header"
     title="[lnode.tooltip]"
@@ -60,7 +63,10 @@
 ####   `looks like the latest snapshot`
 
 ```html
-<editor-container nomargin="">
+<editor-container
+  nomargin=""
+  tabindex="0"
+>
   <abbr
     slot="header"
     title="[lnode.tooltip]"

__snapshots__/substation-editor.md

@@ -3,7 +3,7 @@
 #### `looks like the latest snapshot`
 
 ```html
-<editor-container>
+<editor-container tabindex="0">
   <abbr
     slot="header"
     title="[lnode.tooltip]"
@@ -52,7 +52,7 @@
 ####   `looks like the latest snapshot`
 
 ```html
-<editor-container>
+<editor-container tabindex="0">
   <abbr
     slot="header"
     title="[lnode.tooltip]"

__snapshots__/voltage-level-editor.md

@@ -3,8 +3,11 @@
 #### `looks like the latest snapshot`
 
 ```html
-<editor-container header="E1 - Voltage Level
-    (110.0 kV)">
+<editor-container
+  header="E1 - Voltage Level
+    (110.0 kV)"
+  tabindex="0"
+>
   <abbr
     slot="header"
     title="[lnode.tooltip]"
@@ -55,8 +58,11 @@
 ####   `looks like the latest snapshot`
 
 ```html
-<editor-container header="E1 - Voltage Level
-    (110.0 kV)">
+<editor-container
+  header="E1 - Voltage Level
+    (110.0 kV)"
+  tabindex="0"
+>
   <abbr
     slot="header"
     title="[lnode.tooltip]"

src/editor-container.ts

@@ -77,6 +77,8 @@ export class EditorContainer extends LitElement {
   async firstUpdated(): Promise<void> {
     await super.updateComplete;
 
+    this.tabIndex = 0;
+
     if (this.addMenu) this.addMenu.anchor = this.headerContainer;
 
     const parentEditorContainer =
@@ -91,8 +93,6 @@ export class EditorContainer extends LitElement {
     );
 
     this.contrasted = !parentEditorContainer.contrasted;
-
-    this.tabIndex = 0;
   }
 
   private renderAddButtons(): TemplateResult[] {
@@ -199,7 +199,7 @@ export class EditorContainer extends LitElement {
       transition: all 200ms linear;
       outline-style: solid;
       margin: 8px 12px 16px;
-      overflow: hidden;
+      padding: 0.05px;
       outline-width: 0px;
       outline-color: var(--mdc-theme-primary);
       opacity: 1;
@@ -219,7 +219,6 @@ export class EditorContainer extends LitElement {
 
     .nomargin {
       margin: 0px;
-      overflow: visible;
     }
 
     :host {

src/zeroline/substation-editor.ts

@@ -70,53 +70,47 @@ export class SubstationEditor extends LitElement {
   }
 
   render(): TemplateResult {
-    return html`
-        <editor-container
-          .element=${this.element}
-          >
-          ${this.renderIedContainer()}
-          <abbr slot="header" title="${translate('lnode.tooltip')}">
-            <mwc-icon-button
-              icon="account_tree"
-              @click=${() => this.openLNodeWizard()}
-            ></mwc-icon-button>
-          </abbr>
-          <abbr slot="header" title="${translate('duplicate')}">
-            <mwc-icon-button
-              icon="content_copy"
-              @click=${() => cloneSubstationElement(this)}
-            ></mwc-icon-button>
-          </abbr>
-          <abbr slot="header" title="${translate('edit')}">
-            <mwc-icon-button
-              icon="edit"
-              @click=${() => this.openEditWizard()}
-            ></mwc-icon-button>
-          </abbr>
-          <abbr slot="header" title="${translate('move')}">
-            <mwc-icon-button
-              icon="forward"
-              @click=${() =>
-                startMove(this, SubstationEditor, SubstationEditor)}
-            ></mwc-icon-button>
-          </abbr>
-          <abbr slot="header" title="${translate('remove')}">
-            <mwc-icon-button
-              icon="delete"
-              @click=${() => this.remove()}
-            ></mwc-icon-button> </abbr
-        >${Array.from(
-          this.element.querySelectorAll(selectors.VoltageLevel)
-        ).map(
-          voltageLevel =>
-            html`<voltage-level-editor
-              .element=${voltageLevel}
-              .getAttachedIeds=${this.getAttachedIeds}
-              ?readonly=${this.readonly}
-            ></voltage-level-editor>`
-        )}</editor-container>
-      </section>
-    `;
+    return html`<editor-container .element=${this.element}>
+      <abbr slot="header" title="${translate('lnode.tooltip')}">
+        <mwc-icon-button
+          icon="account_tree"
+          @click=${() => this.openLNodeWizard()}
+        ></mwc-icon-button>
+      </abbr>
+      <abbr slot="header" title="${translate('duplicate')}">
+        <mwc-icon-button
+          icon="content_copy"
+          @click=${() => cloneSubstationElement(this)}
+        ></mwc-icon-button>
+      </abbr>
+      <abbr slot="header" title="${translate('edit')}">
+        <mwc-icon-button
+          icon="edit"
+          @click=${() => this.openEditWizard()}
+        ></mwc-icon-button>
+      </abbr>
+      <abbr slot="header" title="${translate('move')}">
+        <mwc-icon-button
+          icon="forward"
+          @click=${() => startMove(this, SubstationEditor, SubstationEditor)}
+        ></mwc-icon-button>
+      </abbr>
+      <abbr slot="header" title="${translate('remove')}">
+        <mwc-icon-button
+          icon="delete"
+          @click=${() => this.remove()}
+        ></mwc-icon-button
+      ></abbr>
+      ${this.renderIedContainer()}
+      ${Array.from(this.element.querySelectorAll(selectors.VoltageLevel)).map(
+        voltageLevel =>
+          html`<voltage-level-editor
+            .element=${voltageLevel}
+            .getAttachedIeds=${this.getAttachedIeds}
+            ?readonly=${this.readonly}
+          ></voltage-level-editor>`
+      )}</editor-container
+    >`;
   }
 
   static styles = css`