Align header paddings (#15981)

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: 4px;
+          padding: 8px 12px;
           pointer-events: none;
           background-color: var(--app-header-background-color);
           font-weight: 400;
@@ -73,6 +73,11 @@ class HassErrorScreen extends LitElement {
           border-bottom: var(--app-header-border-bottom, none);
           box-sizing: border-box;
         }
+        @media (max-width: 599px) {
+          .toolbar {
+            padding: 4px;
+          }
+        }
         ha-icon-button-arrow-prev {
           pointer-events: auto;
         }

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: 4px;
+          padding: 8px 12px;
           pointer-events: none;
           background-color: var(--app-header-background-color);
           font-weight: 400;
@@ -68,6 +68,11 @@ class HassLoadingScreen extends LitElement {
           border-bottom: var(--app-header-border-bottom, none);
           box-sizing: border-box;
         }
+        @media (max-width: 599px) {
+          .toolbar {
+            padding: 4px;
+          }
+        }
         ha-menu-button,
         ha-icon-button-arrow-prev {
           pointer-events: auto;

src/layouts/hass-subpage.ts

@@ -111,7 +111,7 @@ class HassSubpage extends LitElement {
         align-items: center;
         font-size: 20px;
         height: var(--header-height);
-        padding: 4px;
+        padding: 8px 12px;
         pointer-events: none;
         background-color: var(--app-header-background-color);
         font-weight: 400;
@@ -119,6 +119,11 @@ class HassSubpage extends LitElement {
         border-bottom: var(--app-header-border-bottom, none);
         box-sizing: border-box;
       }
+      @media (max-width: 599px) {
+        .toolbar {
+          padding: 4px;
+        }
+      }
       .toolbar a {
         color: var(--sidebar-text-color);
         text-decoration: none;

src/layouts/hass-tabs-subpage-data-table.ts

@@ -323,7 +323,6 @@ export class HaTabsSubpageDataTable extends LitElement {
         --text-field-overflow: initial;
         display: flex;
         justify-content: flex-end;
-        margin-right: -8px;
         color: var(--primary-text-color);
       }
       .active-filters {

src/layouts/hass-tabs-subpage.ts

@@ -235,9 +235,14 @@ class HassTabsSubpage extends LitElement {
         background-color: var(--sidebar-background-color);
         font-weight: 400;
         border-bottom: 1px solid var(--divider-color);
-        padding: 4px;
+        padding: 8px 12px;
         box-sizing: border-box;
       }
+      @media (max-width: 599px) {
+        .toolbar {
+          padding: 4px;
+        }
+      }
       .toolbar a {
         color: var(--sidebar-text-color);
         text-decoration: none;

src/panels/config/integrations/ha-config-integrations.ts

@@ -891,7 +891,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           --text-field-overflow: initial;
           display: flex;
           justify-content: flex-end;
-          margin-right: -8px;
           color: var(--primary-text-color);
         }
         .active-filters {

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

@@ -108,10 +108,15 @@ class PanelDeveloperTools extends LitElement {
           display: flex;
           align-items: center;
           font-size: 20px;
-          padding: 4px;
+          padding: 8px 12px;
           font-weight: 400;
           box-sizing: border-box;
         }
+        @media (max-width: 599px) {
+          .toolbar {
+            padding: 4px;
+          }
+        }
         .main-title {
           margin: 0 0 0 24px;
           line-height: 20px;

src/panels/lovelace/hui-root.ts

@@ -976,10 +976,15 @@ class HUIRoot extends LitElement {
           display: flex;
           align-items: center;
           font-size: 20px;
-          padding: 0 4px;
+          padding: 0px 12px;
           font-weight: 400;
           box-sizing: border-box;
         }
+        @media (max-width: 599px) {
+          .toolbar {
+            padding: 0 4px;
+          }
+        }
         .main-title {
           margin: 0 0 0 24px;
           line-height: 20px;