Fix login page safe area insets (#54229)

Center the login page inside the safe area

The authorize page only applied the top safe-area inset, so on devices
with side insets the card, password field, forgot password link and
help link were centered on the full viewport and clipped by the right
inset. Add the left and right insets to the content wrapper padding so
the auto margins center the card inside the safe area, and pad the
bottom inset as well.

src/components/chart/statistics-chart.ts

@@ -125,23 +125,7 @@ export class StatisticsChart extends LitElement {
   private _yAxisFractionDigits = 1;
 
   protected shouldUpdate(changedProps: PropertyValues<this>): boolean {
-    return (
-      changedProps.size > 1 ||
-      !changedProps.has("hass") ||
-      this._entityNamesChanged(changedProps)
-    );
-  }
-
-  // Series names are resolved once and cached in _chartData, so a hass update
-  // that only replaces the formatters has to regenerate them. The formatters are
-  // swapped as a set whenever the registries change, which is what renames a
-  // series.
-  private _entityNamesChanged(changedProps: PropertyValues): boolean {
-    if (!changedProps.has("hass")) {
-      return false;
-    }
-    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    return !!oldHass && oldHass.formatEntityName !== this.hass.formatEntityName;
+    return changedProps.size > 1 || !changedProps.has("hass");
   }
 
   public willUpdate(changedProps: PropertyValues) {
@@ -151,8 +135,7 @@ export class StatisticsChart extends LitElement {
       changedProps.has("chartType") ||
       changedProps.has("hideLegend") ||
       changedProps.has("_hiddenStats") ||
-      changedProps.has("names") ||
-      this._entityNamesChanged(changedProps)
+      changedProps.has("names")
     ) {
       this._generateData();
     }

src/html/authorize.html.template

@@ -26,7 +26,10 @@
         width: 100%;
         max-width: 400px;
         margin: 0 auto;
-        padding: 0 16px;
+        padding: var(--safe-area-inset-top, 0px)
+          calc(16px + var(--safe-area-inset-right, 0px))
+          var(--safe-area-inset-bottom, 0px)
+          calc(16px + var(--safe-area-inset-left, 0px));
         box-sizing: content-box;
       }
 
@@ -35,7 +38,6 @@
         align-items: center;
         justify-content: center;
         margin-bottom: 32px;
-        padding-top: var(--safe-area-inset-top);
       }
 
       .header img {

src/panels/config/automation/styles.ts

@@ -109,11 +109,11 @@ export const rowStyles = css`
     text-box-edge: cap alphabetic;
     overflow: hidden;
     transition:
-      opacity 180ms ease-out,
-      transform 180ms ease-out,
-      width 180ms ease-out,
-      margin-inline-end 180ms ease-out,
-      border-width 180ms ease-out;
+      opacity var(--ha-animation-duration-fast) ease-out,
+      transform var(--ha-animation-duration-fast) ease-out,
+      width var(--ha-animation-duration-fast) ease-out,
+      margin-inline-end var(--ha-animation-duration-fast) ease-out,
+      border-width var(--ha-animation-duration-fast) ease-out;
   }
 
   .trigger-index-badge.hidden {

src/panels/config/automation/trigger/ha-automation-trigger-references.ts

@@ -1,10 +1,11 @@
 import { consume } from "@lit/context";
 import { mdiLinkVariantOff } from "@mdi/js";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ensureArray } from "../../../../common/array/ensure-array";
 import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-tooltip";
 import "../../../../components/ha-trigger-icon";
 import type { TriggerCondition } from "../../../../data/automation";
 import { describeTrigger } from "../../../../data/automation_i18n";
@@ -32,6 +33,7 @@ export class HaAutomationTriggerReferences extends LitElement {
 
   protected render() {
     const options = this._triggers?.options ?? [];
+    const showIndices = this._triggers?.showIndices ?? false;
     const selectedIds = ensureArray(this.condition.id).filter(Boolean);
     const selectedTriggers = options.filter((option) =>
       selectedIds.includes(option.id)
@@ -52,7 +54,28 @@ export class HaAutomationTriggerReferences extends LitElement {
       selectedTriggers.map(
         (option) => html`
           <span class="trigger-reference">
-            <span class="trigger-index-badge">${option.index + 1}</span>
+            <span
+              id="trigger-index-badge-${option.index}"
+              tabindex=${showIndices ? "0" : "-1"}
+              class="trigger-index-badge ${showIndices ? "" : "hidden"}"
+              aria-label=${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.trigger_index_aria_label",
+                { number: option.index + 1 }
+              )}
+              aria-hidden=${showIndices ? "false" : "true"}
+              >${option.index + 1}</span
+            >
+            ${
+              showIndices
+                ? html`<ha-tooltip for="trigger-index-badge-${option.index}"
+                    ><p>
+                      ${this.hass.localize(
+                        "ui.panel.config.automation.editor.triggers.trigger_index_tooltip"
+                      )}
+                    </p></ha-tooltip
+                  >`
+                : nothing
+            }
             <ha-trigger-icon
               .trigger=${"trigger" in option.trigger ? option.trigger.trigger : ""}
             ></ha-trigger-icon>
@@ -132,6 +155,22 @@ export class HaAutomationTriggerReferences extends LitElement {
       line-height: 1;
       text-box-trim: both;
       text-box-edge: cap alphabetic;
+      overflow: hidden;
+      transition:
+        opacity var(--ha-animation-duration-fast) ease-out,
+        transform var(--ha-animation-duration-fast) ease-out,
+        width var(--ha-animation-duration-fast) ease-out,
+        margin-inline-end var(--ha-animation-duration-fast) ease-out,
+        border-width var(--ha-animation-duration-fast) ease-out;
+    }
+
+    .trigger-index-badge.hidden {
+      opacity: 0;
+      transform: translateX(calc(-8px * var(--scale-direction)));
+      width: 0;
+      margin-inline-end: calc(var(--ha-space-2) * -1);
+      border-width: 0;
+      pointer-events: none;
     }
   `;
 }

src/panels/my/ha-panel-my.ts

@@ -189,6 +189,10 @@ export const getMyRedirects = (): Redirects => ({
     component: "radio_frequency",
     redirect: "/config/radio-frequency",
   },
+  config_serial: {
+    component: "usb",
+    redirect: "/config/serial",
+  },
   config_ssdp: {
     component: "ssdp",
     redirect: "/config/ssdp",