Fix dialogs under sidebar, headers (#15973)

src/components/ha-top-app-bar-fixed.ts

@@ -10,6 +10,7 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
     css`
       .mdc-top-app-bar__row {
         height: var(--header-height);
+        border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
         padding-top: var(--header-height);
@@ -21,7 +22,6 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
-        border-bottom: var(--app-header-border-bottom);
       }
     `,
   ];

src/components/ha-top-app-bar.ts

@@ -10,6 +10,7 @@ export class HaTopAppBar extends TopAppBarBase {
     css`
       .mdc-top-app-bar__row {
         height: var(--header-height);
+        border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
         padding-top: var(--header-height);
@@ -21,7 +22,6 @@ export class HaTopAppBar extends TopAppBarBase {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
-        border-bottom: var(--app-header-border-bottom);
       }
     `,
   ];

src/layouts/hass-error-screen.ts

@@ -65,7 +65,7 @@ class HassErrorScreen extends LitElement {
           align-items: center;
           font-size: 20px;
           height: var(--header-height);
-          padding: 0 16px;
+          padding: 4px;
           pointer-events: none;
           background-color: var(--app-header-background-color);
           font-weight: 400;

src/layouts/hass-loading-screen.ts

@@ -60,7 +60,7 @@ class HassLoadingScreen extends LitElement {
           align-items: center;
           font-size: 20px;
           height: var(--header-height);
-          padding: 0 16px;
+          padding: 4px;
           pointer-events: none;
           background-color: var(--app-header-background-color);
           font-weight: 400;

src/layouts/hass-subpage.ts

@@ -111,7 +111,7 @@ class HassSubpage extends LitElement {
         align-items: center;
         font-size: 20px;
         height: var(--header-height);
-        padding: 0 16px;
+        padding: 4px;
         pointer-events: none;
         background-color: var(--app-header-background-color);
         font-weight: 400;

src/layouts/hass-tabs-subpage.ts

@@ -235,7 +235,7 @@ class HassTabsSubpage extends LitElement {
         background-color: var(--sidebar-background-color);
         font-weight: 400;
         border-bottom: 1px solid var(--divider-color);
-        padding: 0 16px;
+        padding: 4px;
         box-sizing: border-box;
       }
       .toolbar a {

src/panels/config/automation/ha-automation-trace.ts

@@ -511,7 +511,7 @@ export class HaAutomationTrace extends LitElement {
           justify-content: center;
           font-size: 20px;
           height: var(--header-height);
-          padding: 0 16px;
+          padding: 4px;
           background-color: var(--primary-background-color);
           font-weight: 400;
           color: var(--app-header-text-color, white);

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -108,7 +108,7 @@ class PanelDeveloperTools extends LitElement {
           display: flex;
           align-items: center;
           font-size: 20px;
-          padding: 0 16px;
+          padding: 4px;
           font-weight: 400;
           box-sizing: border-box;
         }

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -164,7 +164,7 @@ export class HuiCreateDialogCard
         ha-dialog {
           --mdc-dialog-max-width: 845px;
           --dialog-content-padding: 2px 24px 20px 24px;
-          --dialog-z-index: 5;
+          --dialog-z-index: 6;
         }
 
         ha-dialog.table {

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -394,7 +394,7 @@ export class HuiDialogEditCard
 
         ha-dialog {
           --mdc-dialog-max-width: 845px;
-          --dialog-z-index: 5;
+          --dialog-z-index: 6;
         }
 
         @media all and (min-width: 451px) and (min-height: 501px) {

src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts

@@ -143,7 +143,7 @@ export class HuiDialogSuggestCard extends LitElement {
         }
         ha-dialog {
           max-width: 845px;
-          --dialog-z-index: 5;
+          --dialog-z-index: 6;
         }
         .hidden {
           display: none;

src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts

@@ -145,7 +145,7 @@ export class HuiCreateDialogHeaderFooter
         ha-dialog {
           --mdc-dialog-max-width: 550px;
           --dialog-content-padding: 2px 24px 20px 24px;
-          --dialog-z-index: 5;
+          --dialog-z-index: 6;
         }
 
         .elements {

src/panels/lovelace/hui-root.ts

@@ -957,7 +957,7 @@ class HUIRoot extends LitElement {
           display: flex;
           align-items: center;
           font-size: 20px;
-          padding: 0 16px;
+          padding: 0 4px;
           font-weight: 400;
           box-sizing: border-box;
         }