Header/sidebar sizing (#7470)

Co-authored-by: Zack Barett <zackbarett@hey.com>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/ha-sidebar.ts

@@ -320,13 +320,11 @@ class HaSidebar extends LitElement {
             </mwc-icon-button>
           `
         : ""}
-      <div class="title">
       ${this.editMode
         ? html`<mwc-button outlined @click=${this._closeEditMode}>
             ${this.hass.localize("ui.sidebar.done")}
           </mwc-button>`
-          : "Home Assistant"}
+        : html`<div class="title">Home Assistant</div>`}
-      </div>
     </div>`;
   }
 
@@ -756,7 +754,7 @@ class HaSidebar extends LitElement {
           -moz-user-select: none;
           border-right: 1px solid var(--divider-color);
           background-color: var(--sidebar-background-color);
-          width: 64px;
+          width: 56px;
         }
         :host([expanded]) {
           width: 256px;
@@ -768,8 +766,9 @@ class HaSidebar extends LitElement {
         }
         .menu {
           height: var(--header-height);
+          box-sizing: border-box;
           display: flex;
-          padding: 0 8.5px;
+          padding: 0 4px;
           border-bottom: 1px solid transparent;
           white-space: nowrap;
           font-weight: 400;
@@ -778,11 +777,11 @@ class HaSidebar extends LitElement {
           background-color: var(--primary-background-color);
           font-size: 20px;
           align-items: center;
-          padding-left: calc(8.5px + env(safe-area-inset-left));
+          padding-left: calc(4px + env(safe-area-inset-left));
         }
         :host([rtl]) .menu {
-          padding-left: 8.5px;
+          padding-left: 4px;
-          padding-right: calc(8.5px + env(safe-area-inset-right));
+          padding-right: calc(4px + env(safe-area-inset-right));
         }
         :host([expanded]) .menu {
           width: calc(256px + env(safe-area-inset-left));
@@ -793,26 +792,27 @@ class HaSidebar extends LitElement {
         .menu mwc-icon-button {
           color: var(--sidebar-icon-color);
         }
-        :host([expanded]) .menu mwc-icon-button {
-          margin-right: 23px;
-        }
-        :host([expanded][rtl]) .menu mwc-icon-button {
-          margin-right: 0px;
-          margin-left: 23px;
-        }
-
         .title {
+          margin-left: 19px;
           width: 100%;
           display: none;
         }
+        :host([rtl]) .title {
+          margin-left: 0;
+          margin-right: 19px;
+        }
         :host([narrow]) .title {
+          margin: 0;
           padding: 0 16px;
         }
         :host([expanded]) .title {
           display: initial;
         }
-        .title mwc-button {
+        :host([expanded]) .menu mwc-button {
-          width: 90%;
+          margin: 0 8px;
+        }
+        .menu mwc-button {
+          width: 100%;
         }
         #sortable,
         .hidden-panel {
@@ -850,14 +850,14 @@ class HaSidebar extends LitElement {
 
         paper-icon-item {
           box-sizing: border-box;
-          margin: 4px 8px;
+          margin: 4px;
           padding-left: 12px;
           border-radius: 4px;
           --paper-item-min-height: 40px;
           width: 48px;
         }
         :host([expanded]) paper-icon-item {
-          width: 240px;
+          width: 248px;
         }
         :host([rtl]) paper-icon-item {
           padding-left: auto;
@@ -874,9 +874,9 @@ class HaSidebar extends LitElement {
           border-radius: 4px;
           position: absolute;
           top: 0;
-          right: 0;
+          right: 2px;
           bottom: 0;
-          left: 0;
+          left: 2px;
           pointer-events: none;
           content: "";
           transition: opacity 15ms linear;

src/components/ha-tab.ts

@@ -101,11 +101,10 @@ export class HaTab extends LitElement {
         text-align: center;
         align-items: center;
         justify-content: center;
-        height: 64px;
+        height: var(--header-height);
         cursor: pointer;
         position: relative;
         outline: none;
-        box-sizing: border-box;
       }
 
       .name {

src/components/ha-tabs.ts

@@ -34,8 +34,8 @@ export class HaTabs extends PaperTabs {
 
       superStyle!.appendChild(
         document.createTextNode(`
-          :host {
+          #selectionBar {
-            padding-top: .5px;
+            box-sizing: border-box;
           }
           .not-visible {
             display: none;

src/dialogs/notifications/notification-drawer.js

@@ -25,8 +25,8 @@ export class HuiNotificationDrawer extends EventsMixin(
         color: var(--primary-text-color);
         border-bottom: 1px solid var(--divider-color);
         background-color: var(--primary-background-color);
-        min-height: 64px;
+        height: var(--header-height);
-        width: calc(100% - 32px);
+        box-sizing: border-box;
       }
 
       div[main-title] {

src/layouts/hass-error-screen.ts

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

src/layouts/hass-loading-screen.ts

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

src/layouts/hass-subpage.ts

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

src/layouts/hass-tabs-subpage.ts

@@ -217,7 +217,7 @@ class HassTabsSubpage extends LitElement {
         display: flex;
         align-items: center;
         font-size: 20px;
-        height: 65px;
+        height: var(--header-height);
         background-color: var(--sidebar-background-color);
         font-weight: 400;
         color: var(--sidebar-text-color);

src/layouts/home-assistant-main.ts

@@ -192,7 +192,7 @@ class HomeAssistantMain extends LitElement {
         color: var(--primary-text-color);
         /* remove the grey tap highlights in iOS on the fullscreen touch targets */
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-        --app-drawer-width: 64px;
+        --app-drawer-width: 56px;
       }
       :host([expanded]) {
         --app-drawer-width: calc(256px + env(safe-area-inset-left));

src/resources/ha-sortable-style.ts

@@ -73,15 +73,25 @@ export const sortableStyles = css`
     display: none;
     position: absolute;
     top: 0;
-    right: 0;
+    right: 4px;
     --mdc-icon-button-size: 40px;
   }
 
+  :host([rtl]) .show-panel {
+    right: initial;
+    left: 4px;
+  }
+
   .hide-panel {
     top: 4px;
     right: 8px;
   }
 
+  :host([rtl]) .hide-panel {
+    right: initial;
+    left: 8px;
+  }
+
   :host([expanded]) .hide-panel {
     display: block;
   }

src/resources/ha-style.ts

@@ -49,7 +49,7 @@ documentContainer.innerHTML = `<custom-style>
       --secondary-background-color: #e5e5e5; /* behind the cards on state */
 
       /* for header */
-      --header-height: 64px;
+      --header-height: 56px;
 
       /* for label-badge */
       --label-badge-red: #DF4C1E;