Create sections in section view

2025-09-19 10:00:02 +00:00 · 2025-09-12 14:08:09 +02:00
143 changed files with 1496 additions and 4067 deletions
--- a/.github/workflows/cast_deployment.yaml
+++ b/.github/workflows/cast_deployment.yaml
@@ -21,12 +21,12 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
        with:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -56,12 +56,12 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
        with:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -24,9 +24,9 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -37,7 +37,7 @@ jobs:
      - name: Build resources
        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
      - name: Setup lint cache
-        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache@v4.2.4
        with:
          path: |
            node_modules/.cache/prettier
@@ -58,9 +58,9 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -76,9 +76,9 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -89,7 +89,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@v4.6.2
        with:
          name: frontend-bundle-stats
          path: build/stats/*.json
@@ -100,9 +100,9 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -113,7 +113,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@v4.6.2
        with:
          name: supervisor-bundle-stats
          path: build/stats/*.json
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -23,7 +23,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
        with:
          # We must fetch at least the immediate parents so that if this is
          # a pull request then we can checkout the head.
@@ -36,14 +36,14 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/init@v3
        with:
          languages: ${{ matrix.language }}

      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/autobuild@v3

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
      #   make release

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/analyze@v3
--- a/.github/workflows/demo_deployment.yaml
+++ b/.github/workflows/demo_deployment.yaml
@@ -22,12 +22,12 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
        with:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -57,12 +57,12 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
        with:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/design_deployment.yaml
+++ b/.github/workflows/design_deployment.yaml
@@ -16,10 +16,10 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0

      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/design_preview.yaml
+++ b/.github/workflows/design_preview.yaml
@@ -21,10 +21,10 @@ jobs:
    if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0

      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/labeler.yaml
+++ b/.github/workflows/labeler.yaml
@@ -10,6 +10,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Apply labels
-        uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b # v6.0.1
+        uses: actions/labeler@v6.0.1
        with:
          sync-labels: true
--- a/.github/workflows/lock.yml
+++ b/.github/workflows/lock.yml
@@ -9,7 +9,7 @@ jobs:
  lock:
    runs-on: ubuntu-latest
    steps:
-      - uses: dessant/lock-threads@1bf7ec25051fe7c00bdd17e6a7cf3d7bfb7dc771 # v5.0.1
+      - uses: dessant/lock-threads@v5.0.1
        with:
          github-token: ${{ github.token }}
          process-only: "issues, prs"
--- a/.github/workflows/nightly.yaml
+++ b/.github/workflows/nightly.yaml
@@ -20,15 +20,15 @@ jobs:
      contents: write
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0

      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6
+        uses: actions/setup-python@v6
        with:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -57,14 +57,14 @@ jobs:
        run: tar -czvf translations.tar.gz translations

      - name: Upload build artifacts
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@v4.6.2
        with:
          name: wheels
          path: dist/home_assistant_frontend*.whl
          if-no-files-found: error

      - name: Upload translations
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@v4.6.2
        with:
          name: translations
          path: translations.tar.gz
--- a/.github/workflows/relative-ci.yaml
+++ b/.github/workflows/relative-ci.yaml
@@ -17,7 +17,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@1707825cbfcc7452b2913d273414705415ae64d4 # v3.0.1
+        uses: relative-ci/agent-action@v3.0.1
        with:
          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
          token: ${{ github.token }}
--- a/.github/workflows/release-drafter.yaml
+++ b/.github/workflows/release-drafter.yaml
@@ -18,6 +18,6 @@ jobs:
      pull-requests: read
    runs-on: ubuntu-latest
    steps:
-      - uses: release-drafter/release-drafter@b1476f6e6eb133afa41ed8589daba6dc69b4d3f5 # v6.1.0
+      - uses: release-drafter/release-drafter@v6.1.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -23,10 +23,10 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0

      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
+        uses: actions/setup-python@v6
        with:
          python-version: ${{ env.PYTHON_VERSION }}

@@ -34,7 +34,7 @@ jobs:
        uses: home-assistant/actions/helpers/verify-version@master

      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -55,7 +55,7 @@ jobs:
          script/release

      - name: Upload release assets
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@v2.3.3
        with:
          files: |
            dist/*.whl
@@ -73,7 +73,6 @@ jobs:
          version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
          echo "home-assistant-frontend==$version" > ./requirements.txt

-      # home-assistant/wheels doesn't support SHA pinning
      - name: Build wheels
        uses: home-assistant/wheels@2025.07.0
        with:
@@ -91,9 +90,9 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -108,7 +107,7 @@ jobs:
      - name: Tar folder
        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
      - name: Upload release asset
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@v2.3.3
        with:
          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz

@@ -120,9 +119,9 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -137,6 +136,6 @@ jobs:
      - name: Tar folder
        run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
      - name: Upload release asset
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@v2.3.3
        with:
          files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz
--- a/.github/workflows/restrict-task-creation.yml
+++ b/.github/workflows/restrict-task-creation.yml
@@ -12,7 +12,7 @@ jobs:
    if: github.event.issue.type.name == 'Task'
    steps:
      - name: Check if user is authorized
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+        uses: actions/github-script@v8
        with:
          script: |
            const issueAuthor = context.payload.issue.user.login;
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@3a9db7e6a41a89f618792c92c0e97cc736e1b13f # v10.0.0
+        uses: actions/stale@v10.0.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
--- a/.github/workflows/translations.yaml
+++ b/.github/workflows/translations.yaml
@@ -14,7 +14,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0

      - name: Upload Translations
        run: |
--- a/gallery/src/pages/components/ha-slider.markdown
+++ b/gallery/src/pages/components/ha-slider.markdown
@@ -1,36 +0,0 @@
---
-title: Slider
-subtitle: A slider component for selecting a value from a range.
---
-
-<style>
-  .wrapper {
-    display: flex;
-    gap: 24px;
-  }
-</style>
-
-# Slider `<ha-slider>`
-
-## Implementation
-
-### Example Usage
-
-<div class="wrapper">
-  <ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
-  <ha-slider size="medium"></ha-slider>
-</div>
-
-```html
-<ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
-<ha-slider size="medium"></ha-slider>
-```
-
-### API
-
-This component is based on the webawesome slider component.
-Check the [webawesome documentation](https://webawesome.com/docs/components/slider/) for more details.
-
-**CSS Custom Properties**
-
- `--ha-slider-track-size` - Height of the slider track. Defaults to `4px`.
--- a/gallery/src/pages/components/ha-slider.ts
+++ b/gallery/src/pages/components/ha-slider.ts
@@ -1,100 +0,0 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-import "../../../../src/components/ha-bar";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-spinner";
-import "../../../../src/components/ha-slider";
-import type { HomeAssistant } from "../../../../src/types";
-
-@customElement("demo-components-ha-slider")
-export class DemoHaSlider extends LitElement {
-  @property({ attribute: false }) hass!: HomeAssistant;
-
-  protected render(): TemplateResult {
-    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-slider ${mode} demo">
-              <div class="card-content">
-                <span>Default (disabled)</span>
-                <ha-slider
-                  disabled
-                  min="0"
-                  max="8"
-                  value="4"
-                  with-markers
-                ></ha-slider>
-                <span>Small</span>
-                <ha-slider
-                  size="small"
-                  min="0"
-                  max="8"
-                  value="4"
-                  with-markers
-                ></ha-slider>
-                <span>Medium</span>
-                <ha-slider
-                  size="medium"
-                  min="0"
-                  max="8"
-                  value="4"
-                  with-markers
-                ></ha-slider>
-              </div>
-            </ha-card>
-          </div>
-        `
-      )}
-    `;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
-      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
-      margin: 16px;
-      border-radius: 8px;
-    }
-    ha-card {
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 24px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-slider": DemoHaSlider;
-  }
-}
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
    "@codemirror/search": "6.5.11",
    "@codemirror/state": "6.5.2",
    "@codemirror/view": "6.38.2",
-    "@date-fns/tz": "1.4.1",
    "@egjs/hammerjs": "2.0.17",
    "@formatjs/intl-datetimeformat": "6.18.0",
    "@formatjs/intl-displaynames": "6.8.11",
@@ -97,12 +96,13 @@
    "@webcomponents/webcomponentsjs": "2.8.0",
    "app-datepicker": "5.1.1",
    "barcode-detector": "3.0.5",
-    "color-name": "2.0.2",
+    "color-name": "2.0.0",
    "comlink": "4.4.2",
    "core-js": "3.45.1",
    "cropperjs": "1.6.2",
    "culori": "4.0.2",
    "date-fns": "4.1.0",
+    "date-fns-tz": "3.2.0",
    "deep-clone-simple": "1.1.1",
    "deep-freeze": "0.0.1",
    "dialog-polyfill": "0.5.6",
@@ -111,7 +111,7 @@
    "fuse.js": "7.1.0",
    "google-timezones-json": "1.2.0",
    "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.12",
+    "hls.js": "1.6.11",
    "home-assistant-js-websocket": "9.5.0",
    "idb-keyval": "6.2.2",
    "intl-messageformat": "10.7.16",
@@ -122,7 +122,7 @@
    "lit": "3.3.1",
    "lit-html": "3.3.1",
    "luxon": "3.7.2",
-    "marked": "16.3.0",
+    "marked": "16.2.1",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.3",
    "object-hash": "3.0.0",
@@ -135,7 +135,7 @@
    "stacktrace-js": "2.0.2",
    "superstruct": "2.0.2",
    "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.5",
+    "ua-parser-js": "2.0.4",
    "vue": "2.7.16",
    "vue2-daterange-picker": "0.6.8",
    "weekstart": "2.0.0",
@@ -158,7 +158,7 @@
    "@octokit/plugin-retry": "8.0.1",
    "@octokit/rest": "22.0.0",
    "@rsdoctor/rspack-plugin": "1.2.3",
-    "@rspack/core": "1.5.3",
+    "@rspack/core": "1.5.2",
    "@rspack/dev-server": "1.1.4",
    "@types/babel__plugin-transform-runtime": "7.9.5",
    "@types/chromecast-caf-receiver": "6.0.24",
@@ -201,7 +201,7 @@
    "gulp-rename": "2.1.0",
    "html-minifier-terser": "7.2.0",
    "husky": "9.1.7",
-    "jsdom": "27.0.0",
+    "jsdom": "26.1.0",
    "jszip": "3.10.1",
    "lint-staged": "16.1.6",
    "lit-analyzer": "2.0.3",
@@ -231,7 +231,7 @@
    "clean-css": "5.3.3",
    "@lit/reactive-element": "2.1.1",
    "@fullcalendar/daygrid": "6.1.19",
-    "globals": "16.4.0",
+    "globals": "16.3.0",
    "tslib": "2.8.1",
    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
  },
--- a/src/common/datetime/calc_date.ts
+++ b/src/common/datetime/calc_date.ts
@@ -11,7 +11,7 @@ import {
  differenceInDays,
  addDays,
 } from "date-fns";
-import { TZDate } from "@date-fns/tz";
+import { toZonedTime, fromZonedTime } from "date-fns-tz";
 import type { HassConfig } from "home-assistant-js-websocket";
 import type { FrontendLocaleData } from "../../data/translation";
 import { TimeZone } from "../../data/translation";
@@ -22,13 +22,12 @@ const calcZonedDate = (
  fn: (date: Date, options?: any) => Date | number | boolean,
  options?
 ) => {
-  const tzDate = new TZDate(date, tz);
-  const fnResult = fn(tzDate, options);
-  if (fnResult instanceof Date) {
-    // Convert back to regular Date in the specified timezone
-    return new Date(fnResult.getTime());
+  const inputZoned = toZonedTime(date, tz);
+  const fnZoned = fn(inputZoned, options);
+  if (fnZoned instanceof Date) {
+    return fromZonedTime(fnZoned, tz) as Date;
  }
-  return fnResult;
+  return fnZoned;
 };

 export const calcDate = (
@@ -66,7 +65,7 @@ export const calcDateDifferenceProperty = (
    locale,
    config,
    locale.time_zone === TimeZone.server
-      ? new TZDate(startDate, config.time_zone)
+      ? toZonedTime(startDate, config.time_zone)
      : startDate
  );

@@ -145,36 +144,3 @@ export const shiftDateRange = (
  }
  return { start, end };
 };
-
-/**
- * @description Parses a date in browser display timezone
- * @param date - The date to parse
- * @param timezone - The timezone to parse the date in
- * @returns The parsed date as a Date object
- */
-export const parseDate = (date: string, timezone: string): Date => {
-  const tzDate = new TZDate(date, timezone);
-  return new Date(tzDate.getTime());
-};
-
-/**
- * @description Formats a date in browser display timezone
- * @param date - The date to format
- * @param timezone - The timezone to format the date in
- * @returns The formatted date in YYYY-MM-DD format
- */
-export const formatDate = (date: Date, timezone: string): string => {
-  const tzDate = new TZDate(date, timezone);
-  return tzDate.toISOString().split("T")[0];
-};
-
-/**
- * @description Formats a time in browser display timezone
- * @param date - The date to format
- * @param timezone - The timezone to format the time in
- * @returns The formatted time in HH:mm:ss format
- */
-export const formatTime = (date: Date, timezone: string): string => {
-  const tzDate = new TZDate(date, timezone);
-  return tzDate.toISOString().split("T")[1].split(".")[0];
-};
--- a/src/common/entity/compute_entity_name.ts
+++ b/src/common/entity/compute_entity_name.ts
@@ -10,10 +10,9 @@ import { stripPrefixFromEntityName } from "./strip_prefix_from_entity_name";

 export const computeEntityName = (
  stateObj: HassEntity,
-  entities: HomeAssistant["entities"],
-  devices: HomeAssistant["devices"]
+  hass: HomeAssistant
 ): string | undefined => {
-  const entry = entities[stateObj.entity_id] as
+  const entry = hass.entities[stateObj.entity_id] as
    | EntityRegistryDisplayEntry
    | undefined;

@@ -21,13 +20,12 @@ export const computeEntityName = (
    // Fall back to state name if not in the entity registry (friendly name)
    return computeStateName(stateObj);
  }
-  return computeEntityEntryName(entry, devices);
+  return computeEntityEntryName(entry, hass);
 };

 export const computeEntityEntryName = (
  entry: EntityRegistryDisplayEntry | EntityRegistryEntry,
-  devices: HomeAssistant["devices"],
-  fallbackStateObj?: HassEntity
+  hass: HomeAssistant
 ): string | undefined => {
  const name =
    entry.name ||
@@ -35,14 +33,15 @@ export const computeEntityEntryName = (
      ? String(entry.original_name)
      : undefined);

-  const device = entry.device_id ? devices[entry.device_id] : undefined;
+  const device = entry.device_id ? hass.devices[entry.device_id] : undefined;

  if (!device) {
    if (name) {
      return name;
    }
-    if (fallbackStateObj) {
-      return computeStateName(fallbackStateObj);
+    const stateObj = hass.states[entry.entity_id] as HassEntity | undefined;
+    if (stateObj) {
+      return computeStateName(stateObj);
    }
    return undefined;
  }
--- a/src/common/entity/context/get_entity_context.ts
+++ b/src/common/entity/context/get_entity_context.ts
@@ -18,12 +18,9 @@ interface EntityContext {

 export const getEntityContext = (
  stateObj: HassEntity,
-  entities: HomeAssistant["entities"],
-  devices: HomeAssistant["devices"],
-  areas: HomeAssistant["areas"],
-  floors: HomeAssistant["floors"]
+  hass: HomeAssistant
 ): EntityContext => {
-  const entry = entities[stateObj.entity_id] as
+  const entry = hass.entities[stateObj.entity_id] as
    | EntityRegistryDisplayEntry
    | undefined;

@@ -35,7 +32,7 @@ export const getEntityContext = (
      floor: null,
    };
  }
-  return getEntityEntryContext(entry, entities, devices, areas, floors);
+  return getEntityEntryContext(entry, hass);
 };

 export const getEntityEntryContext = (
@@ -43,18 +40,15 @@ export const getEntityEntryContext = (
    | EntityRegistryDisplayEntry
    | EntityRegistryEntry
    | ExtEntityRegistryEntry,
-  entities: HomeAssistant["entities"],
-  devices: HomeAssistant["devices"],
-  areas: HomeAssistant["areas"],
-  floors: HomeAssistant["floors"]
+  hass: HomeAssistant
 ): EntityContext => {
-  const entity = entities[entry.entity_id];
+  const entity = hass.entities[entry.entity_id];
  const deviceId = entry?.device_id;
-  const device = deviceId ? devices[deviceId] : undefined;
+  const device = deviceId ? hass.devices[deviceId] : undefined;
  const areaId = entry?.area_id || device?.area_id;
-  const area = areaId ? areas[areaId] : undefined;
+  const area = areaId ? hass.areas[areaId] : undefined;
  const floorId = area?.floor_id;
-  const floor = floorId ? floors[floorId] : undefined;
+  const floor = floorId ? hass.floors[floorId] : undefined;

  return {
    entity: entity,
--- a/src/common/entity/entity_filter.ts
+++ b/src/common/entity/entity_filter.ts
@@ -60,13 +60,7 @@ export const generateEntityFilter = (
      }
    }

-    const { area, floor, device, entity } = getEntityContext(
-      stateObj,
-      hass.entities,
-      hass.devices,
-      hass.areas,
-      hass.floors
-    );
+    const { area, floor, device, entity } = getEntityContext(stateObj, hass);

    if (entity && entity.hidden) {
      return false;
--- a/src/common/translations/entity-state.ts
+++ b/src/common/translations/entity-state.ts
@@ -2,12 +2,6 @@ import type { HassConfig, HassEntity } from "home-assistant-js-websocket";
 import type { FrontendLocaleData } from "../../data/translation";
 import type { HomeAssistant } from "../../types";
 import type { LocalizeFunc } from "./localize";
-import { computeEntityName } from "../entity/compute_entity_name";
-import { computeDeviceName } from "../entity/compute_device_name";
-import { getEntityContext } from "../entity/context/get_entity_context";
-import { computeAreaName } from "../entity/compute_area_name";
-import { computeFloorName } from "../entity/compute_floor_name";
-import { ensureArray } from "../array/ensure-array";

 export type FormatEntityStateFunc = (
  stateObj: HassEntity,
@@ -23,28 +17,16 @@ export type FormatEntityAttributeNameFunc = (
  attribute: string
 ) => string;

-export type EntityNameType = "entity" | "device" | "area" | "floor";
-
-export type FormatEntityNameFunc = (
-  stateObj: HassEntity,
-  type: EntityNameType | EntityNameType[],
-  separator?: string
-) => string;
-
 export const computeFormatFunctions = async (
  localize: LocalizeFunc,
  locale: FrontendLocaleData,
  config: HassConfig,
  entities: HomeAssistant["entities"],
-  devices: HomeAssistant["devices"],
-  areas: HomeAssistant["areas"],
-  floors: HomeAssistant["floors"],
  sensorNumericDeviceClasses: string[]
 ): Promise<{
  formatEntityState: FormatEntityStateFunc;
  formatEntityAttributeValue: FormatEntityAttributeValueFunc;
  formatEntityAttributeName: FormatEntityAttributeNameFunc;
-  formatEntityName: FormatEntityNameFunc;
 }> => {
  const { computeStateDisplay } = await import(
    "../entity/compute_state_display"
@@ -75,45 +57,5 @@ export const computeFormatFunctions = async (
      ),
    formatEntityAttributeName: (stateObj, attribute) =>
      computeAttributeNameDisplay(localize, stateObj, entities, attribute),
-    formatEntityName: (stateObj, type, separator = " ") => {
-      const types = ensureArray(type);
-      const namesList: (string | undefined)[] = [];
-
-      const { device, area, floor } = getEntityContext(
-        stateObj,
-        entities,
-        devices,
-        areas,
-        floors
-      );
-
-      for (const t of types) {
-        switch (t) {
-          case "entity": {
-            namesList.push(computeEntityName(stateObj, entities, devices));
-            break;
-          }
-          case "device": {
-            if (device) {
-              namesList.push(computeDeviceName(device));
-            }
-            break;
-          }
-          case "area": {
-            if (area) {
-              namesList.push(computeAreaName(area));
-            }
-            break;
-          }
-          case "floor": {
-            if (floor) {
-              namesList.push(computeFloorName(floor));
-            }
-            break;
-          }
-        }
-      }
-      return namesList.filter((name) => name !== undefined).join(separator);
-    },
  };
 };
--- a/src/common/util/order-properties.ts
+++ b/src/common/util/order-properties.ts
@@ -1,18 +0,0 @@
-/**
- * Orders object properties according to a specified key order.
- * Properties not in the order array will be placed at the end.
- */
-export function orderProperties<T extends Record<string, any>>(
-  obj: T,
-  keys: readonly string[]
-): T {
-  const orderedEntries = keys
-    .filter((key) => key in obj)
-    .map((key) => [key, obj[key]] as const);
-
-  const extraEntries = Object.entries(obj).filter(
-    ([key]) => !keys.includes(key)
-  );
-
-  return Object.fromEntries([...orderedEntries, ...extraEntries]) as T;
-}
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -63,9 +63,6 @@ export class HaChartBase extends LitElement {
  @property({ attribute: "small-controls", type: Boolean })
  public smallControls?: boolean;

-  @property({ attribute: "hide-reset-button", type: Boolean })
-  public hideResetButton?: boolean;
-
  // extraComponents is not reactive and should not trigger updates
  public extraComponents?: any[];

@@ -218,7 +215,7 @@ export class HaChartBase extends LitElement {
        </div>
        ${this._renderLegend()}
        <div class="chart-controls ${classMap({ small: this.smallControls })}">
-          ${this._isZoomed && !this.hideResetButton
+          ${this._isZoomed
            ? html`<ha-icon-button
                class="zoom-reset"
                .path=${mdiRestart}
@@ -356,12 +353,20 @@ export class HaChartBase extends LitElement {

      this.chart = echarts.init(container, "custom");
      this.chart.on("datazoom", (e: any) => {
-        this._handleDataZoomEvent(e);
+        const { start, end } = e.batch?.[0] ?? e;
+        this._isZoomed = start !== 0 || end !== 100;
+        this._zoomRatio = (end - start) / 100;
+        if (this._isTouchDevice) {
+          // zooming changes the axis pointer so we need to hide it
+          this.chart?.dispatchAction({
+            type: "hideTip",
+            from: "datazoom",
+          });
+        }
      });
      this.chart.on("click", (e: ECElementEvent) => {
        fireEvent(this, "chart-click", e);
      });
-
      if (!this.options?.dataZoom) {
        this.chart.getZr().on("dblclick", this._handleClickZoom);
      }
@@ -863,60 +868,10 @@ export class HaChartBase extends LitElement {
    });
  };

-  public zoom(start: number, end: number, silent = false) {
-    this.chart?.dispatchAction({
-      type: "dataZoom",
-      start,
-      end,
-      silent,
-    });
-  }
-
  private _handleZoomReset() {
    this.chart?.dispatchAction({ type: "dataZoom", start: 0, end: 100 });
  }

-  private _handleDataZoomEvent(e: any) {
-    const zoomData = e.batch?.[0] ?? e;
-    let start = typeof zoomData.start === "number" ? zoomData.start : 0;
-    let end = typeof zoomData.end === "number" ? zoomData.end : 100;
-
-    if (
-      start === 0 &&
-      end === 100 &&
-      zoomData.startValue !== undefined &&
-      zoomData.endValue !== undefined
-    ) {
-      const option = this.chart!.getOption();
-      const xAxis = option.xAxis?.[0] ?? option.xAxis;
-
-      if (xAxis?.min && xAxis?.max) {
-        const axisMin = new Date(xAxis.min).getTime();
-        const axisMax = new Date(xAxis.max).getTime();
-        const axisRange = axisMax - axisMin;
-
-        start = Math.max(
-          0,
-          Math.min(100, ((zoomData.startValue - axisMin) / axisRange) * 100)
-        );
-        end = Math.max(
-          0,
-          Math.min(100, ((zoomData.endValue - axisMin) / axisRange) * 100)
-        );
-      }
-    }
-
-    this._isZoomed = start !== 0 || end !== 100;
-    this._zoomRatio = (end - start) / 100;
-    if (this._isTouchDevice) {
-      this.chart?.dispatchAction({
-        type: "hideTip",
-        from: "datazoom",
-      });
-    }
-    fireEvent(this, "chart-zoom", { start, end });
-  }
-
  private _legendClick(ev: any) {
    if (!this.chart) {
      return;
@@ -1069,9 +1024,5 @@ declare global {
    "dataset-hidden": { id: string };
    "dataset-unhidden": { id: string };
    "chart-click": ECElementEvent;
-    "chart-zoom": {
-      start: number;
-      end: number;
-    };
  }
 }
--- a/src/components/chart/state-history-chart-line.ts
+++ b/src/components/chart/state-history-chart-line.ts
@@ -66,9 +66,6 @@ export class StateHistoryChartLine extends LitElement {
  @property({ attribute: "expand-legend", type: Boolean })
  public expandLegend?: boolean;

-  @property({ attribute: "hide-reset-button", type: Boolean })
-  public hideResetButton?: boolean;
-
  @state() private _chartData: LineSeriesOption[] = [];

  @state() private _entityIds: string[] = [];
@@ -97,9 +94,7 @@ export class StateHistoryChartLine extends LitElement {
        style=${styleMap({ height: this.height })}
        @dataset-hidden=${this._datasetHidden}
        @dataset-unhidden=${this._datasetUnhidden}
-        @chart-zoom=${this._handleDataZoom}
        .expandLegend=${this.expandLegend}
-        .hideResetButton=${this.hideResetButton}
      ></ha-chart-base>
    `;
  }
@@ -197,19 +192,6 @@ export class StateHistoryChartLine extends LitElement {
    this._hiddenStats.delete(ev.detail.id);
  }

-  public zoom(start: number, end: number) {
-    const chartBase = this.shadowRoot!.querySelector("ha-chart-base")!;
-    chartBase.zoom(start, end, true);
-  }
-
-  private _handleDataZoom(ev: CustomEvent) {
-    fireEvent(this, "chart-zoom-with-index", {
-      start: ev.detail.start ?? 0,
-      end: ev.detail.end ?? 100,
-      chartIndex: this.chartIndex,
-    });
-  }
-
  public willUpdate(changedProps: PropertyValues) {
    if (
      changedProps.has("data") ||
--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@@ -51,9 +51,6 @@ export class StateHistoryChartTimeline extends LitElement {

  @property({ attribute: false, type: Number }) public chartIndex?;

-  @property({ attribute: "hide-reset-button", type: Boolean })
-  public hideResetButton?: boolean;
-
  @state() private _chartData: CustomSeriesOption[] = [];

  @state() private _chartOptions?: ECOption;
@@ -71,8 +68,6 @@ export class StateHistoryChartTimeline extends LitElement {
        .data=${this._chartData as ECOption["series"]}
        small-controls
        @chart-click=${this._handleChartClick}
-        @chart-zoom=${this._handleDataZoom}
-        .hideResetButton=${this.hideResetButton}
      ></ha-chart-base>
    `;
  }
@@ -261,19 +256,6 @@ export class StateHistoryChartTimeline extends LitElement {
    };
  }

-  public zoom(start: number, end: number) {
-    const chartBase = this.shadowRoot!.querySelector("ha-chart-base")!;
-    chartBase.zoom(start, end, true);
-  }
-
-  private _handleDataZoom(ev: CustomEvent) {
-    fireEvent(this, "chart-zoom-with-index", {
-      start: ev.detail.start ?? 0,
-      end: ev.detail.end ?? 100,
-      chartIndex: this.chartIndex,
-    });
-  }
-
  private _generateData() {
    const computedStyles = getComputedStyle(this);
    let stateHistory = this.data;
--- a/src/components/chart/state-history-charts.ts
+++ b/src/components/chart/state-history-charts.ts
@@ -1,8 +1,7 @@
 import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import { mdiRestart } from "@mdi/js";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import type {
@@ -12,10 +11,6 @@ import type {
 } from "../../data/history";
 import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
-import type { StateHistoryChartLine } from "./state-history-chart-line";
-import type { StateHistoryChartTimeline } from "./state-history-chart-timeline";
-import "../ha-fab";
-import "../ha-svg-icon";
 import "./state-history-chart-line";
 import "./state-history-chart-timeline";

@@ -34,11 +29,6 @@ const chunkData = (inputArray: any[], chunks: number) =>
 declare global {
  interface HASSDomEvents {
    "y-width-changed": { value: number; chartIndex: number };
-    "chart-zoom-with-index": {
-      start: number;
-      end: number;
-      chartIndex: number;
-    };
  }
 }

@@ -94,10 +84,6 @@ export class StateHistoryCharts extends LitElement {

  @state() private _chartCount = 0;

-  @state() private _hasZoomedCharts = false;
-
-  private _isSyncing = false;
-
  // @ts-ignore
  @restoreScroll(".container") private _savedScrollPos?: number;

@@ -129,36 +115,19 @@ export class StateHistoryCharts extends LitElement {
    // eslint-disable-next-line lit/no-this-assign-in-render
    this._chartCount = combinedItems.length;

-    return html`
-      ${this.virtualize
-        ? html`<div
-            class="container ha-scrollbar"
-            @scroll=${this._saveScrollPos}
+    return this.virtualize
+      ? html`<div class="container ha-scrollbar" @scroll=${this._saveScrollPos}>
+          <lit-virtualizer
+            scroller
+            class="ha-scrollbar"
+            .items=${combinedItems}
+            .renderItem=${this._renderHistoryItem}
          >
-            <lit-virtualizer
-              scroller
-              class="ha-scrollbar"
-              .items=${combinedItems}
-              .renderItem=${this._renderHistoryItem}
-            >
-            </lit-virtualizer>
-          </div>`
-        : html`${combinedItems.map((item, index) =>
-            this._renderHistoryItem(item, index)
-          )}`}
-      ${this._hasZoomedCharts
-        ? html`<ha-fab
-            slot="fab"
-            class="reset-button"
-            .label=${this.hass.localize(
-              "ui.components.history_charts.zoom_reset"
-            )}
-            @click=${this._handleGlobalZoomReset}
-          >
-            <ha-svg-icon slot="icon" .path=${mdiRestart}></ha-svg-icon>
-          </ha-fab>`
-        : nothing}
-    `;
+          </lit-virtualizer>
+        </div>`
+      : html`${combinedItems.map((item, index) =>
+          this._renderHistoryItem(item, index)
+        )}`;
  }

  private _renderHistoryItem: RenderItemFunction<
@@ -187,10 +156,8 @@ export class StateHistoryCharts extends LitElement {
          .maxYAxis=${this.maxYAxis}
          .fitYData=${this.fitYData}
          @y-width-changed=${this._yWidthChanged}
-          @chart-zoom-with-index=${this._handleTimelineSync}
          .height=${this.virtualize ? undefined : this.height}
          .expandLegend=${this.expandLegend}
-          hide-reset-button
        ></state-history-chart-line>
      </div> `;
    }
@@ -208,8 +175,6 @@ export class StateHistoryCharts extends LitElement {
        .chartIndex=${index}
        .clickForMoreInfo=${this.clickForMoreInfo}
        @y-width-changed=${this._yWidthChanged}
-        @chart-zoom-with-index=${this._handleTimelineSync}
-        hide-reset-button
      ></state-history-chart-timeline>
    </div> `;
  };
@@ -299,66 +264,6 @@ export class StateHistoryCharts extends LitElement {
    this._maxYWidth = Math.max(...Object.values(this._childYWidths), 0);
  }

-  private _handleTimelineSync(
-    e: CustomEvent<HASSDomEvents["chart-zoom-with-index"]>
-  ) {
-    if (this._isSyncing) {
-      return;
-    }
-
-    const { start, end, chartIndex } = e.detail;
-
-    this._hasZoomedCharts = start !== 0 || end !== 100;
-    this._syncZoomToAllCharts(start, end, chartIndex);
-  }
-
-  private _syncZoomToAllCharts(
-    start: number,
-    end: number,
-    sourceChartIndex?: number
-  ) {
-    this._isSyncing = true;
-
-    requestAnimationFrame(() => {
-      const chartComponents = this.renderRoot.querySelectorAll(
-        "state-history-chart-line, state-history-chart-timeline"
-      ) as unknown as (StateHistoryChartLine | StateHistoryChartTimeline)[];
-
-      chartComponents.forEach((chartComponent, index) => {
-        if (index === sourceChartIndex) {
-          return;
-        }
-
-        if ("zoom" in chartComponent) {
-          chartComponent.zoom(start, end);
-        }
-      });
-
-      this._isSyncing = false;
-    });
-  }
-
-  private _handleGlobalZoomReset() {
-    this._hasZoomedCharts = false;
-    this._isSyncing = true;
-
-    requestAnimationFrame(() => {
-      const chartComponents = this.renderRoot.querySelectorAll(
-        "state-history-chart-line, state-history-chart-timeline"
-      );
-
-      chartComponents.forEach((chartComponent: any) => {
-        const chartBase =
-          chartComponent.renderRoot?.querySelector("ha-chart-base");
-
-        if (chartBase && chartBase.chart) {
-          chartBase.zoom(0, 100);
-        }
-      });
-      this._isSyncing = false;
-    });
-  }
-
  private _isHistoryEmpty(): boolean {
    const historyDataEmpty =
      !this.historyData ||
@@ -440,11 +345,6 @@ export class StateHistoryCharts extends LitElement {
    state-history-chart-line {
      width: 100%;
    }
-    .reset-button {
-      position: fixed;
-      bottom: calc(24px + var(--safe-area-inset-bottom));
-      right: calc(24px + var(--safe-area-inset-bottom));
-    }
  `;
 }

--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@@ -5,8 +5,12 @@ import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
+import { computeAreaName } from "../../common/entity/compute_area_name";
+import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { computeDomain } from "../../common/entity/compute_domain";
+import { computeEntityName } from "../../common/entity/compute_entity_name";
 import { computeStateName } from "../../common/entity/compute_state_name";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { domainToName } from "../../data/integration";
@@ -144,9 +148,11 @@ export class HaEntityPicker extends LitElement {
      `;
    }

-    const entityName = this.hass.formatEntityName(stateObj, "entity");
-    const deviceName = this.hass.formatEntityName(stateObj, "device");
-    const areaName = this.hass.formatEntityName(stateObj, "area");
+    const { area, device } = getEntityContext(stateObj, this.hass);
+
+    const entityName = computeEntityName(stateObj, this.hass);
+    const deviceName = device ? computeDeviceName(device) : undefined;
+    const areaName = area ? computeAreaName(area) : undefined;

    const isRTL = computeRTL(this.hass);

@@ -305,10 +311,12 @@ export class HaEntityPicker extends LitElement {
      items = entityIds.map<EntityComboBoxItem>((entityId) => {
        const stateObj = hass!.states[entityId];

+        const { area, device } = getEntityContext(stateObj, hass);
+
        const friendlyName = computeStateName(stateObj); // Keep this for search
-        const entityName = this.hass.formatEntityName(stateObj, "entity");
-        const deviceName = this.hass.formatEntityName(stateObj, "device");
-        const areaName = this.hass.formatEntityName(stateObj, "area");
+        const entityName = computeEntityName(stateObj, hass);
+        const deviceName = device ? computeDeviceName(device) : undefined;
+        const areaName = area ? computeAreaName(area) : undefined;

        const domainName = domainToName(
          this.hass.localize,
--- a/src/components/entity/ha-statistic-picker.ts
+++ b/src/components/entity/ha-statistic-picker.ts
@@ -6,7 +6,11 @@ import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
+import { computeAreaName } from "../../common/entity/compute_area_name";
+import { computeDeviceName } from "../../common/entity/compute_device_name";
+import { computeEntityName } from "../../common/entity/compute_entity_name";
 import { computeStateName } from "../../common/entity/compute_state_name";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { domainToName } from "../../data/integration";
 import {
@@ -255,10 +259,12 @@ export class HaStatisticPicker extends LitElement {
        }
        const id = meta.statistic_id;

+        const { area, device } = getEntityContext(stateObj, hass);
+
        const friendlyName = computeStateName(stateObj); // Keep this for search
-        const entityName = hass.formatEntityName(stateObj, "entity");
-        const deviceName = hass.formatEntityName(stateObj, "device");
-        const areaName = hass.formatEntityName(stateObj, "area");
+        const entityName = computeEntityName(stateObj, hass);
+        const deviceName = device ? computeDeviceName(device) : undefined;
+        const areaName = area ? computeAreaName(area) : undefined;

        const primary = entityName || deviceName || id;
        const secondary = [areaName, entityName ? deviceName : undefined]
@@ -331,9 +337,11 @@ export class HaStatisticPicker extends LitElement {
    const stateObj = this.hass.states[statisticId];

    if (stateObj) {
-      const entityName = this.hass.formatEntityName(stateObj, "entity");
-      const deviceName = this.hass.formatEntityName(stateObj, "device");
-      const areaName = this.hass.formatEntityName(stateObj, "area");
+      const { area, device } = getEntityContext(stateObj, this.hass);
+
+      const entityName = computeEntityName(stateObj, this.hass);
+      const deviceName = device ? computeDeviceName(device) : undefined;
+      const areaName = area ? computeAreaName(area) : undefined;

      const isRTL = computeRTL(this.hass);

--- a/src/components/ha-bottom-sheet.ts
+++ b/src/components/ha-bottom-sheet.ts
@@ -1,62 +1,262 @@
-import { css, html, LitElement, type PropertyValues } from "lit";
-import "@home-assistant/webawesome/dist/components/drawer/drawer";
-import { customElement, property, state } from "lit/decorators";
+import { css, html, LitElement } from "lit";
+import { customElement, query, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import { fireEvent } from "../common/dom/fire_event";

-export const BOTTOM_SHEET_ANIMATION_DURATION_MS = 300;
+const ANIMATION_DURATION_MS = 300;

+/**
+ * A bottom sheet component that slides up from the bottom of the screen.
+ *
+ * The bottom sheet provides a draggable interface that allows users to resize
+ * the sheet by dragging the handle at the top. It supports both mouse and touch
+ * interactions and automatically closes when dragged below a 20% of screen height.
+ *
+ * @fires bottom-sheet-closed - Fired when the bottom sheet is closed
+ *
+ * @cssprop --ha-bottom-sheet-border-width - Border width for the sheet
+ * @cssprop --ha-bottom-sheet-border-style - Border style for the sheet
+ * @cssprop --ha-bottom-sheet-border-color - Border color for the sheet
+ */
@customElement("ha-bottom-sheet")
 export class HaBottomSheet extends LitElement {
-  @property({ type: Boolean }) public open = false;
+  @query("dialog") private _dialog!: HTMLDialogElement;

-  @state() private _drawerOpen = false;
+  private _dragging = false;

-  private _handleAfterHide() {
-    this.open = false;
-    const ev = new Event("closed", {
-      bubbles: true,
-      composed: true,
-    });
-    this.dispatchEvent(ev);
+  private _dragStartY = 0;
+
+  private _initialSize = 0;
+
+  @state() private _dialogMaxViewpointHeight = 70;
+
+  @state() private _dialogMinViewpointHeight = 55;
+
+  @state() private _dialogViewportHeight?: number;
+
+  render() {
+    return html`<dialog
+      open
+      @transitionend=${this._handleTransitionEnd}
+      style=${styleMap({
+        height: this._dialogViewportHeight
+          ? `${this._dialogViewportHeight}vh`
+          : "auto",
+        maxHeight: `${this._dialogMaxViewpointHeight}vh`,
+        minHeight: `${this._dialogMinViewpointHeight}vh`,
+      })}
+    >
+      <div class="handle-wrapper">
+        <div
+          @mousedown=${this._handleMouseDown}
+          @touchstart=${this._handleTouchStart}
+          class="handle"
+        ></div>
+      </div>
+      <slot></slot>
+    </dialog>`;
  }

-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
-    if (changedProperties.has("open")) {
-      this._drawerOpen = this.open;
+  protected firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this._openSheet();
+  }
+
+  private _openSheet() {
+    requestAnimationFrame(() => {
+      // trigger opening animation
+      this._dialog.classList.add("show");
+    });
+  }
+
+  public closeSheet() {
+    requestAnimationFrame(() => {
+      this._dialog.classList.remove("show");
+    });
+  }
+
+  private _handleTransitionEnd() {
+    if (this._dialog.classList.contains("show")) {
+      // after show animation is done
+      // - set the height to the natural height, to prevent content shift when switch content
+      // - set max height to 90vh, so it opens at max 70vh but can be resized to 90vh
+      this._dialogViewportHeight =
+        (this._dialog.offsetHeight / window.innerHeight) * 100;
+      this._dialogMaxViewpointHeight = 90;
+      this._dialogMinViewpointHeight = 20;
+    } else {
+      // after close animation is done close dialog element and fire closed event
+      this._dialog.close();
+      fireEvent(this, "bottom-sheet-closed");
    }
  }

-  render() {
-    return html`
-      <wa-drawer
-        placement="bottom"
-        .open=${this._drawerOpen}
-        @wa-after-hide=${this._handleAfterHide}
-        without-header
-      >
-        <slot></slot>
-      </wa-drawer>
-    `;
+  connectedCallback() {
+    super.connectedCallback();
+
+    // register event listeners for drag handling
+    document.addEventListener("mousemove", this._handleMouseMove);
+    document.addEventListener("mouseup", this._handleMouseUp);
+    document.addEventListener("touchmove", this._handleTouchMove, {
+      passive: false,
+    });
+    document.addEventListener("touchend", this._handleTouchEnd);
+    document.addEventListener("touchcancel", this._handleTouchEnd);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    // unregister event listeners for drag handling
+    document.removeEventListener("mousemove", this._handleMouseMove);
+    document.removeEventListener("mouseup", this._handleMouseUp);
+    document.removeEventListener("touchmove", this._handleTouchMove);
+    document.removeEventListener("touchend", this._handleTouchEnd);
+    document.removeEventListener("touchcancel", this._handleTouchEnd);
+  }
+
+  private _handleMouseDown = (ev: MouseEvent) => {
+    this._startDrag(ev.clientY);
+  };
+
+  private _handleTouchStart = (ev: TouchEvent) => {
+    // Prevent the browser from interpreting this as a scroll/PTR gesture.
+    ev.preventDefault();
+    this._startDrag(ev.touches[0].clientY);
+  };
+
+  private _startDrag(clientY: number) {
+    this._dragging = true;
+    this._dragStartY = clientY;
+    this._initialSize = (this._dialog.offsetHeight / window.innerHeight) * 100;
+    document.body.style.setProperty("cursor", "grabbing");
+  }
+
+  private _handleMouseMove = (ev: MouseEvent) => {
+    if (!this._dragging) {
+      return;
+    }
+    this._updateSize(ev.clientY);
+  };
+
+  private _handleTouchMove = (ev: TouchEvent) => {
+    if (!this._dragging) {
+      return;
+    }
+    ev.preventDefault(); // Prevent scrolling
+    this._updateSize(ev.touches[0].clientY);
+  };
+
+  private _updateSize(clientY: number) {
+    const deltaY = this._dragStartY - clientY;
+    const viewportHeight = window.innerHeight;
+    const deltaVh = (deltaY / viewportHeight) * 100;
+
+    // Calculate new size and clamp between 10vh and 90vh
+    let newSize = this._initialSize + deltaVh;
+    newSize = Math.max(10, Math.min(90, newSize));
+
+    // on drag down and below 20vh
+    if (newSize < 20 && deltaY < 0) {
+      this._endDrag();
+      this.closeSheet();
+      return;
+    }
+
+    this._dialogViewportHeight = newSize;
+  }
+
+  private _handleMouseUp = () => {
+    this._endDrag();
+  };
+
+  private _handleTouchEnd = () => {
+    this._endDrag();
+  };
+
+  private _endDrag() {
+    if (!this._dragging) {
+      return;
+    }
+    this._dragging = false;
+    document.body.style.removeProperty("cursor");
  }

  static styles = css`
-    wa-drawer {
-      --wa-color-surface-raised: var(
+    .handle-wrapper {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      padding-bottom: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: grab;
+      touch-action: none;
+    }
+    .handle-wrapper .handle {
+      height: 20px;
+      width: 200px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 7;
+      padding-bottom: 76px;
+    }
+    .handle-wrapper .handle::after {
+      content: "";
+      border-radius: 8px;
+      height: 4px;
+      background: var(--divider-color, #e0e0e0);
+      width: 80px;
+    }
+    .handle-wrapper .handle:active::after {
+      cursor: grabbing;
+    }
+    dialog {
+      height: auto;
+      max-height: 70vh;
+      min-height: 30vh;
+      background-color: var(
        --ha-dialog-surface-background,
        var(--mdc-theme-surface, #fff)
      );
-      --spacing: 0;
-      --size: auto;
-      --show-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
-      --hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
+      display: flex;
+      flex-direction: column;
+      top: 0;
+      inset-inline-start: 0;
+      position: fixed;
+      width: calc(100% - 4px);
+      max-width: 100%;
+      border: none;
+      box-shadow: var(--wa-shadow-l);
+      padding: 0;
+      margin: 0;
+      top: auto;
+      inset-inline-end: auto;
+      bottom: 0;
+      inset-inline-start: 0;
+      box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.2);
+      border-top-left-radius: var(
+        --ha-dialog-border-radius,
+        var(--ha-border-radius-2xl)
+      );
+      border-top-right-radius: var(
+        --ha-dialog-border-radius,
+        var(--ha-border-radius-2xl)
+      );
+      transform: translateY(100%);
+      transition: transform ${ANIMATION_DURATION_MS}ms ease;
+      border-top-width: var(--ha-bottom-sheet-border-width);
+      border-right-width: var(--ha-bottom-sheet-border-width);
+      border-left-width: var(--ha-bottom-sheet-border-width);
+      border-bottom-width: 0;
+      border-style: var(--ha-bottom-sheet-border-style);
+      border-color: var(--ha-bottom-sheet-border-color);
    }
-    wa-drawer::part(dialog) {
-      border-top-left-radius: var(--ha-border-radius-lg);
-      border-top-right-radius: var(--ha-border-radius-lg);
-      max-height: 90vh;
-      margin-bottom: var(--safe-area-inset-bottom);
-      margin-left: var(--safe-area-inset-left);
-      margin-right: var(--safe-area-inset-right);
+
+    dialog.show {
+      transform: translateY(0);
    }
  `;
 }
@@ -65,4 +265,8 @@ declare global {
  interface HTMLElementTagNameMap {
    "ha-bottom-sheet": HaBottomSheet;
  }
+
+  interface HASSDomEvents {
+    "bottom-sheet-closed": undefined;
+  }
 }
--- a/src/components/ha-button-toggle-group.ts
+++ b/src/components/ha-button-toggle-group.ts
@@ -28,9 +28,6 @@ export class HaButtonToggleGroup extends LitElement {

  @property({ reflect: true }) size: "small" | "medium" = "medium";

-  @property({ type: Boolean, reflect: true, attribute: "no-wrap" })
-  public nowrap = false;
-
  @property() public variant:
    | "brand"
    | "neutral"
@@ -74,10 +71,6 @@ export class HaButtonToggleGroup extends LitElement {
    :host {
      --mdc-icon-size: var(--button-toggle-icon-size, 20px);
    }
-
-    :host([no-wrap]) wa-button-group::part(base) {
-      flex-wrap: nowrap;
-    }
  `;
 }

--- a/src/components/ha-button.ts
+++ b/src/components/ha-button.ts
@@ -57,8 +57,6 @@ export class HaButton extends Button {

          font-size: var(--ha-font-size-m);
          line-height: 1;
-
-          transition: background-color 0.15s ease-in-out;
        }

        :host([size="small"]) .button {
--- a/src/components/ha-code-editor.ts
+++ b/src/components/ha-code-editor.ts
@@ -330,13 +330,7 @@ export class HaCodeEditor extends ReactiveElement {

  private _renderInfo = (completion: Completion): CompletionInfo => {
    const key = completion.label;
-    const context = getEntityContext(
-      this.hass!.states[key],
-      this.hass!.entities,
-      this.hass!.devices,
-      this.hass!.areas,
-      this.hass!.floors
-    );
+    const context = getEntityContext(this.hass!.states[key], this.hass!);

    const completionInfo = document.createElement("div");
    completionInfo.classList.add("completion-info");
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -2,7 +2,7 @@ import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";

 import { mdiCalendar } from "@mdi/js";
 import { isThisYear } from "date-fns";
-import { TZDate } from "@date-fns/tz";
+import { fromZonedTime, toZonedTime } from "date-fns-tz";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -275,8 +275,8 @@ export class HaDateRangePicker extends LitElement {
    }

    if (this.hass.locale.time_zone === TimeZone.server) {
-      start = new Date(new TZDate(start, this.hass.config.time_zone).getTime());
-      end = new Date(new TZDate(end, this.hass.config.time_zone).getTime());
+      start = fromZonedTime(start, this.hass.config.time_zone);
+      end = fromZonedTime(end, this.hass.config.time_zone);
    }

    if (
@@ -290,7 +290,7 @@ export class HaDateRangePicker extends LitElement {

  private _formatDate(date: Date): string {
    if (this.hass.locale.time_zone === TimeZone.server) {
-      return new TZDate(date, this.hass.config.time_zone).toISOString();
+      return toZonedTime(date, this.hass.config.time_zone).toISOString();
    }
    return date.toISOString();
  }
--- a/src/components/ha-dialog-header.ts
+++ b/src/components/ha-dialog-header.ts
@@ -1,44 +1,12 @@
 import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
+import { customElement } from "lit/decorators";

@customElement("ha-dialog-header")
 export class HaDialogHeader extends LitElement {
-  @state()
-  private _hasSubtitle = false;
-
-  protected firstUpdated() {
-    this._checkSubtitleContent();
-  }
-
-  private _checkSubtitleContent() {
-    const subtitleSlot = this.shadowRoot?.querySelector(
-      'slot[name="subtitle"]'
-    ) as HTMLSlotElement;
-    if (subtitleSlot) {
-      const assignedNodes = subtitleSlot.assignedNodes({ flatten: true });
-      this._hasSubtitle = assignedNodes.some((node) => {
-        let text: string | any[] | undefined;
-        if (node.nodeType === Node.TEXT_NODE) {
-          text = node.textContent?.trim();
-        }
-        if (node.nodeType === Node.ELEMENT_NODE) {
-          text = (node as Element).textContent?.trim();
-        }
-        return text && text.length > 0;
-      });
-    }
-  }
-
  protected render() {
    return html`
      <header class="header">
-        <div
-          class=${classMap({
-            "header-bar": true,
-            "no-subtitle": !this._hasSubtitle,
-          })}
-        >
+        <div class="header-bar">
          <section class="header-navigation-icon">
            <slot name="navigationIcon"></slot>
          </section>
@@ -47,10 +15,7 @@ export class HaDialogHeader extends LitElement {
              <slot name="title"></slot>
            </div>
            <div class="header-subtitle">
-              <slot
-                name="subtitle"
-                @slotchange=${this._checkSubtitleContent}
-              ></slot>
+              <slot name="subtitle"></slot>
            </div>
          </section>
          <section class="header-action-items">
@@ -79,9 +44,6 @@ export class HaDialogHeader extends LitElement {
          padding: 4px;
          box-sizing: border-box;
        }
-        .header-bar.no-subtitle {
-          align-items: center;
-        }
        .header-content {
          flex: 1;
          padding: 10px 4px;
--- a/src/components/ha-labeled-slider.ts
+++ b/src/components/ha-labeled-slider.ts
@@ -36,17 +36,15 @@ class HaLabeledSlider extends LitElement {
      <div class="extra-container"><slot name="extra"></slot></div>
      <div class="slider-container">
        ${this.icon ? html`<ha-icon icon=${this.icon}></ha-icon>` : nothing}
-        <div class="slider-wrapper">
-          <ha-slider
-            .min=${this.min}
-            .max=${this.max}
-            .step=${this.step}
-            .labeled=${this.labeled}
-            .disabled=${this.disabled}
-            .value=${this.value}
-            @change=${this._inputChanged}
-          ></ha-slider>
-        </div>
+        <ha-slider
+          .min=${this.min}
+          .max=${this.max}
+          .step=${this.step}
+          .labeled=${this.labeled}
+          .disabled=${this.disabled}
+          .value=${this.value}
+          @change=${this._inputChanged}
+        ></ha-slider>
      </div>
      ${this.helper
        ? html`<ha-input-helper-text .disabled=${this.disabled}>
@@ -85,8 +83,7 @@ class HaLabeledSlider extends LitElement {
      color: var(--secondary-text-color);
    }

-    .slider-wrapper {
-      padding: 0 8px;
+    ha-slider {
      display: flex;
      flex-grow: 1;
      align-items: center;
@@ -94,10 +91,6 @@ class HaLabeledSlider extends LitElement {
      border-radius: 4px;
      height: 32px;
    }
-
-    ha-slider {
-      width: 100%;
-    }
  `;
 }

--- a/src/components/ha-resizable-bottom-sheet.ts
+++ b/src/components/ha-resizable-bottom-sheet.ts
@@ -1,276 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, query, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
-import { fireEvent } from "../common/dom/fire_event";
-import { BOTTOM_SHEET_ANIMATION_DURATION_MS } from "./ha-bottom-sheet";
-
-/**
- * A bottom sheet component that slides up from the bottom of the screen.
- *
- * The bottom sheet provides a draggable interface that allows users to resize
- * the sheet by dragging the handle at the top. It supports both mouse and touch
- * interactions and automatically closes when dragged below a 20% of screen height.
- *
- * @fires bottom-sheet-closed - Fired when the bottom sheet is closed
- *
- * @cssprop --ha-bottom-sheet-border-width - Border width for the sheet
- * @cssprop --ha-bottom-sheet-border-style - Border style for the sheet
- * @cssprop --ha-bottom-sheet-border-color - Border color for the sheet
- */
-@customElement("ha-resizable-bottom-sheet")
-export class HaResizableBottomSheet extends LitElement {
-  @query("dialog") private _dialog!: HTMLDialogElement;
-
-  private _dragging = false;
-
-  private _dragStartY = 0;
-
-  private _initialSize = 0;
-
-  @state() private _dialogMaxViewpointHeight = 70;
-
-  @state() private _dialogMinViewpointHeight = 55;
-
-  @state() private _dialogViewportHeight?: number;
-
-  render() {
-    return html`<dialog
-      open
-      @transitionend=${this._handleTransitionEnd}
-      style=${styleMap({
-        height: this._dialogViewportHeight
-          ? `${this._dialogViewportHeight}vh`
-          : "auto",
-        maxHeight: `${this._dialogMaxViewpointHeight}vh`,
-        minHeight: `${this._dialogMinViewpointHeight}vh`,
-      })}
-    >
-      <div class="handle-wrapper">
-        <div
-          @mousedown=${this._handleMouseDown}
-          @touchstart=${this._handleTouchStart}
-          class="handle"
-        ></div>
-      </div>
-      <slot></slot>
-    </dialog>`;
-  }
-
-  protected firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-    this._openSheet();
-  }
-
-  private _openSheet() {
-    requestAnimationFrame(() => {
-      // trigger opening animation
-      this._dialog.classList.add("show");
-    });
-  }
-
-  public closeSheet() {
-    requestAnimationFrame(() => {
-      this._dialog.classList.remove("show");
-    });
-  }
-
-  private _handleTransitionEnd() {
-    if (this._dialog.classList.contains("show")) {
-      // after show animation is done
-      // - set the height to the natural height, to prevent content shift when switch content
-      // - set max height to 90vh, so it opens at max 70vh but can be resized to 90vh
-      this._dialogViewportHeight =
-        (this._dialog.offsetHeight / window.innerHeight) * 100;
-      this._dialogMaxViewpointHeight = 90;
-      this._dialogMinViewpointHeight = 20;
-    } else {
-      // after close animation is done close dialog element and fire closed event
-      this._dialog.close();
-      fireEvent(this, "bottom-sheet-closed");
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    // register event listeners for drag handling
-    document.addEventListener("mousemove", this._handleMouseMove);
-    document.addEventListener("mouseup", this._handleMouseUp);
-    document.addEventListener("touchmove", this._handleTouchMove, {
-      passive: false,
-    });
-    document.addEventListener("touchend", this._handleTouchEnd);
-    document.addEventListener("touchcancel", this._handleTouchEnd);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    // unregister event listeners for drag handling
-    document.removeEventListener("mousemove", this._handleMouseMove);
-    document.removeEventListener("mouseup", this._handleMouseUp);
-    document.removeEventListener("touchmove", this._handleTouchMove);
-    document.removeEventListener("touchend", this._handleTouchEnd);
-    document.removeEventListener("touchcancel", this._handleTouchEnd);
-  }
-
-  private _handleMouseDown = (ev: MouseEvent) => {
-    this._startDrag(ev.clientY);
-  };
-
-  private _handleTouchStart = (ev: TouchEvent) => {
-    // Prevent the browser from interpreting this as a scroll/PTR gesture.
-    ev.preventDefault();
-    this._startDrag(ev.touches[0].clientY);
-  };
-
-  private _startDrag(clientY: number) {
-    this._dragging = true;
-    this._dragStartY = clientY;
-    this._initialSize = (this._dialog.offsetHeight / window.innerHeight) * 100;
-    document.body.style.setProperty("cursor", "grabbing");
-  }
-
-  private _handleMouseMove = (ev: MouseEvent) => {
-    if (!this._dragging) {
-      return;
-    }
-    this._updateSize(ev.clientY);
-  };
-
-  private _handleTouchMove = (ev: TouchEvent) => {
-    if (!this._dragging) {
-      return;
-    }
-    ev.preventDefault(); // Prevent scrolling
-    this._updateSize(ev.touches[0].clientY);
-  };
-
-  private _updateSize(clientY: number) {
-    const deltaY = this._dragStartY - clientY;
-    const viewportHeight = window.innerHeight;
-    const deltaVh = (deltaY / viewportHeight) * 100;
-
-    // Calculate new size and clamp between 10vh and 90vh
-    let newSize = this._initialSize + deltaVh;
-    newSize = Math.max(10, Math.min(90, newSize));
-
-    // on drag down and below 20vh
-    if (newSize < 20 && deltaY < 0) {
-      this._endDrag();
-      this.closeSheet();
-      return;
-    }
-
-    this._dialogViewportHeight = newSize;
-  }
-
-  private _handleMouseUp = () => {
-    this._endDrag();
-  };
-
-  private _handleTouchEnd = () => {
-    this._endDrag();
-  };
-
-  private _endDrag() {
-    if (!this._dragging) {
-      return;
-    }
-    this._dragging = false;
-    document.body.style.removeProperty("cursor");
-  }
-
-  static styles = css`
-    .handle-wrapper {
-      position: absolute;
-      top: 0;
-      width: 100%;
-      padding-bottom: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: grab;
-      touch-action: none;
-    }
-    .handle-wrapper .handle {
-      height: 20px;
-      width: 200px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 7;
-      padding-bottom: 76px;
-    }
-    .handle-wrapper .handle::after {
-      content: "";
-      border-radius: 8px;
-      height: 4px;
-      background: var(--divider-color, #e0e0e0);
-      width: 80px;
-    }
-    .handle-wrapper .handle:active::after {
-      cursor: grabbing;
-    }
-    dialog {
-      height: auto;
-      max-height: 70vh;
-      min-height: 30vh;
-      background-color: var(
-        --ha-dialog-surface-background,
-        var(--mdc-theme-surface, #fff)
-      );
-      display: flex;
-      flex-direction: column;
-      top: 0;
-      inset-inline-start: 0;
-      position: fixed;
-      width: calc(
-        100% - 4px - var(--safe-area-inset-left) - var(--safe-area-inset-right)
-      );
-      max-width: 100%;
-      border: none;
-      box-shadow: var(--wa-shadow-l);
-      padding: 0;
-      margin: 0;
-      top: auto;
-      inset-inline-end: auto;
-      bottom: 0;
-      inset-inline-start: 0;
-      box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.2);
-      border-top-left-radius: var(
-        --ha-dialog-border-radius,
-        var(--ha-border-radius-2xl)
-      );
-      border-top-right-radius: var(
-        --ha-dialog-border-radius,
-        var(--ha-border-radius-2xl)
-      );
-      transform: translateY(100%);
-      transition: transform ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms ease;
-      border-top-width: var(--ha-bottom-sheet-border-width);
-      border-right-width: var(--ha-bottom-sheet-border-width);
-      border-left-width: var(--ha-bottom-sheet-border-width);
-      border-bottom-width: 0;
-      border-style: var(--ha-bottom-sheet-border-style);
-      border-color: var(--ha-bottom-sheet-border-color);
-      margin-bottom: var(--safe-area-inset-bottom);
-      margin-left: var(--safe-area-inset-left);
-      margin-right: var(--safe-area-inset-right);
-    }
-
-    dialog.show {
-      transform: translateY(0);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-resizable-bottom-sheet": HaResizableBottomSheet;
-  }
-
-  interface HASSDomEvents {
-    "bottom-sheet-closed": undefined;
-  }
-}
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@@ -246,8 +246,6 @@ export class HaMediaSelector extends LitElement {
      entityId: this._getActiveEntityId(),
      navigateIds: this.value?.metadata?.navigateIds,
      accept: this.selector.media?.accept,
-      defaultId: this.value?.media_content_id,
-      defaultType: this.value?.media_content_type,
      mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
        fireEvent(this, "value-changed", {
          value: {
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -762,7 +762,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
        ha-md-list {
          height: calc(
            100% - var(--header-height) - var(--safe-area-inset-top, 0px) -
-              132px
+              132px - var(--safe-area-inset-bottom, 0px)
          );
        }

--- a/src/components/ha-slider.ts
+++ b/src/components/ha-slider.ts
@@ -1,81 +1,33 @@
-import Slider from "@home-assistant/webawesome/dist/components/slider/slider";
-import { css, type CSSResultGroup } from "lit";
-import { customElement, property } from "lit/decorators";
+import { Slider } from "@material/web/slider/internal/slider";
+import { styles } from "@material/web/slider/internal/slider-styles";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
 import { mainWindow } from "../common/dom/get_main_window";

@customElement("ha-slider")
 export class HaSlider extends Slider {
-  @property({ reflect: true }) size: "small" | "medium" = "small";
-
-  @property({ type: Boolean, attribute: "with-tooltip" }) withTooltip = true;
-
  public connectedCallback() {
    super.connectedCallback();
    this.dir = mainWindow.document.dir;
  }

-  static get styles(): CSSResultGroup {
-    return [
-      Slider.styles,
-      css`
-        :host {
-          --wa-form-control-activated-color: var(--primary-color);
-          --track-size: var(--ha-slider-track-size, 4px);
-          --marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
-          --marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
-          --wa-color-surface-default: var(--card-background-color);
-          --wa-color-neutral-fill-normal: var(--disabled-color);
-          --wa-tooltip-background-color: var(--secondary-background-color);
-          --wa-tooltip-color: var(--primary-text-color);
-          --wa-tooltip-font-family: var(
-            --ha-tooltip-font-family,
-            var(--ha-font-family-body)
-          );
-          --wa-tooltip-font-size: var(
-            --ha-tooltip-font-size,
-            var(--ha-font-size-s)
-          );
-          --wa-tooltip-font-weight: var(
-            --ha-tooltip-font-weight,
-            var(--ha-font-weight-normal)
-          );
-          --wa-tooltip-line-height: var(
-            --ha-tooltip-line-height,
-            var(--ha-line-height-condensed)
-          );
-          --wa-tooltip-padding: 8px;
-          --wa-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px);
-          --wa-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);
-          --wa-z-index-tooltip: var(--ha-tooltip-z-index, 1000);
-          min-width: 100px;
-          min-inline-size: 100px;
-          width: 200px;
-        }
-
-        #thumb {
-          border: none;
-        }
-
-        #slider {
-          &:focus-visible:not(.disabled) #thumb,
-          &:focus-visible:not(.disabled) #thumb-min,
-          &:focus-visible:not(.disabled) #thumb-max {
-            outline: var(--wa-focus-ring);
-          }
-        }
-
-        :host([size="medium"]) {
-          --thumb-width: var(--ha-font-size-l, 1.25em);
-          --thumb-height: var(--ha-font-size-l, 1.25em);
-        }
-
-        :host([size="small"]) {
-          --thumb-width: var(--ha-font-size-m, 1em);
-          --thumb-height: var(--ha-font-size-m, 1em);
-        }
-      `,
-    ];
-  }
+  static override styles = [
+    styles,
+    css`
+      :host {
+        --md-sys-color-primary: var(--primary-color);
+        --md-sys-color-on-primary: var(--text-primary-color);
+        --md-sys-color-outline: var(--outline-color);
+        --md-sys-color-on-surface: var(--primary-text-color);
+        --md-slider-handle-width: 14px;
+        --md-slider-handle-height: 14px;
+        --md-slider-state-layer-size: 24px;
+        min-width: 100px;
+        min-inline-size: 100px;
+        width: 200px;
+      }
+    `,
+  ];
 }

 declare global {
--- a/src/components/ha-top-app-bar-fixed.ts
+++ b/src/components/ha-top-app-bar-fixed.ts
@@ -1,12 +1,10 @@
 import { TopAppBarFixedBase } from "@material/mwc-top-app-bar-fixed/mwc-top-app-bar-fixed-base";
 import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
 import { css } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement } from "lit/decorators";

@customElement("ha-top-app-bar-fixed")
 export class HaTopAppBarFixed extends TopAppBarFixedBase {
-  @property({ type: Boolean, reflect: true }) public narrow = false;
-
  static override styles = [
    styles,
    css`
@@ -15,17 +13,12 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
      }
      .mdc-top-app-bar__row {
        height: var(--header-height);
+        padding-left: var(--safe-area-content-inset-left);
+        padding-right: var(--safe-area-content-inset-right);
        border-bottom: var(--app-header-border-bottom);
      }
      .mdc-top-app-bar--fixed-adjust {
-        padding-top: calc(
-          var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
-        );
-        padding-bottom: var(--safe-area-inset-bottom);
-        padding-right: var(--safe-area-inset-right);
-      }
-      :host([narrow]) .mdc-top-app-bar--fixed-adjust {
-        padding-left: var(--safe-area-inset-left);
+        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
      }
      .mdc-top-app-bar {
        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
@@ -35,10 +28,8 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
          var(--mdc-theme-primary)
        );
        padding-top: var(--safe-area-inset-top);
-        padding-right: var(--safe-area-inset-right);
-      }
-      :host([narrow]) .mdc-top-app-bar {
        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
      }
      .mdc-top-app-bar__title {
        font-size: var(--ha-font-size-xl);
--- a/src/components/ha-two-pane-top-app-bar-fixed.ts
+++ b/src/components/ha-two-pane-top-app-bar-fixed.ts
@@ -32,8 +32,6 @@ export class TopAppBarBaseBase extends BaseElement {

  protected _scrollTarget!: HTMLElement | Window;

-  @property({ type: Boolean, reflect: true }) public narrow = false;
-
  @property({ attribute: "center-title", type: Boolean }) centerTitle = false;

  @property({ type: Boolean, reflect: true }) prominent = false;
@@ -254,14 +252,7 @@ export class TopAppBarBaseBase extends BaseElement {
        border-bottom: var(--app-header-border-bottom);
      }
      .mdc-top-app-bar--fixed-adjust {
-        padding-top: calc(
-          var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
-        );
-        padding-bottom: var(--safe-area-inset-bottom);
-        padding-right: var(--safe-area-inset-right);
-      }
-      :host([narrow]) .mdc-top-app-bar--fixed-adjust {
-        padding-left: var(--safe-area-inset-left);
+        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
      }
      .shadow-container {
        position: absolute;
@@ -287,10 +278,8 @@ export class TopAppBarBaseBase extends BaseElement {
          var(--mdc-theme-primary)
        );
        padding-top: var(--safe-area-inset-top);
-        padding-right: var(--safe-area-inset-right);
-      }
-      :host([narrow]) .mdc-top-app-bar {
        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
      }
      .mdc-top-app-bar--pane.mdc-top-app-bar--fixed-scrolled {
        box-shadow: none;
@@ -305,12 +294,7 @@ export class TopAppBarBaseBase extends BaseElement {
      }
      div.mdc-top-app-bar--pane {
        display: flex;
-        height: calc(
-          100vh - var(--header-height, 0px) - var(
-              --safe-area-inset-top,
-              0px
-            ) - var(--safe-area-inset-bottom, 0px)
-        );
+        height: calc(100vh - var(--header-height));
      }
      .pane {
        border-right: 1px solid var(--divider-color);
--- a/src/components/ha-wa-dialog.ts
+++ b/src/components/ha-wa-dialog.ts
@@ -1,272 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import "@home-assistant/webawesome/dist/components/dialog/dialog";
-import { mdiClose } from "@mdi/js";
-import type { HomeAssistant } from "../types";
-import "./ha-dialog-header";
-import "./ha-icon-button";
-
-export type DialogSize = "small" | "medium" | "large" | "full";
-export type DialogSizeOnTitleClick = DialogSize | "none";
-
-@customElement("ha-wa-dialog")
-export class HaWaDialog extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ type: Boolean, reflect: true })
-  public open = false;
-
-  @property({ type: String, reflect: true, attribute: "dialog-size" })
-  public dialogSize: DialogSize = "medium";
-
-  @property({ type: String, reflect: true, attribute: "current-dialog-size" })
-  public currentDialogSize: DialogSize = this.dialogSize;
-
-  @property({
-    type: String,
-    reflect: true,
-    attribute: "dialog-size-on-title-click",
-  })
-  public dialogSizeOnTitleClick: DialogSizeOnTitleClick = "none";
-
-  // TODO: Should this be scrim, overlay, or match WA with lightDismiss?
-  @property({ type: Boolean, reflect: true, attribute: "scrim-dismissable" })
-  public scrimDismissable = false;
-
-  @property({ type: String, attribute: "header-title" })
-  public headerTitle = "";
-
-  @property({ type: String, attribute: "header-subtitle" })
-  public headerSubtitle = "";
-
-  @property({ type: Boolean, reflect: true, attribute: "flexcontent" })
-  public flexContent = false;
-
-  @state()
-  private _open = false;
-
-  protected updated(
-    changedProperties: Map<string | number | symbol, unknown>
-  ): void {
-    super.updated(changedProperties);
-
-    if (changedProperties.has("open")) {
-      if (this.open) {
-        this._open = this.open;
-      }
-    }
-
-    if (changedProperties.has("dialogSize")) {
-      this.currentDialogSize = this.dialogSize;
-    }
-  }
-
-  protected render() {
-    return html`
-      <wa-dialog
-        .open=${this._open}
-        .lightDismiss=${this.scrimDismissable}
-        .withoutHeader=${true}
-        @wa-show=${this._handleShow}
-        @wa-after-hide=${this._handleAfterHide}
-      >
-        <slot name="heading">
-          <ha-dialog-header>
-            <slot name="navigationIcon" slot="navigationIcon">
-              <ha-icon-button
-                data-dialog="close"
-                .label=${this.hass?.localize("ui.common.close") ?? "Close"}
-                .path=${mdiClose}
-              ></ha-icon-button>
-            </slot>
-            <slot name="title" slot="title">
-              <span @click=${this.toggleSize} class="title">
-                ${this.headerTitle}
-              </span>
-            </slot>
-            <slot name="subtitle" slot="subtitle">
-              <span>${this.headerSubtitle}</span>
-            </slot>
-            <slot name="actionItems" slot="actionItems"> </slot>
-          </ha-dialog-header>
-        </slot>
-        <div class="body ha-scrollbar">
-          <slot></slot>
-        </div>
-        <slot name="footer" slot="footer"></slot>
-      </wa-dialog>
-    `;
-  }
-
-  private _handleShow = () => {
-    this._open = true;
-    this.dispatchEvent(new CustomEvent("opened"));
-
-    this.updateComplete.then(() => {
-      const focusElement = this.querySelector(
-        "[dialogInitialFocus]"
-      ) as HTMLElement;
-      focusElement?.focus();
-    });
-  };
-
-  private _handleAfterHide = () => {
-    this._open = false;
-    this.dispatchEvent(new CustomEvent("closed"));
-  };
-
-  public toggleSize = () => {
-    if (this.dialogSizeOnTitleClick === "none") {
-      return;
-    }
-
-    this.currentDialogSize =
-      this.currentDialogSize === this.dialogSizeOnTitleClick
-        ? this.dialogSize
-        : this.dialogSizeOnTitleClick;
-  };
-
-  static override styles = css`
-    :host([scrolled]) wa-dialog::part(header) {
-      max-width: 100%;
-      border-bottom: 1px solid
-        var(--dialog-scroll-divider-color, var(--divider-color));
-    }
-
-    wa-dialog {
-      --full-width: min(
-        calc(
-          100vw - var(--safe-area-inset-left, 0px) - var(
-              --safe-area-inset-right,
-              0px
-            )
-        ),
-        95vw
-      );
-      --width: min(580px, 95vw);
-      --spacing: var(--dialog-content-padding, 24px);
-      --show-duration: var(--ha-dialog-show-duration, 200ms);
-      --hide-duration: var(--ha-dialog-hide-duration, 200ms);
-      --wa-color-surface-raised: var(
-        --ha-dialog-surface-background,
-        var(--mdc-theme-surface, #fff)
-      );
-      --wa-panel-border-radius: var(--ha-dialog-border-radius, 24px);
-      z-index: var(--dialog-z-index, 8);
-      max-width: 100%;
-    }
-
-    :host([current-dialog-size="small"]) wa-dialog {
-      --width: min(320px, var(--full-width));
-    }
-
-    :host([current-dialog-size="large"]) wa-dialog {
-      --width: min(720px, var(--full-width));
-    }
-
-    :host([current-dialog-size="full"]) wa-dialog {
-      --width: var(--full-width);
-    }
-
-    wa-dialog::part(dialog) {
-      min-width: var(--width, var(--full-width));
-      max-width: var(--width, var(--full-width));
-      max-height: 100vh;
-      position: var(--dialog-surface-position, relative);
-      margin-top: var(--dialog-surface-margin-top, auto);
-      transition:
-        min-width var(--ha-dialog-expand-duration, 200ms) ease-in-out,
-        max-width var(--ha-dialog-expand-duration, 200ms) ease-in-out;
-    }
-
-    @media all and (max-width: 450px), all and (max-height: 500px) {
-      :host {
-        --ha-dialog-border-radius: 0px;
-      }
-
-      wa-dialog::part(dialog) {
-        min-height: 100vh;
-      }
-    }
-
-    wa-dialog::part(header) {
-      max-width: 100%;
-      overflow: hidden;
-      display: flex;
-      align-items: center;
-      padding: 24px 24px 16px 24px;
-      gap: 4px;
-    }
-    :host([has-custom-heading]) wa-dialog::part(header) {
-      max-width: 100%;
-      padding: 0;
-    }
-
-    wa-dialog::part(close-button),
-    wa-dialog::part(close-button__base) {
-      display: none;
-    }
-
-    .header-title-container {
-      display: flex;
-      align-items: center;
-    }
-
-    .header-title {
-      margin: 0;
-      margin-bottom: 0;
-      color: var(--mdc-dialog-heading-ink-color, rgba(0, 0, 0, 0.87));
-      font-size: var(--mdc-typography-headline6-font-size, 1.574rem);
-      line-height: var(--mdc-typography-headline6-line-height, 2rem);
-      font-weight: var(
-        --mdc-typography-headline6-font-weight,
-        var(--ha-font-weight-normal)
-      );
-      letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
-      text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
-      text-transform: var(--mdc-typography-headline6-text-transform, inherit);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      margin-right: 12px;
-    }
-
-    wa-dialog::part(body) {
-      padding: 0;
-    }
-
-    .body {
-      position: var(--dialog-content-position, relative);
-      padding: 0 var(--dialog-content-padding, 24px)
-        var(--dialog-content-padding, 24px) var(--dialog-content-padding, 24px);
-    }
-    :host([flexcontent]) wa-dialog::part(body) {
-      max-width: 100%;
-      overflow: auto;
-      display: flex;
-      flex-direction: column;
-    }
-    :host([hideactions]) wa-dialog::part(body) {
-      padding-bottom: var(--dialog-content-padding, 24px);
-    }
-
-    wa-dialog::part(footer) {
-      padding: 0;
-    }
-
-    ::slotted([slot="footer"]) {
-      display: flex;
-      padding: 12px 16px 16px 16px;
-      gap: 12px;
-      justify-content: flex-end;
-      align-items: center;
-      width: 100%;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-wa-dialog": HaWaDialog;
-  }
-}
--- a/src/components/media-player/dialog-media-player-browse.ts
+++ b/src/components/media-player/dialog-media-player-browse.ts
@@ -165,8 +165,6 @@ class DialogMediaPlayerBrowse extends LitElement {
          .action=${this._action}
          .preferredLayout=${this._preferredLayout}
          .accept=${this._params.accept}
-          .defaultId=${this._params.defaultId}
-          .defaultType=${this._params.defaultType}
          @close-dialog=${this.closeDialog}
          @media-picked=${this._mediaPicked}
          @media-browsed=${this._mediaBrowsed}
--- a/src/components/media-player/ha-browse-media-manual.ts
+++ b/src/components/media-player/ha-browse-media-manual.ts
@@ -1,112 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../common/dom/fire_event";
-import type { HomeAssistant } from "../../types";
-import "../ha-button";
-import "../ha-card";
-import "../ha-form/ha-form";
-import type { SchemaUnion } from "../ha-form/types";
-import type { MediaPlayerItemId } from "./ha-media-player-browse";
-
-export interface ManualMediaPickedEvent {
-  item: MediaPlayerItemId;
-}
-
-@customElement("ha-browse-media-manual")
-class BrowseMediaManual extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public item!: MediaPlayerItemId;
-
-  private _schema = memoizeOne(
-    () =>
-      [
-        {
-          name: "media_content_id",
-          required: true,
-          selector: {
-            text: {},
-          },
-        },
-        {
-          name: "media_content_type",
-          required: false,
-          selector: {
-            text: {},
-          },
-        },
-      ] as const
-  );
-
-  protected render() {
-    return html`
-      <ha-card>
-        <div class="card-content">
-          <ha-form
-            .hass=${this.hass}
-            .schema=${this._schema()}
-            .data=${this.item}
-            .computeLabel=${this._computeLabel}
-            .computeHelper=${this._computeHelper}
-            @value-changed=${this._valueChanged}
-          ></ha-form>
-        </div>
-        <div class="card-actions">
-          <ha-button @click=${this._mediaPicked}>
-            ${this.hass.localize("ui.common.submit")}
-          </ha-button>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private _valueChanged(ev: CustomEvent) {
-    const value = { ...ev.detail.value };
-
-    this.item = value;
-  }
-
-  private _computeLabel = (
-    entry: SchemaUnion<ReturnType<typeof this._schema>>
-  ): string =>
-    this.hass.localize(`ui.components.selectors.media.${entry.name}`);
-
-  private _computeHelper = (
-    entry: SchemaUnion<ReturnType<typeof this._schema>>
-  ): string =>
-    this.hass.localize(`ui.components.selectors.media.${entry.name}_detail`);
-
-  private _mediaPicked() {
-    fireEvent(this, "manual-media-picked", {
-      item: {
-        media_content_id: this.item.media_content_id || "",
-        media_content_type: this.item.media_content_type || "",
-      },
-    });
-  }
-
-  static override styles = css`
-    :host {
-      margin: 16px auto;
-      padding: 0 8px;
-      display: flex;
-      flex-direction: column;
-      max-width: 448px;
-    }
-    .card-actions {
-      display: flex;
-      justify-content: flex-end;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-browse-media-manual": BrowseMediaManual;
-  }
-
-  interface HASSDomEvents {
-    "manual-media-picked": ManualMediaPickedEvent;
-  }
-}
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -1,7 +1,7 @@
 import type { LitVirtualizer } from "@lit-labs/virtualizer";
 import { grid } from "@lit-labs/virtualizer/layouts/grid";

-import { mdiArrowUpRight, mdiPlay, mdiPlus, mdiKeyboard } from "@mdi/js";
+import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import {
@@ -28,11 +28,7 @@ import {
  BROWSER_PLAYER,
  MediaClassBrowserSettings,
 } from "../../data/media-player";
-import {
-  browseLocalMediaPlayer,
-  isManualMediaSourceContentId,
-  MANUAL_MEDIA_SOURCE_PREFIX,
-} from "../../data/media_source";
+import { browseLocalMediaPlayer } from "../../data/media_source";
 import { isTTSMediaSource } from "../../data/tts";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../resources/styles";
@@ -57,9 +53,7 @@ import "../ha-spinner";
 import "../ha-svg-icon";
 import "../ha-tooltip";
 import "./ha-browse-media-tts";
-import "./ha-browse-media-manual";
 import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
-import type { ManualMediaPickedEvent } from "./ha-browse-media-manual";

 declare global {
  interface HASSDomEvents {
@@ -80,18 +74,6 @@ export interface MediaPlayerItemId {
  media_content_type: string | undefined;
 }

-const MANUAL_ITEM: MediaPlayerItem = {
-  can_expand: true,
-  can_play: false,
-  can_search: false,
-  children_media_class: "",
-  media_class: "app",
-  media_content_id: MANUAL_MEDIA_SOURCE_PREFIX,
-  media_content_type: "",
-  iconPath: mdiKeyboard,
-  title: "Manual entry",
-};
-
@customElement("ha-media-player-browse")
 export class HaMediaPlayerBrowse extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -109,10 +91,6 @@ export class HaMediaPlayerBrowse extends LitElement {

  @property({ attribute: false }) public accept?: string[];

-  @property({ attribute: false }) public defaultId?: string;
-
-  @property({ attribute: false }) public defaultType?: string;
-
  // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
  @property({ type: Boolean, reflect: true }) public narrow = false;

@@ -238,69 +216,56 @@ export class HaMediaPlayerBrowse extends LitElement {
      }
    }
    // Fetch current
-    if (
-      currentId.media_content_id &&
-      isManualMediaSourceContentId(currentId.media_content_id)
-    ) {
-      this._currentItem = MANUAL_ITEM;
-      fireEvent(this, "media-browsed", {
-        ids: navigateIds,
-        current: this._currentItem,
-      });
-    } else {
-      if (!currentProm) {
-        currentProm = this._fetchData(
-          this.entityId,
-          currentId.media_content_id,
-          currentId.media_content_type
-        );
-      }
-      currentProm.then(
-        (item) => {
-          this._currentItem = item;
-          fireEvent(this, "media-browsed", {
-            ids: navigateIds,
-            current: item,
-          });
-        },
-        (err) => {
-          // When we change entity ID, we will first try to see if the new entity is
-          // able to resolve the new path. If that results in an error, browse the root.
-          const isNewEntityWithSamePath =
-            oldNavigateIds &&
-            changedProps.has("entityId") &&
-            navigateIds.length === oldNavigateIds.length &&
-            oldNavigateIds.every(
-              (oldItem, idx) =>
-                navigateIds[idx].media_content_id ===
-                  oldItem.media_content_id &&
-                navigateIds[idx].media_content_type ===
-                  oldItem.media_content_type
-            );
-          if (isNewEntityWithSamePath) {
-            fireEvent(this, "media-browsed", {
-              ids: [
-                { media_content_id: undefined, media_content_type: undefined },
-              ],
-              replace: true,
-            });
-          } else if (
-            err.code === "entity_not_found" &&
-            this.entityId &&
-            isUnavailableState(this.hass.states[this.entityId]?.state)
-          ) {
-            this._setError({
-              message: this.hass.localize(
-                `ui.components.media-browser.media_player_unavailable`
-              ),
-              code: "entity_not_found",
-            });
-          } else {
-            this._setError(err);
-          }
-        }
+    if (!currentProm) {
+      currentProm = this._fetchData(
+        this.entityId,
+        currentId.media_content_id,
+        currentId.media_content_type
      );
    }
+    currentProm.then(
+      (item) => {
+        this._currentItem = item;
+        fireEvent(this, "media-browsed", {
+          ids: navigateIds,
+          current: item,
+        });
+      },
+      (err) => {
+        // When we change entity ID, we will first try to see if the new entity is
+        // able to resolve the new path. If that results in an error, browse the root.
+        const isNewEntityWithSamePath =
+          oldNavigateIds &&
+          changedProps.has("entityId") &&
+          navigateIds.length === oldNavigateIds.length &&
+          oldNavigateIds.every(
+            (oldItem, idx) =>
+              navigateIds[idx].media_content_id === oldItem.media_content_id &&
+              navigateIds[idx].media_content_type === oldItem.media_content_type
+          );
+        if (isNewEntityWithSamePath) {
+          fireEvent(this, "media-browsed", {
+            ids: [
+              { media_content_id: undefined, media_content_type: undefined },
+            ],
+            replace: true,
+          });
+        } else if (
+          err.code === "entity_not_found" &&
+          this.entityId &&
+          isUnavailableState(this.hass.states[this.entityId]?.state)
+        ) {
+          this._setError({
+            message: this.hass.localize(
+              `ui.components.media-browser.media_player_unavailable`
+            ),
+            code: "entity_not_found",
+          });
+        } else {
+          this._setError(err);
+        }
+      }
+    );
    // Fetch parent
    if (!parentProm && parentId !== undefined) {
      parentProm = this._fetchData(
@@ -514,120 +479,111 @@ export class HaMediaPlayerBrowse extends LitElement {
                      </ha-alert>
                    </div>
                  `
-                : isManualMediaSourceContentId(currentItem.media_content_id)
-                  ? html`<ha-browse-media-manual
-                      .item=${{
-                        media_content_id: this.defaultId || "",
-                        media_content_type: this.defaultType || "",
-                      }}
-                      .hass=${this.hass}
-                      @manual-media-picked=${this._manualPicked}
-                    ></ha-browse-media-manual>`
-                  : isTTSMediaSource(currentItem.media_content_id)
+                : isTTSMediaSource(currentItem.media_content_id)
+                  ? html`
+                      <ha-browse-media-tts
+                        .item=${currentItem}
+                        .hass=${this.hass}
+                        .action=${this.action}
+                        @tts-picked=${this._ttsPicked}
+                      ></ha-browse-media-tts>
+                    `
+                  : !children.length && !currentItem.not_shown
                    ? html`
-                        <ha-browse-media-tts
-                          .item=${currentItem}
-                          .hass=${this.hass}
-                          .action=${this.action}
-                          @tts-picked=${this._ttsPicked}
-                        ></ha-browse-media-tts>
+                        <div class="container no-items">
+                          ${currentItem.media_content_id ===
+                          "media-source://media_source/local/."
+                            ? html`
+                                <div class="highlight-add-button">
+                                  <span>
+                                    <ha-svg-icon
+                                      .path=${mdiArrowUpRight}
+                                    ></ha-svg-icon>
+                                  </span>
+                                  <span>
+                                    ${this.hass.localize(
+                                      "ui.components.media-browser.file_management.highlight_button"
+                                    )}
+                                  </span>
+                                </div>
+                              `
+                            : this.hass.localize(
+                                "ui.components.media-browser.no_items"
+                              )}
+                        </div>
                      `
-                    : !children.length && !currentItem.not_shown
+                    : this.preferredLayout === "grid" ||
+                        (this.preferredLayout === "auto" &&
+                          childrenMediaClass.layout === "grid")
                      ? html`
-                          <div class="container no-items">
-                            ${currentItem.media_content_id ===
-                            "media-source://media_source/local/."
-                              ? html`
-                                  <div class="highlight-add-button">
-                                    <span>
-                                      <ha-svg-icon
-                                        .path=${mdiArrowUpRight}
-                                      ></ha-svg-icon>
-                                    </span>
-                                    <span>
-                                      ${this.hass.localize(
-                                        "ui.components.media-browser.file_management.highlight_button"
-                                      )}
-                                    </span>
+                          <lit-virtualizer
+                            scroller
+                            .layout=${grid({
+                              itemSize: {
+                                width: "175px",
+                                height:
+                                  childrenMediaClass.thumbnail_ratio ===
+                                  "portrait"
+                                    ? "312px"
+                                    : "225px",
+                              },
+                              gap: "16px",
+                              flex: { preserve: "aspect-ratio" },
+                              justify: "space-evenly",
+                              direction: "vertical",
+                            })}
+                            .items=${children}
+                            .renderItem=${this._renderGridItem}
+                            class="children ${classMap({
+                              portrait:
+                                childrenMediaClass.thumbnail_ratio ===
+                                "portrait",
+                              not_shown: !!currentItem.not_shown,
+                            })}"
+                          ></lit-virtualizer>
+                          ${currentItem.not_shown
+                            ? html`
+                                <div class="grid not-shown">
+                                  <div class="title">
+                                    ${this.hass.localize(
+                                      "ui.components.media-browser.not_shown",
+                                      { count: currentItem.not_shown }
+                                    )}
                                  </div>
-                                `
-                              : this.hass.localize(
-                                  "ui.components.media-browser.no_items"
-                                )}
-                          </div>
+                                </div>
+                              `
+                            : ""}
                        `
-                      : this.preferredLayout === "grid" ||
-                          (this.preferredLayout === "auto" &&
-                            childrenMediaClass.layout === "grid")
-                        ? html`
+                      : html`
+                          <ha-list>
                            <lit-virtualizer
                              scroller
-                              .layout=${grid({
-                                itemSize: {
-                                  width: "175px",
-                                  height:
-                                    childrenMediaClass.thumbnail_ratio ===
-                                    "portrait"
-                                      ? "312px"
-                                      : "225px",
-                                },
-                                gap: "16px",
-                                flex: { preserve: "aspect-ratio" },
-                                justify: "space-evenly",
-                                direction: "vertical",
-                              })}
                              .items=${children}
-                              .renderItem=${this._renderGridItem}
-                              class="children ${classMap({
-                                portrait:
-                                  childrenMediaClass.thumbnail_ratio ===
-                                  "portrait",
-                                not_shown: !!currentItem.not_shown,
-                              })}"
+                              style=${styleMap({
+                                height: `${children.length * 72 + 26}px`,
+                              })}
+                              .renderItem=${this._renderListItem}
                            ></lit-virtualizer>
                            ${currentItem.not_shown
                              ? html`
-                                  <div class="grid not-shown">
-                                    <div class="title">
+                                  <ha-list-item
+                                    noninteractive
+                                    class="not-shown"
+                                    .graphic=${mediaClass.show_list_images
+                                      ? "medium"
+                                      : "avatar"}
+                                  >
+                                    <span class="title">
                                      ${this.hass.localize(
                                        "ui.components.media-browser.not_shown",
                                        { count: currentItem.not_shown }
                                      )}
-                                    </div>
-                                  </div>
+                                    </span>
+                                  </ha-list-item>
                                `
                              : ""}
-                          `
-                        : html`
-                            <ha-list>
-                              <lit-virtualizer
-                                scroller
-                                .items=${children}
-                                style=${styleMap({
-                                  height: `${children.length * 72 + 26}px`,
-                                })}
-                                .renderItem=${this._renderListItem}
-                              ></lit-virtualizer>
-                              ${currentItem.not_shown
-                                ? html`
-                                    <ha-list-item
-                                      noninteractive
-                                      class="not-shown"
-                                      .graphic=${mediaClass.show_list_images
-                                        ? "medium"
-                                        : "avatar"}
-                                    >
-                                      <span class="title">
-                                        ${this.hass.localize(
-                                          "ui.components.media-browser.not_shown",
-                                          { count: currentItem.not_shown }
-                                        )}
-                                      </span>
-                                    </ha-list-item>
-                                  `
-                                : ""}
-                            </ha-list>
-                          `
+                          </ha-list>
+                        `
            }
          </div>
        </div>
@@ -661,9 +617,8 @@ export class HaMediaPlayerBrowse extends LitElement {
              : html`
                  <div class="icon-holder image">
                    <ha-svg-icon
-                      class=${child.iconPath ? "icon" : "folder"}
-                      .path=${child.iconPath ||
-                      MediaClassBrowserSettings[
+                      class="folder"
+                      .path=${MediaClassBrowserSettings[
                        child.media_class === "directory"
                          ? child.children_media_class || child.media_class
                          : child.media_class
@@ -813,14 +768,6 @@ export class HaMediaPlayerBrowse extends LitElement {
    });
  }

-  private _manualPicked(ev: CustomEvent<ManualMediaPickedEvent>) {
-    ev.stopPropagation();
-    fireEvent(this, "media-picked", {
-      item: ev.detail.item as MediaPlayerItem,
-      navigateIds: this.navigateIds,
-    });
-  }
-
  private _childClicked = async (ev: MouseEvent): Promise<void> => {
    const target = ev.currentTarget as any;
    const item: MediaPlayerItem = target.item;
@@ -844,23 +791,9 @@ export class HaMediaPlayerBrowse extends LitElement {
    mediaContentId?: string,
    mediaContentType?: string
  ): Promise<MediaPlayerItem> {
-    const prom =
-      entityId && entityId !== BROWSER_PLAYER
-        ? browseMediaPlayer(
-            this.hass,
-            entityId,
-            mediaContentId,
-            mediaContentType
-          )
-        : browseLocalMediaPlayer(this.hass, mediaContentId);
-
-    return prom.then((item) => {
-      if (!mediaContentId && this.action === "pick") {
-        item.children = item.children || [];
-        item.children.push(MANUAL_ITEM);
-      }
-      return item;
-    });
+    return entityId && entityId !== BROWSER_PLAYER
+      ? browseMediaPlayer(this.hass, entityId, mediaContentId, mediaContentType)
+      : browseLocalMediaPlayer(this.hass, mediaContentId);
  }

  private _measureCard(): void {
@@ -1208,11 +1141,6 @@ export class HaMediaPlayerBrowse extends LitElement {
          --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
        }

-        .child .icon {
-          color: #00a9f7; /* Match the png color from brands repo */
-          --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
-        }
-
        .child .play {
          position: absolute;
          transition: color 0.5s;
--- a/src/components/media-player/show-media-browser-dialog.ts
+++ b/src/components/media-player/show-media-browser-dialog.ts
@@ -12,8 +12,6 @@ export interface MediaPlayerBrowseDialogParams {
  navigateIds?: MediaPlayerItemId[];
  minimumNavigateLevel?: number;
  accept?: string[];
-  defaultId?: string;
-  defaultType?: string;
 }

 export const showMediaBrowserDialog = (
--- a/src/components/tile/ha-tile-info.ts
+++ b/src/components/tile/ha-tile-info.ts
@@ -1,21 +1,20 @@
-import { css, html, LitElement } from "lit";
+import type { TemplateResult } from "lit";
+import { html, css, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";

@customElement("ha-tile-info")
 export class HaTileInfo extends LitElement {
  @property() public primary?: string;

-  @property() public secondary?: string;
+  @property() public secondary?: string | TemplateResult<1>;

  protected render() {
    return html`
      <div class="info">
-        <slot name="primary" class="primary">
-          <span>${this.primary}</span>
-        </slot>
-        <slot name="secondary" class="secondary">
-          <span>${this.secondary}</span>
-        </slot>
+        <span class="primary">${this.primary}</span>
+        ${this.secondary
+          ? html`<span class="secondary">${this.secondary}</span>`
+          : nothing}
      </div>
    `;
  }
@@ -28,8 +27,7 @@ export class HaTileInfo extends LitElement {
      align-items: flex-start;
      justify-content: center;
    }
-    span,
-    ::slotted(*) {
+    span {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
--- a/src/data/entity_attributes.ts
+++ b/src/data/entity_attributes.ts
@@ -115,9 +115,6 @@ export const DOMAIN_ATTRIBUTES_FORMATERS: Record<
      return formatDurationDigital(locale, { hours, minutes, seconds })!;
    },
  },
-  input_datetime: {
-    year: (value) => value.toString(),
-  },
 };

 export const NON_NUMERIC_ATTRIBUTES = [
--- a/src/data/logbook.ts
+++ b/src/data/logbook.ts
@@ -8,12 +8,12 @@ import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { autoCaseNoun } from "../common/translations/auto_case_noun";
 import type { LocalizeFunc } from "../common/translations/localize";
+import type { HaEntityPickerEntityFilterFunc } from "../components/entity/ha-entity-picker";
 import type { HomeAssistant } from "../types";
 import { UNAVAILABLE, UNKNOWN } from "./entity";
-import { isNumericEntity } from "./history";

 const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages";
-export const CONTINUOUS_DOMAINS = ["counter", "proximity"];
+export const CONTINUOUS_DOMAINS = ["counter", "proximity", "sensor", "zone"];

 export interface LogbookStreamMessage {
  events: LogbookEntry[];
@@ -326,14 +326,9 @@ export const localizeStateMessage = (
  });
 };

-export const filterLogbookCompatibleEntities = (
-  entity,
-  sensorNumericDeviceClasses: string[] = []
-) => {
-  const domain = computeStateDomain(entity);
-  const continuous =
-    CONTINUOUS_DOMAINS.includes(domain) ||
-    (domain === "sensor" &&
-      isNumericEntity(domain, entity, undefined, sensorNumericDeviceClasses));
-  return !continuous;
-};
+export const filterLogbookCompatibleEntities: HaEntityPickerEntityFilterFunc = (
+  entity
+) =>
+  computeStateDomain(entity) !== "sensor" ||
+  (entity.attributes.unit_of_measurement === undefined &&
+    entity.attributes.state_class === undefined);
--- a/src/data/lovelace/config/card.ts
+++ b/src/data/lovelace/config/card.ts
@@ -14,5 +14,4 @@ export interface LovelaceCardConfig {
  type: string;
  [key: string]: any;
  visibility?: Condition[];
-  disabled?: boolean;
 }
--- a/src/data/lovelace/config/section.ts
+++ b/src/data/lovelace/config/section.ts
@@ -4,7 +4,6 @@ import type { LovelaceStrategyConfig } from "./strategy";

 export interface LovelaceBaseSectionConfig {
  visibility?: Condition[];
-  disabled?: boolean;
  column_span?: number;
  row_span?: number;
  /**
--- a/src/data/media-player.ts
+++ b/src/data/media-player.ts
@@ -199,12 +199,10 @@ export interface MediaPlayerItem {
  media_content_type: string;
  media_content_id: string;
  media_class: keyof TranslationDict["ui"]["components"]["media-browser"]["class"];
-  children_media_class?: string | null;
+  children_media_class?: string;
  can_play: boolean;
  can_expand: boolean;
-  can_search: boolean;
  thumbnail?: string;
-  iconPath?: string;
  children?: MediaPlayerItem[];
  not_shown?: number;
 }
--- a/src/data/media_source.ts
+++ b/src/data/media_source.ts
@@ -24,11 +24,6 @@ export const browseLocalMediaPlayer = (
    media_content_id: mediaContentId,
  });

-export const MANUAL_MEDIA_SOURCE_PREFIX = "__MANUAL_ENTRY__";
-
-export const isManualMediaSourceContentId = (mediaContentId: string) =>
-  mediaContentId.startsWith(MANUAL_MEDIA_SOURCE_PREFIX);
-
 export const isMediaSourceContentId = (mediaId: string) =>
  mediaId.startsWith("media-source://");

--- a/src/data/selector/format_selector_value.ts
+++ b/src/data/selector/format_selector_value.ts
@@ -1,5 +1,8 @@
 import { ensureArray } from "../../common/array/ensure-array";
 import { computeAreaName } from "../../common/entity/compute_area_name";
+import { computeDeviceName } from "../../common/entity/compute_device_name";
+import { computeEntityName } from "../../common/entity/compute_entity_name";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
 import type { HomeAssistant } from "../../types";
 import type { Selector } from "../selector";
@@ -76,8 +79,10 @@ export const formatSelectorValue = (
        if (!stateObj) {
          return entityId;
        }
-        const name = hass.formatEntityName(stateObj, ["device", "entity"], " ");
-        return name || entityId;
+        const { device } = getEntityContext(stateObj, hass);
+        const deviceName = device ? computeDeviceName(device) : undefined;
+        const entityName = computeEntityName(stateObj, hass);
+        return [deviceName, entityName].filter(Boolean).join(" ") || entityId;
      })
      .join(", ");
  }
--- a/src/data/usage_prediction.ts
+++ b/src/data/usage_prediction.ts
@@ -1,10 +0,0 @@
-import type { HomeAssistant } from "../types";
-
-export interface CommonControlResult {
-  entities: string[];
-}
-
-export const getCommonControlUsagePrediction = (hass: HomeAssistant) =>
-  hass.callWS<CommonControlResult>({
-    type: "usage_prediction/common_control",
-  });
--- a/src/dialogs/config-flow/step-flow-menu.ts
+++ b/src/dialogs/config-flow/step-flow-menu.ts
@@ -87,7 +87,6 @@ class StepFlowMenu extends LitElement {
              .step=${option}
              @click=${this._handleStep}
              ?twoline=${optionDescriptions[option]}
-              ?multiline-secondary=${optionDescriptions[option]}
            >
              <span>${translations[option]}</span>
              ${optionDescriptions[option]
--- a/src/dialogs/dialog-list-items/dialog-list-items.ts
+++ b/src/dialogs/dialog-list-items/dialog-list-items.ts
@@ -1,7 +1,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-bottom-sheet";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-icon";
 import "../../components/ha-md-list";
@@ -41,54 +40,6 @@ export class ListItemsDialog
      return nothing;
    }

-    const content = html`
-      <div class="container">
-        <ha-md-list>
-          ${this._params.items.map(
-            (item) => html`
-              <ha-md-list-item
-                type="button"
-                @click=${this._itemClicked}
-                .item=${item}
-              >
-                ${item.iconPath
-                  ? html`
-                      <ha-svg-icon
-                        .path=${item.iconPath}
-                        slot="start"
-                        class="item-icon"
-                      ></ha-svg-icon>
-                    `
-                  : item.icon
-                    ? html`
-                        <ha-icon
-                          icon=${item.icon}
-                          slot="start"
-                          class="item-icon"
-                        ></ha-icon>
-                      `
-                    : nothing}
-                <span class="headline">${item.label}</span>
-                ${item.description
-                  ? html`
-                      <span class="supporting-text">${item.description}</span>
-                    `
-                  : nothing}
-              </ha-md-list-item>
-            `
-          )}
-        </ha-md-list>
-      </div>
-    `;
-
-    if (this._params.mode === "bottom-sheet") {
-      return html`
-        <ha-bottom-sheet placement="bottom" open @closed=${this._dialogClosed}>
-          ${content}
-        </ha-bottom-sheet>
-      `;
-    }
-
    return html`
      <ha-dialog
        open
@@ -96,7 +47,43 @@ export class ListItemsDialog
        @closed=${this._dialogClosed}
        hideActions
      >
-        ${content}
+        <div class="container">
+          <ha-md-list>
+            ${this._params.items.map(
+              (item) => html`
+                <ha-md-list-item
+                  type="button"
+                  @click=${this._itemClicked}
+                  .item=${item}
+                >
+                  ${item.iconPath
+                    ? html`
+                        <ha-svg-icon
+                          .path=${item.iconPath}
+                          slot="start"
+                          class="item-icon"
+                        ></ha-svg-icon>
+                      `
+                    : item.icon
+                      ? html`
+                          <ha-icon
+                            icon=${item.icon}
+                            slot="start"
+                            class="item-icon"
+                          ></ha-icon>
+                        `
+                      : nothing}
+                  <span class="headline">${item.label}</span>
+                  ${item.description
+                    ? html`
+                        <span class="supporting-text">${item.description}</span>
+                      `
+                    : nothing}
+                </ha-md-list-item>
+              `
+            )}
+          </ha-md-list>
+        </div>
      </ha-dialog>
    `;
  }
--- a/src/dialogs/dialog-list-items/show-list-items-dialog.ts
+++ b/src/dialogs/dialog-list-items/show-list-items-dialog.ts
@@ -11,7 +11,6 @@ interface ListItem {
 export interface ListItemsDialogParams {
  title?: string;
  items: ListItem[];
-  mode?: "dialog" | "bottom-sheet";
 }

 export const showListItemsDialog = (
--- a/src/dialogs/more-info/const.ts
+++ b/src/dialogs/more-info/const.ts
@@ -116,8 +116,7 @@ export const computeShowLogBookComponent = (

  const domain = computeDomain(entityId);
  if (
-    CONTINUOUS_DOMAINS.includes(domain) ||
-    (domain === "sensor" &&
+    (CONTINUOUS_DOMAINS.includes(domain) &&
      isNumericEntity(
        domain,
        stateObj,
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -23,12 +23,19 @@ import { stopPropagation } from "../../common/dom/stop_propagation";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { computeEntityEntryName } from "../../common/entity/compute_entity_name";
-import { getEntityEntryContext } from "../../common/entity/context/get_entity_context";
+import {
+  computeEntityEntryName,
+  computeEntityName,
+} from "../../common/entity/compute_entity_name";
+import {
+  getEntityContext,
+  getEntityEntryContext,
+} from "../../common/entity/context/get_entity_context";
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
 import { navigate } from "../../common/navigate";
 import "../../components/ha-button-menu";
-import "../../components/ha-wa-dialog";
+import "../../components/ha-dialog";
+import "../../components/ha-dialog-header";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-prev";
 import "../../components/ha-list-item";
@@ -89,6 +96,8 @@ const DEFAULT_VIEW: View = "info";
 export class MoreInfoDialog extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

+  @property({ type: Boolean, reflect: true }) public large = false;
+
  @state() private _parentEntityIds: string[] = [];

  @state() private _entityId?: string | null;
@@ -116,6 +125,7 @@ export class MoreInfoDialog extends LitElement {
    this._currView = params.view || DEFAULT_VIEW;
    this._initialView = params.view || DEFAULT_VIEW;
    this._childView = undefined;
+    this.large = false;
    this._loadEntityRegistryEntry();
  }

@@ -312,28 +322,22 @@ export class MoreInfoDialog extends LitElement {
      (isDefaultView && this._parentEntityIds.length === 0) ||
      isSpecificInitialView;

-    let entityName: string | undefined;
-    let deviceName: string | undefined;
-    let areaName: string | undefined;
+    const context = stateObj
+      ? getEntityContext(stateObj, this.hass)
+      : this._entry
+        ? getEntityEntryContext(this._entry, this.hass)
+        : undefined;

-    if (stateObj) {
-      entityName = this.hass.formatEntityName(stateObj, "entity");
-      deviceName = this.hass.formatEntityName(stateObj, "device");
-      areaName = this.hass.formatEntityName(stateObj, "area");
-    } else if (this._entry) {
-      const { device, area } = getEntityEntryContext(
-        this._entry,
-        this.hass.entities,
-        this.hass.devices,
-        this.hass.areas,
-        this.hass.floors
-      );
-      entityName = computeEntityEntryName(this._entry, this.hass.devices);
-      deviceName = device ? computeDeviceName(device) : undefined;
-      areaName = area ? computeAreaName(area) : undefined;
-    } else {
-      entityName = entityId;
-    }
+    const entityName = stateObj
+      ? computeEntityName(stateObj, this.hass)
+      : this._entry
+        ? computeEntityEntryName(this._entry, this.hass)
+        : entityId;
+
+    const deviceName = context?.device
+      ? computeDeviceName(context.device)
+      : undefined;
+    const areaName = context?.area ? computeAreaName(context.area) : undefined;

    const breadcrumb = [areaName, deviceName, entityName].filter(
      (v): v is string => Boolean(v)
@@ -341,202 +345,200 @@ export class MoreInfoDialog extends LitElement {
    const title = this._childView?.viewTitle || breadcrumb.pop() || entityId;

    return html`
-      <ha-wa-dialog
+      <ha-dialog
        open
        @closed=${this.closeDialog}
        @opened=${this._handleOpened}
-        .backLabel=${this.hass.localize(
-          "ui.dialogs.more_info_control.back_to_info"
-        )}
-        .backAction=${showCloseIcon ? undefined : this._goBack}
-        .headerTitle=${title}
-        .scrimDismissable=${this._isEscapeEnabled}
-        .dialogSizeOnTitleClick=${"full"}
+        .escapeKeyAction=${this._isEscapeEnabled ? undefined : ""}
+        .heading=${title}
+        hideActions
        flexContent
      >
-        ${showCloseIcon
-          ? html`
-              <ha-icon-button
-                slot="navigationIcon"
-                data-dialog="close"
-                .label=${this.hass.localize("ui.common.close")}
-                .path=${mdiClose}
-              ></ha-icon-button>
-            `
-          : html`
-              <ha-icon-button-prev
-                slot="navigationIcon"
-                @click=${this._goBack}
-                .label=${this.hass.localize(
-                  "ui.dialogs.more_info_control.back_to_info"
-                )}
-              ></ha-icon-button-prev>
-            `}
-        <span slot="title" @click=${this._toggleSize} class="title">
-          ${breadcrumb.length > 0
-            ? !__DEMO__ && isAdmin
-              ? html`
-                  <button
-                    class="breadcrumb"
-                    @click=${this._breadcrumbClick}
-                    aria-label=${breadcrumb.join(" > ")}
-                  >
-                    ${join(breadcrumb, html`<ha-icon-next></ha-icon-next>`)}
-                  </button>
-                `
-              : html`
-                  <p class="breadcrumb">
-                    ${join(breadcrumb, html`<ha-icon-next></ha-icon-next>`)}
-                  </p>
-                `
-            : nothing}
-          <p class="main">${title}</p>
-        </span>
-        ${isDefaultView
-          ? html`
-              ${this._shouldShowHistory(domain)
-                ? html`
-                    <ha-icon-button
-                      slot="actionItems"
-                      .label=${this.hass.localize(
-                        "ui.dialogs.more_info_control.history"
-                      )}
-                      .path=${mdiChartBoxOutline}
-                      @click=${this._goToHistory}
-                    ></ha-icon-button>
-                  `
-                : nothing}
-              ${!__DEMO__ && isAdmin
-                ? html`
-                    <ha-icon-button
-                      slot="actionItems"
-                      .label=${this.hass.localize(
-                        "ui.dialogs.more_info_control.settings"
-                      )}
-                      .path=${mdiCogOutline}
-                      @click=${this._goToSettings}
-                    ></ha-icon-button>
-                    <ha-button-menu
-                      corner="BOTTOM_END"
-                      menu-corner="END"
-                      slot="actionItems"
-                      @closed=${stopPropagation}
-                      fixed
-                    >
-                      <ha-icon-button
-                        slot="trigger"
-                        .label=${this.hass.localize("ui.common.menu")}
-                        .path=${mdiDotsVertical}
-                      ></ha-icon-button>
-
-                      ${deviceId
-                        ? html`
-                            <ha-list-item
-                              graphic="icon"
-                              @request-selected=${this._goToDevice}
-                            >
-                              ${this.hass.localize(
-                                "ui.dialogs.more_info_control.device_or_service_info",
-                                {
-                                  type: this.hass.localize(
-                                    `ui.dialogs.more_info_control.device_type.${deviceType}`
-                                  ),
-                                }
-                              )}
-                              <ha-svg-icon
-                                slot="graphic"
-                                .path=${deviceType === "service"
-                                  ? mdiTransitConnectionVariant
-                                  : mdiDevices}
-                              ></ha-svg-icon>
-                            </ha-list-item>
-                          `
-                        : nothing}
-                      ${this._shouldShowEditIcon(domain, stateObj)
-                        ? html`
-                            <ha-list-item
-                              graphic="icon"
-                              @request-selected=${this._goToEdit}
-                            >
-                              ${this.hass.localize(
-                                "ui.dialogs.more_info_control.edit"
-                              )}
-                              <ha-svg-icon
-                                slot="graphic"
-                                .path=${mdiPencilOutline}
-                              ></ha-svg-icon>
-                            </ha-list-item>
-                          `
-                        : nothing}
-                      ${this._entry &&
-                      stateObj &&
-                      domain === "light" &&
-                      lightSupportsFavoriteColors(stateObj)
-                        ? html`
-                            <ha-list-item
-                              graphic="icon"
-                              @request-selected=${this._toggleInfoEditMode}
-                            >
-                              ${this._infoEditMode
-                                ? this.hass.localize(
-                                    `ui.dialogs.more_info_control.exit_edit_mode`
-                                  )
-                                : this.hass.localize(
-                                    `ui.dialogs.more_info_control.${domain}.edit_mode`
-                                  )}
-                              <ha-svg-icon
-                                slot="graphic"
-                                .path=${this._infoEditMode
-                                  ? mdiPencilOff
-                                  : mdiPencil}
-                              ></ha-svg-icon>
-                            </ha-list-item>
-                          `
-                        : nothing}
-                      <ha-list-item
-                        graphic="icon"
-                        @request-selected=${this._goToRelated}
-                      >
-                        ${this.hass.localize(
-                          "ui.dialogs.more_info_control.related"
-                        )}
-                        <ha-svg-icon
-                          slot="graphic"
-                          .path=${mdiInformationOutline}
-                        ></ha-svg-icon>
-                      </ha-list-item>
-                    </ha-button-menu>
-                  `
-                : nothing}
-            `
-          : isSpecificInitialView
+        <ha-dialog-header slot="heading">
+          ${showCloseIcon
            ? html`
-                <ha-button-menu
-                  corner="BOTTOM_END"
-                  menu-corner="END"
-                  slot="actionItems"
-                  @closed=${stopPropagation}
-                  fixed
-                >
-                  <ha-icon-button
-                    slot="trigger"
-                    .label=${this.hass.localize("ui.common.menu")}
-                    .path=${mdiDotsVertical}
-                  ></ha-icon-button>
-
-                  <ha-list-item
-                    graphic="icon"
-                    @request-selected=${this._resetInitialView}
-                  >
-                    ${this.hass.localize("ui.dialogs.more_info_control.info")}
-                    <ha-svg-icon
-                      slot="graphic"
-                      .path=${mdiInformationOutline}
-                    ></ha-svg-icon>
-                  </ha-list-item>
-                </ha-button-menu>
+                <ha-icon-button
+                  slot="navigationIcon"
+                  dialogAction="cancel"
+                  .label=${this.hass.localize("ui.common.close")}
+                  .path=${mdiClose}
+                ></ha-icon-button>
              `
-            : nothing}
+            : html`
+                <ha-icon-button-prev
+                  slot="navigationIcon"
+                  @click=${this._goBack}
+                  .label=${this.hass.localize(
+                    "ui.dialogs.more_info_control.back_to_info"
+                  )}
+                ></ha-icon-button-prev>
+              `}
+          <span slot="title" @click=${this._enlarge} class="title">
+            ${breadcrumb.length > 0
+              ? !__DEMO__ && isAdmin
+                ? html`
+                    <button
+                      class="breadcrumb"
+                      @click=${this._breadcrumbClick}
+                      aria-label=${breadcrumb.join(" > ")}
+                    >
+                      ${join(breadcrumb, html`<ha-icon-next></ha-icon-next>`)}
+                    </button>
+                  `
+                : html`
+                    <p class="breadcrumb">
+                      ${join(breadcrumb, html`<ha-icon-next></ha-icon-next>`)}
+                    </p>
+                  `
+              : nothing}
+            <p class="main">${title}</p>
+          </span>
+          ${isDefaultView
+            ? html`
+                ${this._shouldShowHistory(domain)
+                  ? html`
+                      <ha-icon-button
+                        slot="actionItems"
+                        .label=${this.hass.localize(
+                          "ui.dialogs.more_info_control.history"
+                        )}
+                        .path=${mdiChartBoxOutline}
+                        @click=${this._goToHistory}
+                      ></ha-icon-button>
+                    `
+                  : nothing}
+                ${!__DEMO__ && isAdmin
+                  ? html`
+                      <ha-icon-button
+                        slot="actionItems"
+                        .label=${this.hass.localize(
+                          "ui.dialogs.more_info_control.settings"
+                        )}
+                        .path=${mdiCogOutline}
+                        @click=${this._goToSettings}
+                      ></ha-icon-button>
+                      <ha-button-menu
+                        corner="BOTTOM_END"
+                        menu-corner="END"
+                        slot="actionItems"
+                        @closed=${stopPropagation}
+                        fixed
+                      >
+                        <ha-icon-button
+                          slot="trigger"
+                          .label=${this.hass.localize("ui.common.menu")}
+                          .path=${mdiDotsVertical}
+                        ></ha-icon-button>
+
+                        ${deviceId
+                          ? html`
+                              <ha-list-item
+                                graphic="icon"
+                                @request-selected=${this._goToDevice}
+                              >
+                                ${this.hass.localize(
+                                  "ui.dialogs.more_info_control.device_or_service_info",
+                                  {
+                                    type: this.hass.localize(
+                                      `ui.dialogs.more_info_control.device_type.${deviceType}`
+                                    ),
+                                  }
+                                )}
+                                <ha-svg-icon
+                                  slot="graphic"
+                                  .path=${deviceType === "service"
+                                    ? mdiTransitConnectionVariant
+                                    : mdiDevices}
+                                ></ha-svg-icon>
+                              </ha-list-item>
+                            `
+                          : nothing}
+                        ${this._shouldShowEditIcon(domain, stateObj)
+                          ? html`
+                              <ha-list-item
+                                graphic="icon"
+                                @request-selected=${this._goToEdit}
+                              >
+                                ${this.hass.localize(
+                                  "ui.dialogs.more_info_control.edit"
+                                )}
+                                <ha-svg-icon
+                                  slot="graphic"
+                                  .path=${mdiPencilOutline}
+                                ></ha-svg-icon>
+                              </ha-list-item>
+                            `
+                          : nothing}
+                        ${this._entry &&
+                        stateObj &&
+                        domain === "light" &&
+                        lightSupportsFavoriteColors(stateObj)
+                          ? html`
+                              <ha-list-item
+                                graphic="icon"
+                                @request-selected=${this._toggleInfoEditMode}
+                              >
+                                ${this._infoEditMode
+                                  ? this.hass.localize(
+                                      `ui.dialogs.more_info_control.exit_edit_mode`
+                                    )
+                                  : this.hass.localize(
+                                      `ui.dialogs.more_info_control.${domain}.edit_mode`
+                                    )}
+                                <ha-svg-icon
+                                  slot="graphic"
+                                  .path=${this._infoEditMode
+                                    ? mdiPencilOff
+                                    : mdiPencil}
+                                ></ha-svg-icon>
+                              </ha-list-item>
+                            `
+                          : nothing}
+                        <ha-list-item
+                          graphic="icon"
+                          @request-selected=${this._goToRelated}
+                        >
+                          ${this.hass.localize(
+                            "ui.dialogs.more_info_control.related"
+                          )}
+                          <ha-svg-icon
+                            slot="graphic"
+                            .path=${mdiInformationOutline}
+                          ></ha-svg-icon>
+                        </ha-list-item>
+                      </ha-button-menu>
+                    `
+                  : nothing}
+              `
+            : isSpecificInitialView
+              ? html`
+                  <ha-button-menu
+                    corner="BOTTOM_END"
+                    menu-corner="END"
+                    slot="actionItems"
+                    @closed=${stopPropagation}
+                    fixed
+                  >
+                    <ha-icon-button
+                      slot="trigger"
+                      .label=${this.hass.localize("ui.common.menu")}
+                      .path=${mdiDotsVertical}
+                    ></ha-icon-button>
+
+                    <ha-list-item
+                      graphic="icon"
+                      @request-selected=${this._resetInitialView}
+                    >
+                      ${this.hass.localize("ui.dialogs.more_info_control.info")}
+                      <ha-svg-icon
+                        slot="graphic"
+                        .path=${mdiInformationOutline}
+                      ></ha-svg-icon>
+                    </ha-list-item>
+                  </ha-button-menu>
+                `
+              : nothing}
+        </ha-dialog-header>
        ${keyed(
          this._entityId,
          html`
@@ -600,7 +602,7 @@ export class MoreInfoDialog extends LitElement {
            </div>
          `
        )}
-      </ha-wa-dialog>
+      </ha-dialog>
    `;
  }

@@ -622,8 +624,8 @@ export class MoreInfoDialog extends LitElement {
    this._entry = ev.detail;
  }

-  private _toggleSize() {
-    this.shadowRoot?.querySelector("ha-wa-dialog")?.toggleSize();
+  private _enlarge() {
+    this.large = !this.large;
  }

  private _handleOpened() {
@@ -656,7 +658,7 @@ export class MoreInfoDialog extends LitElement {
    return [
      haStyleDialog,
      css`
-        ha-wa-dialog {
+        ha-dialog {
          /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */
          --vertical-align-dialog: flex-start;
          --dialog-surface-margin-top: max(
@@ -685,21 +687,34 @@ export class MoreInfoDialog extends LitElement {
        }

        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-wa-dialog {
-            --dialog-surface-margin-top: var(--safe-area-inset-top, 0px);
+          /* When in fullscreen dialog should be attached to top */
+          ha-dialog {
+            --dialog-surface-margin-top: 0px;
          }
        }

        @media all and (min-width: 600px) and (min-height: 501px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 580px;
+            --mdc-dialog-max-width: 580px;
+            --mdc-dialog-max-height: calc(100% - 72px);
+          }
+
          .main-title {
            cursor: default;
          }
+
+          :host([large]) ha-dialog {
+            --mdc-dialog-min-width: 90vw;
+            --mdc-dialog-max-width: 90vw;
+          }
        }

        .title {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
+          margin: 0 0 -10px 0;
        }

        .title p {
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -21,10 +21,15 @@ import { componentsWithService } from "../../common/config/components_with_servi
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
-import { computeDeviceNameDisplay } from "../../common/entity/compute_device_name";
+import {
+  computeDeviceName,
+  computeDeviceNameDisplay,
+} from "../../common/entity/compute_device_name";
 import { computeDomain } from "../../common/entity/compute_domain";
+import { computeEntityName } from "../../common/entity/compute_entity_name";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { getDeviceContext } from "../../common/entity/context/get_device_context";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import { navigate } from "../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import type { ScorableTextItem } from "../../common/string/filter/sequence-matching";
@@ -630,10 +635,12 @@ export class QuickBar extends LitElement {
      .map((entityId) => {
        const stateObj = this.hass.states[entityId];

+        const { area, device } = getEntityContext(stateObj, this.hass);
+
        const friendlyName = computeStateName(stateObj); // Keep this for search
-        const entityName = this.hass.formatEntityName(stateObj, "entity");
-        const deviceName = this.hass.formatEntityName(stateObj, "device");
-        const areaName = this.hass.formatEntityName(stateObj, "area");
+        const entityName = computeEntityName(stateObj, this.hass);
+        const deviceName = device ? computeDeviceName(device) : undefined;
+        const areaName = area ? computeAreaName(area) : undefined;

        const primary = entityName || deviceName || entityId;
        const secondary = [areaName, entityName ? deviceName : undefined]
--- a/src/external_app/external_messaging.ts
+++ b/src/external_app/external_messaging.ts
@@ -304,7 +304,6 @@ export interface ExternalConfig {
  hasBarCodeScanner: number;
  canSetupImprov: boolean;
  downloadFileSupported: boolean;
-  appVersion: string;
 }

 export class ExternalMessaging {
--- a/src/fake_data/provide_hass.ts
+++ b/src/fake_data/provide_hass.ts
@@ -114,22 +114,17 @@ export const provideHass = (
      formatEntityState,
      formatEntityAttributeName,
      formatEntityAttributeValue,
-      formatEntityName,
    } = await computeFormatFunctions(
      hass().localize,
      hass().locale,
      hass().config,
      hass().entities,
-      hass().devices,
-      hass().areas,
-      hass().floors,
      [] // numericDeviceClasses
    );
    hass().updateHass({
      formatEntityState,
      formatEntityAttributeName,
      formatEntityAttributeValue,
-      formatEntityName,
    });
  }

--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -148,36 +148,19 @@ class HassSubpage extends LitElement {

        .content {
          position: relative;
-          width: calc(100% - var(--safe-area-inset-right, 0px));
-          height: calc(
-            100% -
-              1px - var(--header-height, 0px) - var(
-                --safe-area-inset-top,
-                0px
-              ) - var(--safe-area-inset-bottom, 0px)
-          );
-          margin-bottom: var(--safe-area-inset-bottom);
-          margin-right: var(--safe-area-inset-right);
+          width: 100%;
+          height: calc(100% - 1px - var(--header-height));
          overflow-y: auto;
          overflow: auto;
          -webkit-overflow-scrolling: touch;
        }
-        :host([narrow]) .content {
-          width: calc(
-            100% - var(--safe-area-inset-left, 0px) - var(
-                --safe-area-inset-right,
-                0px
-              )
-          );
-          margin-left: var(--safe-area-inset-left);
-        }

        #fab {
          position: absolute;
-          right: calc(16px + var(--safe-area-inset-right, 0px));
-          inset-inline-end: calc(16px + var(--safe-area-inset-right, 0px));
+          right: calc(16px + var(--safe-area-inset-right));
+          inset-inline-end: calc(16px + var(--safe-area-inset-right));
          inset-inline-start: initial;
-          bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
+          bottom: calc(16px + var(--safe-area-inset-bottom));
          z-index: 1;
          display: flex;
          flex-wrap: wrap;
@@ -185,12 +168,12 @@ class HassSubpage extends LitElement {
          gap: 8px;
        }
        :host([narrow]) #fab.tabs {
-          bottom: calc(84px + var(--safe-area-inset-bottom, 0px));
+          bottom: calc(84px + var(--safe-area-inset-bottom));
        }
        #fab[is-wide] {
-          bottom: calc(24px + var(--safe-area-inset-bottom, 0px));
-          right: calc(24px + var(--safe-area-inset-right, 0px));
-          inset-inline-end: calc(24px + var(--safe-area-inset-right, 0px));
+          bottom: 24px;
+          right: 24px;
+          inset-inline-end: 24px;
          inset-inline-start: initial;
        }
      `,
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -704,24 +704,12 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
    }
    :host(:not([narrow])) ha-data-table,
    .pane {
-      height: calc(
-        100vh -
-          1px - var(--header-height, 0px) - var(
-            --safe-area-inset-top,
-            0px
-          ) - var(--safe-area-inset-bottom, 0px)
-      );
+      height: calc(100vh - 1px - var(--header-height));
      display: block;
    }

    .pane-content {
-      height: calc(
-        100vh -
-          1px - var(--header-height, 0px) - var(--header-height, 0px) - var(
-            --safe-area-inset-top,
-            0px
-          ) - var(--safe-area-inset-bottom, 0px)
-      );
+      height: calc(100vh - 1px - var(--header-height) - var(--header-height));
      display: flex;
      flex-direction: column;
    }
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -173,9 +173,7 @@ class HassTabsSubpage extends LitElement {
          ? html`<div id="tabbar" class="bottom-bar">${tabs}</div>`
          : ""}
      </div>
-      <div
-        class=${classMap({ container: true, tabs: showTabs && this.narrow })}
-      >
+      <div class="container">
        ${this.pane
          ? html`<div class="pane">
              <div class="shadow-container"></div>
@@ -228,9 +226,11 @@ class HassTabsSubpage extends LitElement {

        .container {
          display: flex;
-          height: calc(
-            100% - var(--header-height, 0px) - var(--safe-area-inset-top, 0px)
-          );
+          height: calc(100% - var(--header-height));
+        }
+
+        :host([narrow]) .container {
+          height: 100%;
        }

        ha-menu-button {
@@ -241,19 +241,15 @@ class HassTabsSubpage extends LitElement {

        .toolbar {
          font-size: var(--ha-font-size-xl);
-          height: calc(
-            var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
-          );
+          height: calc(var(--header-height) + var(--safe-area-inset-top));
          padding-top: var(--safe-area-inset-top);
          padding-right: var(--safe-area-inset-right);
+          padding-left: var(--safe-area-inset-left);
          background-color: var(--sidebar-background-color);
          font-weight: var(--ha-font-weight-normal);
          border-bottom: 1px solid var(--divider-color);
          box-sizing: border-box;
        }
-        :host([narrow]) .toolbar {
-          padding-left: var(--safe-area-inset-left);
-        }
        .toolbar-content {
          padding: 8px 12px;
          display: flex;
@@ -261,8 +257,10 @@ class HassTabsSubpage extends LitElement {
          height: 100%;
          box-sizing: border-box;
        }
-        :host([narrow]) .toolbar-content {
-          padding: 4px;
+        @media (max-width: 599px) {
+          .toolbar-content {
+            padding: 4px;
+          }
        }
        .toolbar a {
          color: var(--sidebar-text-color);
@@ -326,38 +324,45 @@ class HassTabsSubpage extends LitElement {

        .content {
          position: relative;
-          width: 100%;
+          width: calc(
+            100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)
+          );
+          margin-left: var(--safe-area-inset-left);
          margin-right: var(--safe-area-inset-right);
+          margin-inline-start: var(--safe-area-inset-left);
          margin-inline-end: var(--safe-area-inset-right);
-          margin-bottom: var(--safe-area-inset-bottom);
          overflow: auto;
          -webkit-overflow-scrolling: touch;
        }
+
        :host([narrow]) .content {
-          margin-left: var(--safe-area-inset-left);
-          margin-inline-start: var(--safe-area-inset-left);
+          height: calc(100% - var(--header-height));
+          height: calc(
+            100% - var(--header-height) - var(--safe-area-inset-bottom)
+          );
        }
+
        :host([narrow]) .content.tabs {
-          /* Bottom bar reuses header height */
-          margin-bottom: calc(
-            var(--header-height, 0px) + var(--safe-area-inset-bottom, 0px)
+          height: calc(100% - 2 * var(--header-height));
+          height: calc(
+            100% - 2 * var(--header-height) - var(--safe-area-inset-bottom)
          );
        }

        .content .fab-bottom-space {
-          height: calc(64px + var(--safe-area-inset-bottom, 0px));
+          height: calc(64px + var(--safe-area-inset-bottom));
        }

        :host([narrow]) .content.tabs .fab-bottom-space {
-          height: calc(80px + var(--safe-area-inset-bottom, 0px));
+          height: calc(80px + var(--safe-area-inset-bottom));
        }

        #fab {
          position: fixed;
-          right: calc(16px + var(--safe-area-inset-right, 0px));
+          right: calc(16px + var(--safe-area-inset-right));
          inset-inline-end: calc(16px + var(--safe-area-inset-right));
          inset-inline-start: initial;
-          bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
+          bottom: calc(16px + var(--safe-area-inset-bottom));
          z-index: 1;
          display: flex;
          flex-wrap: wrap;
@@ -365,7 +370,7 @@ class HassTabsSubpage extends LitElement {
          gap: 8px;
        }
        :host([narrow]) #fab.tabs {
-          bottom: calc(84px + var(--safe-area-inset-bottom, 0px));
+          bottom: calc(84px + var(--safe-area-inset-bottom));
        }
        #fab[is-wide] {
          bottom: 24px;
--- a/src/panels/calendar/dialog-calendar-event-detail.ts
+++ b/src/panels/calendar/dialog-calendar-event-detail.ts
@@ -1,5 +1,5 @@
 import { mdiCalendarClock } from "@mdi/js";
-import { TZDate } from "@date-fns/tz";
+import { toDate } from "date-fns-tz";
 import { addDays, isSameDay } from "date-fns";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -143,8 +143,8 @@ class DialogCalendarEventDetail extends LitElement {
      this.hass.locale.time_zone,
      this.hass.config.time_zone
    );
-    const start = new TZDate(this._data!.dtstart, timeZone);
-    const endValue = new TZDate(this._data!.dtend, timeZone);
+    const start = toDate(this._data!.dtstart, { timeZone: timeZone });
+    const endValue = toDate(this._data!.dtend, { timeZone: timeZone });
    // All day events should be displayed as a day earlier
    const end = isDate(this._data.dtend) ? addDays(endValue, -1) : endValue;
    // The range can be shortened when the start and end are on the same day.
--- a/src/panels/calendar/dialog-calendar-event-editor.ts
+++ b/src/panels/calendar/dialog-calendar-event-editor.ts
@@ -5,6 +5,7 @@ import {
  differenceInMilliseconds,
  startOfHour,
 } from "date-fns";
+import { formatInTimeZone, toDate } from "date-fns-tz";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -39,11 +40,6 @@ import "../lovelace/components/hui-generic-entity-row";
 import "./ha-recurrence-rule-editor";
 import { showConfirmEventDialog } from "./show-confirm-event-dialog-box";
 import type { CalendarEventEditDialogParams } from "./show-dialog-calendar-event-editor";
-import {
-  formatDate,
-  formatTime,
-  parseDate,
-} from "../../common/datetime/calc_date";

 const CALENDAR_DOMAINS = ["calendar"];

@@ -307,13 +303,28 @@ class DialogCalendarEventEditor extends LitElement {

  private _getLocaleStrings = memoizeOne(
    (startDate?: Date, endDate?: Date) => ({
-      startDate: formatDate(startDate!, this._timeZone!),
-      startTime: formatTime(startDate!, this._timeZone!),
-      endDate: formatDate(endDate!, this._timeZone!),
-      endTime: formatTime(endDate!, this._timeZone!),
+      startDate: this._formatDate(startDate!),
+      startTime: this._formatTime(startDate!),
+      endDate: this._formatDate(endDate!),
+      endTime: this._formatTime(endDate!),
    })
  );

+  // Formats a date in specified timezone, or defaulting to browser display timezone
+  private _formatDate(date: Date, timeZone: string = this._timeZone!): string {
+    return formatInTimeZone(date, timeZone, "yyyy-MM-dd");
+  }
+
+  // Formats a time in specified timezone, or defaulting to browser display timezone
+  private _formatTime(date: Date, timeZone: string = this._timeZone!): string {
+    return formatInTimeZone(date, timeZone, "HH:mm:ss"); // 24 hr
+  }
+
+  // Parse a date in the browser timezone
+  private _parseDate(dateStr: string): Date {
+    return toDate(dateStr, { timeZone: this._timeZone! });
+  }
+
  private _clearInfo() {
    this._info = undefined;
  }
@@ -338,9 +349,8 @@ class DialogCalendarEventEditor extends LitElement {
    // Store previous event duration
    const duration = differenceInMilliseconds(this._dtend!, this._dtstart!);

-    this._dtstart = parseDate(
-      `${ev.detail.value}T${formatTime(this._dtstart!, this._timeZone!)}`,
-      this._timeZone!
+    this._dtstart = this._parseDate(
+      `${ev.detail.value}T${this._formatTime(this._dtstart!)}`
    );

    // Prevent that the end time can be before the start time. Try to keep the
@@ -354,9 +364,8 @@ class DialogCalendarEventEditor extends LitElement {
  }

  private _endDateChanged(ev: CustomEvent) {
-    this._dtend = parseDate(
-      `${ev.detail.value}T${formatTime(this._dtend!, this._timeZone!)}`,
-      this._timeZone!
+    this._dtend = this._parseDate(
+      `${ev.detail.value}T${this._formatTime(this._dtend!)}`
    );
  }

@@ -364,9 +373,8 @@ class DialogCalendarEventEditor extends LitElement {
    // Store previous event duration
    const duration = differenceInMilliseconds(this._dtend!, this._dtstart!);

-    this._dtstart = parseDate(
-      `${formatDate(this._dtstart!, this._timeZone!)}T${ev.detail.value}`,
-      this._timeZone!
+    this._dtstart = this._parseDate(
+      `${this._formatDate(this._dtstart!)}T${ev.detail.value}`
    );

    // Prevent that the end time can be before the start time. Try to keep the
@@ -380,9 +388,8 @@ class DialogCalendarEventEditor extends LitElement {
  }

  private _endTimeChanged(ev: CustomEvent) {
-    this._dtend = parseDate(
-      `${formatDate(this._dtend!, this._timeZone!)}T${ev.detail.value}`,
-      this._timeZone!
+    this._dtend = this._parseDate(
+      `${this._formatDate(this._dtend!)}T${ev.detail.value}`
    );
  }

@@ -395,18 +402,18 @@ class DialogCalendarEventEditor extends LitElement {
      dtend: "",
    };
    if (this._allDay) {
-      data.dtstart = formatDate(this._dtstart!, this._timeZone!);
+      data.dtstart = this._formatDate(this._dtstart!);
      // End date/time is exclusive when persisted
-      data.dtend = formatDate(addDays(this._dtend!, 1), this._timeZone!);
+      data.dtend = this._formatDate(addDays(this._dtend!, 1));
    } else {
-      data.dtstart = `${formatDate(
+      data.dtstart = `${this._formatDate(
        this._dtstart!,
        this.hass.config.time_zone
-      )}T${formatTime(this._dtstart!, this.hass.config.time_zone)}`;
-      data.dtend = `${formatDate(
+      )}T${this._formatTime(this._dtstart!, this.hass.config.time_zone)}`;
+      data.dtend = `${this._formatDate(
        this._dtend!,
        this.hass.config.time_zone
-      )}T${formatTime(this._dtend!, this.hass.config.time_zone)}`;
+      )}T${this._formatTime(this._dtend!, this.hass.config.time_zone)}`;
    }
    return data;
  }
--- a/src/panels/calendar/ha-full-calendar.ts
+++ b/src/panels/calendar/ha-full-calendar.ts
@@ -161,8 +161,6 @@ export class HAFullCalendar extends LitElement {
                    <ha-button-toggle-group
                      .buttons=${viewToggleButtons}
                      .active=${this._activeView}
-                      size="small"
-                      no-wrap
                      @value-changed=${this._handleView}
                    ></ha-button-toggle-group>
                  `
@@ -197,8 +195,6 @@ export class HAFullCalendar extends LitElement {
                      <ha-button-toggle-group
                        .buttons=${viewToggleButtons}
                        .active=${this._activeView}
-                        size="small"
-                        no-wrap
                        @value-changed=${this._handleView}
                      ></ha-button-toggle-group>
                    </div>
--- a/src/panels/calendar/ha-panel-calendar.ts
+++ b/src/panels/calendar/ha-panel-calendar.ts
@@ -114,11 +114,7 @@ class PanelCalendar extends LitElement {
    );
    const showPane = this._showPaneController.value ?? !this.narrow;
    return html`
-      <ha-two-pane-top-app-bar-fixed
-        .pane=${showPane}
-        footer
-        .narrow=${this.narrow}
-      >
+      <ha-two-pane-top-app-bar-fixed .pane=${showPane} footer>
        <ha-menu-button
          slot="navigationIcon"
          .hass=${this.hass}
@@ -298,15 +294,10 @@ class PanelCalendar extends LitElement {
          display: block;
        }
        ha-full-calendar {
+          height: calc(100vh - var(--header-height));
          --calendar-header-padding: 12px;
          --calendar-border-radius: 0;
          --calendar-border-width: 1px 0;
-          height: calc(
-            100vh - var(--header-height, 0px) - var(
-                --safe-area-inset-top,
-                0px
-              ) - var(--safe-area-inset-bottom, 0px)
-          );
        }
        ha-button-menu ha-button {
          --ha-font-size-m: var(--ha-font-size-l);
--- a/src/panels/calendar/ha-recurrence-rule-editor.ts
+++ b/src/panels/calendar/ha-recurrence-rule-editor.ts
@@ -1,5 +1,5 @@
 import type { SelectedDetail } from "@material/mwc-list";
-import { TZDate } from "@date-fns/tz";
+import { formatInTimeZone, toDate } from "date-fns-tz";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -33,7 +33,6 @@ import {
  ruleByWeekDay,
  untilValue,
 } from "./recurrence";
-import { formatDate, formatTime } from "../../common/datetime/calc_date";

@customElement("ha-recurrence-rule-editor")
 export class RecurrenceRuleEditor extends LitElement {
@@ -169,9 +168,7 @@ export class RecurrenceRuleEditor extends LitElement {
    }
    if (rrule.until) {
      this._end = "on";
-      this._untilDay = new Date(
-        new TZDate(rrule.until, this.timezone).getTime()
-      );
+      this._untilDay = toDate(rrule.until, { timeZone: this.timezone });
    } else if (rrule.count) {
      this._end = "after";
      this._count = rrule.count;
@@ -338,7 +335,7 @@ export class RecurrenceRuleEditor extends LitElement {
                "ui.components.calendar.event.repeat.end_on.label"
              )}
              .locale=${this.locale}
-              .value=${formatDate(this._untilDay!, this.timezone!)}
+              .value=${this._formatDate(this._untilDay!)}
              @value-changed=${this._onUntilChange}
            ></ha-date-input>
          `
@@ -424,9 +421,9 @@ export class RecurrenceRuleEditor extends LitElement {

  private _onUntilChange(e: CustomEvent) {
    e.stopPropagation();
-    this._untilDay = new Date(
-      new TZDate(e.detail.value + "T00:00:00", this.timezone).getTime()
-    );
+    this._untilDay = toDate(e.detail.value + "T00:00:00", {
+      timeZone: this.timezone,
+    });
  }

  // Reset the weekday selected when there is only a single value
@@ -461,22 +458,20 @@ export class RecurrenceRuleEditor extends LitElement {
    let contentline = RRule.optionsToString(options);
    if (this._untilDay) {
      // The UNTIL value should be inclusive of the last event instance
-      const until = new TZDate(
-        formatDate(this._untilDay!, this.timezone!) +
+      const until = toDate(
+        this._formatDate(this._untilDay!) +
          "T" +
-          formatTime(this.dtstart!, this.timezone!),
-        this.timezone
+          this._formatTime(this.dtstart!),
+        { timeZone: this.timezone }
      );
      // rrule.js can't compute some UNTIL variations so we compute that ourself. Must be
      // in the same format as dtstart.
-      let newUntilValue;
-      if (this.allDay) {
-        // For all-day events, only use the date part
-        newUntilValue = until.toISOString().split("T")[0].replace(/-/g, "");
-      } else {
-        // For timed events, include the time part
-        newUntilValue = until.toISOString().replace(/[-:]/g, "").split(".")[0];
-      }
+      const format = this.allDay ? "yyyyMMdd" : "yyyyMMdd'T'HHmmss";
+      const newUntilValue = formatInTimeZone(
+        until,
+        this.hass.config.time_zone,
+        format
+      );
      contentline += `;UNTIL=${newUntilValue}`;
    }
    return contentline.slice(6); // Strip "RRULE:" prefix
@@ -497,6 +492,16 @@ export class RecurrenceRuleEditor extends LitElement {
    );
  }

+  // Formats a date in browser display timezone
+  private _formatDate(date: Date): string {
+    return formatInTimeZone(date, this.timezone!, "yyyy-MM-dd");
+  }
+
+  // Formats a time in browser display timezone
+  private _formatTime(date: Date): string {
+    return formatInTimeZone(date, this.timezone!, "HH:mm:ss");
+  }
+
  static styles = css`
    ha-textfield,
    ha-select {
--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@@ -6,7 +6,6 @@ import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-sortable";
@@ -110,7 +109,6 @@ export default class HaAutomationAction extends LitElement {
                          : ""}"
                        slot="icons"
                        @keydown=${this._handleDragKeydown}
-                        @click=${stopPropagation}
                        .index=${idx}
                      >
                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
--- a/src/panels/config/automation/blueprint-automation-editor.ts
+++ b/src/panels/config/automation/blueprint-automation-editor.ts
@@ -94,25 +94,11 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
        :host {
          position: relative;
          height: 100%;
-          min-height: calc(
-            100vh -
-              134px - var(--safe-area-inset-top, 0px) - var(
-                --safe-area-inset-bottom,
-                0px
-              )
-          );
-          min-height: calc(
-            100dvh -
-              134px - var(--safe-area-inset-top, 0px) - var(
-                --safe-area-inset-bottom,
-                0px
-              )
-          );
+          min-height: calc(100vh - 85px);
+          min-height: calc(100dvh - 85px);
        }
        ha-fab {
          position: fixed;
-          bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
-          right: calc(16px + var(--safe-area-inset-right, 0px));
        }
      `,
    ];
--- a/src/panels/config/automation/condition/ha-automation-condition.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -6,7 +6,6 @@ import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
@@ -188,7 +187,6 @@ export default class HaAutomationCondition extends LitElement {
                          : ""}"
                        slot="icons"
                        @keydown=${this._handleDragKeydown}
-                        @click=${stopPropagation}
                        .index=${idx}
                      >
                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -1214,12 +1214,12 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
        }
        ha-fab {
          position: fixed;
-          right: calc(16px + var(--safe-area-inset-right, 0px));
+          right: 16px;
          bottom: calc(-80px - var(--safe-area-inset-bottom));
          transition: bottom 0.3s;
        }
        ha-fab.dirty {
-          bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
+          bottom: 16px;
        }
      `,
    ];
--- a/src/panels/config/automation/ha-automation-sidebar.ts
+++ b/src/panels/config/automation/ha-automation-sidebar.ts
@@ -1,7 +1,7 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import "../../../components/ha-resizable-bottom-sheet";
-import type { HaResizableBottomSheet } from "../../../components/ha-resizable-bottom-sheet";
+import "../../../components/ha-bottom-sheet";
+import type { HaBottomSheet } from "../../../components/ha-bottom-sheet";
 import {
  isCondition,
  isScriptField,
@@ -37,8 +37,7 @@ export default class HaAutomationSidebar extends LitElement {

  @state() private _yamlMode = false;

-  @query("ha-resizable-bottom-sheet")
-  private _bottomSheetElement?: HaResizableBottomSheet;
+  @query("ha-bottom-sheet") private _bottomSheetElement?: HaBottomSheet;

  private _renderContent() {
    // get config type
@@ -148,9 +147,9 @@ export default class HaAutomationSidebar extends LitElement {

    if (this.narrow) {
      return html`
-        <ha-resizable-bottom-sheet @bottom-sheet-closed=${this._closeSidebar}>
+        <ha-bottom-sheet @bottom-sheet-closed=${this._closeSidebar}>
          ${this._renderContent()}
-        </ha-resizable-bottom-sheet>
+        </ha-bottom-sheet>
      `;
    }

@@ -211,9 +210,7 @@ export default class HaAutomationSidebar extends LitElement {
    :host {
      z-index: 6;
      outline: none;
-      height: calc(
-        100% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom)
-      );
+      height: 100%;
      --ha-card-border-radius: var(
        --ha-dialog-border-radius,
        var(--ha-border-radius-2xl)
@@ -222,8 +219,6 @@ export default class HaAutomationSidebar extends LitElement {
      --ha-bottom-sheet-border-width: 2px;
      --ha-bottom-sheet-border-style: solid;
      --ha-bottom-sheet-border-color: var(--primary-color);
-      margin-top: var(--safe-area-inset-top);
-      margin-bottom: var(--safe-area-inset-bottom);
    }

    @media all and (max-width: 870px) {
--- a/src/panels/config/automation/option/ha-automation-option.ts
+++ b/src/panels/config/automation/option/ha-automation-option.ts
@@ -6,7 +6,6 @@ import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-sortable";
@@ -97,7 +96,6 @@ export default class HaAutomationOption extends LitElement {
                          : ""}"
                        slot="icons"
                        @keydown=${this._handleDragKeydown}
-                        @click=${stopPropagation}
                        .index=${idx}
                      >
                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts
@@ -145,7 +145,11 @@ export default class HaAutomationSidebarAction extends LitElement {
          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
        </div>
      </ha-md-menu-item>
-      <ha-md-menu-item slot="menu-items" .clickAction=${this.config.copy}>
+      <ha-md-menu-item
+        slot="menu-items"
+        .clickAction=${this.config.copy}
+        .disabled=${this.disabled}
+      >
        <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
        <div class="overflow-label">
          ${this.hass.localize(
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts
@@ -150,7 +150,11 @@ export default class HaAutomationSidebarCondition extends LitElement {
        </div>
      </ha-md-menu-item>

-      <ha-md-menu-item slot="menu-items" .clickAction=${this.config.copy}>
+      <ha-md-menu-item
+        slot="menu-items"
+        .clickAction=${this.config.copy}
+        .disabled=${this.disabled}
+      >
        <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
        <div class="overflow-label">
          ${this.hass.localize(
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts
@@ -137,7 +137,11 @@ export default class HaAutomationSidebarTrigger extends LitElement {
          ></ha-svg-icon>
        </ha-md-menu-item>

-        <ha-md-menu-item slot="menu-items" .clickAction=${this.config.copy}>
+        <ha-md-menu-item
+          slot="menu-items"
+          .clickAction=${this.config.copy}
+          .disabled=${this.disabled}
+        >
          <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
          <div class="overflow-label">
            ${this.hass.localize(
--- a/src/panels/config/automation/styles.ts
+++ b/src/panels/config/automation/styles.ts
@@ -92,12 +92,12 @@ export const saveFabStyles = css`
  }
  ha-fab {
    position: absolute;
-    right: calc(16px + var(--safe-area-inset-right, 0px));
+    right: 16px;
    bottom: calc(-80px - var(--safe-area-inset-bottom));
    transition: bottom 0.3s;
  }
  ha-fab.dirty {
-    bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
+    bottom: 16px;
  }
 `;

@@ -126,7 +126,7 @@ export const manualEditorStyles = css`
    transition: bottom 0.3s;
  }
  .fab-positioner ha-fab.dirty {
-    bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
+    bottom: 16px;
  }

  .content-wrapper {
@@ -148,13 +148,7 @@ export const manualEditorStyles = css`
  ha-automation-sidebar {
    position: fixed;
    top: calc(var(--header-height) + 16px);
-    height: calc(
-      -81px +
-        100dvh - var(--safe-area-inset-top, 0px) - var(
-          --safe-area-inset-bottom,
-          0px
-        )
-    );
+    height: calc(-81px + 100dvh);
    width: var(--sidebar-width);
    display: block;
  }
--- a/src/panels/config/automation/trigger/ha-automation-trigger.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts
@@ -6,7 +6,6 @@ import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
@@ -105,7 +104,6 @@ export default class HaAutomationTrigger extends LitElement {
                          : ""}"
                        slot="icons"
                        @keydown=${this._handleDragKeydown}
-                        @click=${stopPropagation}
                        .index=${idx}
                      >
                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
--- a/src/panels/config/core/ha-config-system-navigation.ts
+++ b/src/panels/config/core/ha-config-system-navigation.ts
@@ -118,7 +118,6 @@ class HaConfigSystemNavigation extends LitElement {
        .hass=${this.hass}
        back-path="/config"
        .header=${this.hass.localize("ui.panel.config.dashboard.system.main")}
-        .narrow=${this.narrow}
      >
        <ha-icon-button
          slot="toolbar-icon"
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/src/panels/config/dashboard/ha-config-dashboard.ts
@@ -212,7 +212,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
      this._repairsIssues;

    return html`
-      <ha-top-app-bar-fixed .narrow=${this.narrow}>
+      <ha-top-app-bar-fixed>
        <ha-menu-button
          slot="navigationIcon"
          .hass=${this.hass}
@@ -386,16 +386,17 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
    return [
      haStyle,
      css`
-        :host(:not([narrow])) ha-card:last-child {
-          margin-bottom: 24px;
+        ha-card:last-child {
+          margin-bottom: var(--safe-area-inset-bottom);
+        }
+        :host(:not([narrow])) ha-card:last-child {
+          margin-bottom: max(24px, var(--safe-area-inset-bottom));
        }
-
        ha-config-section {
          margin: auto;
          margin-top: -32px;
          max-width: 600px;
        }
-
        ha-card {
          overflow: hidden;
        }
@@ -403,11 +404,9 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
          text-decoration: none;
          color: var(--primary-text-color);
        }
-
        ha-assist-chip {
          margin: 8px 16px 16px 16px;
        }
-
        .title {
          font-size: var(--ha-font-size-l);
          padding: 16px;
@@ -426,7 +425,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
        }

        ha-tip {
-          margin-bottom: 8px;
+          margin-bottom: max(var(--safe-area-inset-bottom), 8px);
        }

        .new {
--- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
@@ -172,9 +172,7 @@ export class HaDeviceEntitiesCard extends LitElement {
      element.hass = this.hass;
      const stateObj = this.hass.states[entry.entity_id];

-      let name =
-        computeEntityName(stateObj, this.hass.entities, this.hass.devices) ||
-        this.deviceName;
+      let name = computeEntityName(stateObj, this.hass) || this.deviceName;

      if (entry.hidden_by) {
        name += ` (${this.hass.localize(
--- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
+++ b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
@@ -5,7 +5,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../../common/entity/compute_device_name";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-area-picker";
-import "../../../../components/ha-wa-dialog";
+import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
 import "../../../../components/ha-labels-picker";
 import type { HaSwitch } from "../../../../components/ha-switch";
@@ -57,10 +57,10 @@ class DialogDeviceRegistryDetail extends LitElement {
    }
    const device = this._params.device;
    return html`
-      <ha-wa-dialog
+      <ha-dialog
        open
        @closed=${this.closeDialog}
-        .headerTitle=${computeDeviceNameDisplay(device, this.hass)}
+        .heading=${computeDeviceNameDisplay(device, this.hass)}
      >
        <div>
          ${this._error
@@ -131,19 +131,22 @@ class DialogDeviceRegistryDetail extends LitElement {
            </div>
          </div>
        </div>
-        <div slot="footer">
-          <ha-button
-            appearance="plain"
-            .disabled=${this._submitting}
-            @click=${this.closeDialog}
-          >
-            ${this.hass.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button .disabled=${this._submitting} @click=${this._updateEntry}>
-            ${this.hass.localize("ui.dialogs.device-registry-detail.update")}
-          </ha-button>
-        </div>
-      </ha-wa-dialog>
+        <ha-button
+          slot="secondaryAction"
+          @click=${this.closeDialog}
+          .disabled=${this._submitting}
+          appearance="plain"
+        >
+          ${this.hass.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button
+          slot="primaryAction"
+          @click=${this._updateEntry}
+          .disabled=${this._submitting}
+        >
+          ${this.hass.localize("ui.dialogs.device-registry-detail.update")}
+        </ha-button>
+      </ha-dialog>
    `;
  }

--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -1238,7 +1238,7 @@ export class HaConfigDevicePage extends LitElement {
  private _computeEntityName(entity: EntityRegistryEntry) {
    const device = this.hass.devices[this.deviceId];
    return (
-      computeEntityEntryName(entity, this.hass.devices) ||
+      computeEntityEntryName(entity, this.hass) ||
      computeDeviceNameDisplay(device, this.hass)
    );
  }
@@ -1489,9 +1489,6 @@ export class HaConfigDevicePage extends LitElement {
          margin-top: 32px;
          margin-bottom: 32px;
        }
-        :host([narrow]) .container {
-          margin-top: 0;
-        }

        .card-header {
          display: flex;
@@ -1591,6 +1588,10 @@ export class HaConfigDevicePage extends LitElement {
          width: 100%;
        }

+        :host([narrow]) .container {
+          margin-top: 0;
+        }
+
        a {
          text-decoration: none;
          color: var(--primary-color);
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@@ -682,8 +682,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {

        const entityName = computeEntityEntryName(
          entry as EntityRegistryEntry,
-          this.hass.devices,
-          entity
+          this.hass
        );

        const deviceName = device ? computeDeviceName(device) : undefined;
--- a/src/panels/config/ha-config-section.ts
+++ b/src/panels/config/ha-config-section.ts
@@ -38,7 +38,6 @@ export class HaConfigSection extends LitElement {
    :host {
      display: block;
    }
-
    .content {
      padding: 28px 20px 0;
      max-width: 1040px;
--- a/src/panels/config/helpers/ha-config-helpers.ts
+++ b/src/panels/config/helpers/ha-config-helpers.ts
@@ -12,7 +12,6 @@ import {
  mdiPlus,
  mdiTag,
  mdiTrashCan,
-  mdiDownload,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@@ -112,13 +111,6 @@ import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 import { isHelperDomain } from "./const";
 import { showHelperDetailDialog } from "./show-dialog-helper-detail";
 import { slugify } from "../../../common/string/slugify";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import {
-  fetchDiagnosticHandlers,
-  getConfigEntryDiagnosticsDownloadUrl,
-} from "../../../data/diagnostics";
-import { getSignedPath } from "../../../data/auth";
-import { fileDownload } from "../../../util/file_download";

 interface HelperItem {
  id: string;
@@ -217,8 +209,6 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {

  @state() private _helperManifests?: Record<string, IntegrationManifest>;

-  @state() private _diagnosticHandlers?: Record<string, boolean>;
-
  @storage({
    storage: "sessionStorage",
    key: "helpers-table-filters",
@@ -440,17 +430,6 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                    },
                  ]
                : []),
-              ...(this._diagnosticHandlers?.[helper.type] && helper.configEntry
-                ? [
-                    {
-                      path: mdiDownload,
-                      label: this.hass.localize(
-                        "ui.panel.config.integrations.config_entry.download_diagnostics"
-                      ),
-                      action: () => this._downloadDiagnostics(helper),
-                    },
-                  ]
-                : []),
            ]}
          >
          </ha-icon-overflow-menu>
@@ -1063,16 +1042,6 @@ ${rejected

    this._fetchEntitySources();

-    if (isComponentLoaded(this.hass, "diagnostics")) {
-      fetchDiagnosticHandlers(this.hass).then((infos) => {
-        const handlers = {};
-        for (const info of infos) {
-          handlers[info.domain] = info.handlers.config_entry;
-        }
-        this._diagnosticHandlers = handlers;
-      });
-    }
-
    if (this.route.path === "/add") {
      this._handleAdd();
    }
@@ -1258,14 +1227,6 @@ ${rejected
    deleteConfigEntry(this.hass, helper.id);
  }

-  private async _downloadDiagnostics(helper: HelperItem) {
-    const url = getConfigEntryDiagnosticsDownloadUrl(
-      helper.configEntry!.entry_id
-    );
-    const signedUrl = await getSignedPath(this.hass, url);
-    fileDownload(signedUrl.path);
-  }
-
  private _openSettings(helper: HelperItem) {
    if (helper.entity) {
      showMoreInfoDialog(this, {
--- a/src/panels/config/info/ha-config-info.ts
+++ b/src/panels/config/info/ha-config-info.ts
@@ -133,7 +133,7 @@ class HaConfigInfo extends LitElement {
              <li>
                <span class="version-label"
                  >${this.hass.localize(
-                    "ui.panel.config.info.installation_method"
+                    `ui.panel.config.info.installation_method`
                  )}</span
                >
                <span class="version">${this._installationMethod || "…"}</span>
@@ -170,20 +170,6 @@ class HaConfigInfo extends LitElement {
                  ${JS_VERSION}${JS_TYPE !== "modern" ? ` · ${JS_TYPE}` : ""}
                </span>
              </li>
-              ${this.hass.auth.external?.config.appVersion
-                ? html`
-                    <li>
-                      <span class="version-label"
-                        >${this.hass.localize(
-                          "ui.panel.config.info.external_app_version"
-                        )}</span
-                      >
-                      <span class="version"
-                        >${this.hass.auth.external?.config.appVersion}</span
-                      >
-                    </li>
-                  `
-                : nothing}
            </ul>
          </ha-card>
          <ha-card outlined class="ohf">
--- a/src/panels/config/integrations/ha-config-integration-page.ts
+++ b/src/panels/config/integrations/ha-config-integration-page.ts
@@ -912,9 +912,6 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
          max-width: 1000px;
          padding: 32px;
        }
-        :host([narrow]) .container {
-          padding: 16px;
-        }
        .container > * {
          flex-grow: 1;
        }
@@ -955,6 +952,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
        .card-content {
          padding: 16px 0 8px;
        }
+        :host([narrow]) .container {
+          padding: 16px;
+        }
        .card-header {
          padding-bottom: 0;
        }
--- a/src/panels/config/logs/ha-config-logs.ts
+++ b/src/panels/config/logs/ha-config-logs.ts
@@ -18,7 +18,6 @@ import type { HomeAssistant, Route } from "../../../types";
 import "./error-log-card";
 import "./system-log-card";
 import type { SystemLogCard } from "./system-log-card";
-import { stringCompare } from "../../../common/string/compare";

 const logProviders: LogProvider[] = [
  {
@@ -209,17 +208,15 @@ export class HaConfigLogs extends LitElement {
  private async _getInstalledAddons() {
    try {
      const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-      const sortedAddons = addonsInfo.addons
-        .filter((addon) => addon.version)
-        .map((addon) => ({
-          key: addon.slug,
-          name: addon.name,
-        }))
-        .sort((a, b) =>
-          stringCompare(a.name, b.name, this.hass.locale.language)
-        );
-
-      this._logProviders = [...this._logProviders, ...sortedAddons];
+      this._logProviders = [
+        ...this._logProviders,
+        ...addonsInfo.addons
+          .filter((addon) => addon.version)
+          .map((addon) => ({
+            key: addon.slug,
+            name: addon.name,
+          })),
+      ];
    } catch (_err) {
      // Ignore, nothing the user can do anyway
    }
--- a/src/panels/config/script/blueprint-script-editor.ts
+++ b/src/panels/config/script/blueprint-script-editor.ts
@@ -66,8 +66,6 @@ export class HaBlueprintScriptEditor extends HaBlueprintGenericEditor {
        }
        ha-fab {
          position: fixed;
-          bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
-          right: calc(16px + var(--safe-area-inset-right, 0px));
        }
      `,
    ];
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -1139,7 +1139,7 @@ export class HaScriptEditor extends SubscribeMixin(
          transition: bottom 0.3s;
        }
        ha-fab.dirty {
-          bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
+          bottom: 16px;
        }
        li[role="separator"] {
          border-bottom-color: var(--divider-color);
--- a/src/panels/custom/ha-panel-custom.ts
+++ b/src/panels/custom/ha-panel-custom.ts
@@ -147,19 +147,10 @@ export class HaPanelCustom extends ReactiveElement {
      <style>
        iframe {
          border: 0;
-          width: calc(100% - var(--safe-area-inset-right, 0px));
-          height: calc(100% - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px));
+          width: 100%;
+          height: 100%;
          display: block;
          background-color: var(--primary-background-color);
-          margin-top: var(--safe-area-inset-top);
-          margin-bottom: var(--safe-area-inset-bottom);
-          margin-right: var(--safe-area-inset-right);
-        }
-        @media (max-width: 870px) {
-          iframe {
-            width: calc(100% - var(--safe-area-inset-left, 0px) - var(--safe-area-inset-right, 0px));
-            margin-left: var(--safe-area-inset-left);
-          }
        }
      </style>
      <iframe ${titleAttr}></iframe>`.trim();
--- a/src/panels/developer-tools/action/developer-tools-action.ts
+++ b/src/panels/developer-tools/action/developer-tools-action.ts
@@ -2,10 +2,9 @@ import { mdiHelpCircle } from "@mdi/js";
 import type { HassService } from "home-assistant-js-websocket";
 import { ERR_CONNECTION_LOST } from "home-assistant-js-websocket";
 import { load } from "js-yaml";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
 import { storage } from "../../../common/decorators/storage";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -38,7 +37,6 @@ import {
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
-import { resolveMediaSource } from "../../../data/media_source";

@customElement("developer-tools-action")
 class HaPanelDevAction extends LitElement {
@@ -48,12 +46,7 @@ class HaPanelDevAction extends LitElement {

  @state() private _uiAvailable = true;

-  @state() private _response?: {
-    domain: string;
-    service: string;
-    result: Record<string, any>;
-    media?: Promise<TemplateResult | typeof nothing>;
-  };
+  @state() private _response?: Record<string, any>;

  @state() private _error?: string;

@@ -206,7 +199,7 @@ class HaPanelDevAction extends LitElement {
        </div>
      </div>
      ${this._response
-        ? html`<div class="content response">
+        ? html`<div class="content">
            <ha-card
              .header=${this.hass.localize(
                "ui.panel.developer-tools.tabs.actions.response"
@@ -219,7 +212,7 @@ class HaPanelDevAction extends LitElement {
                  read-only
                  auto-update
                  has-extra-actions
-                  .value=${this._response.result}
+                  .value=${this._response}
                >
                  <ha-button
                    appearance="plain"
@@ -230,7 +223,6 @@ class HaPanelDevAction extends LitElement {
                    )}</ha-button
                  >
                </ha-yaml-editor>
-                ${until(this._response.media)}
              </div>
            </ha-card>
          </div>`
@@ -336,7 +328,7 @@ class HaPanelDevAction extends LitElement {

  private async _copyTemplate(): Promise<void> {
    await copyToClipboard(
-      `{% set ${this._serviceData?.response_variable || "action_response"} = ${JSON.stringify(this._response!.result)} %}`
+      `{% set ${this._serviceData?.response_variable || "action_response"} = ${JSON.stringify(this._response)} %}`
    );
    showToast(this, {
      message: this.hass.localize("ui.common.copied_clipboard"),
@@ -486,48 +478,7 @@ class HaPanelDevAction extends LitElement {
    }
    button.progress = true;
    try {
-      const result = (await callExecuteScript(this.hass, script)).response;
-      this._response = {
-        domain,
-        service,
-        result,
-        media:
-          "media_source_id" in result
-            ? resolveMediaSource(this.hass, result.media_source_id).then(
-                (resolved) =>
-                  resolved.mime_type.startsWith("image/")
-                    ? html`<img src=${resolved.url} alt="Media content" />`
-                    : resolved.mime_type.startsWith("video/")
-                      ? html`
-                          <video
-                            controls
-                            src=${resolved.url}
-                            alt="Video content"
-                          ></video>
-                        `
-                      : resolved.mime_type.startsWith("audio/")
-                        ? html`
-                            <audio
-                              controls
-                              src=${resolved.url}
-                              alt="Audio content"
-                            ></audio>
-                          `
-                        : html`
-                            <a
-                              href=${resolved.url}
-                              target="_blank"
-                              rel="noreferrer"
-                              ><ha-button>
-                                ${this.hass.localize(
-                                  "ui.panel.developer-tools.tabs.actions.open_media"
-                                )}
-                              </ha-button></a
-                            >
-                          `
-              )
-            : undefined,
-      };
+      this._response = (await callExecuteScript(this.hass, script)).response;
    } catch (err: any) {
      if (
        err.error?.code === ERR_CONNECTION_LOST &&
@@ -661,11 +612,19 @@ class HaPanelDevAction extends LitElement {
      css`
        .content {
          padding: 16px;
+          padding: max(16px, var(--safe-area-inset-top))
+            max(16px, var(--safe-area-inset-right))
+            max(16px, var(--safe-area-inset-bottom))
+            max(16px, var(--safe-area-inset-left));
          max-width: 1200px;
          margin: auto;
        }
        .button-row {
          padding: 8px 16px;
+          padding: max(8px, var(--safe-area-inset-top))
+            max(16px, var(--safe-area-inset-right))
+            max(8px, var(--safe-area-inset-bottom))
+            max(16px, var(--safe-area-inset-left));
          border-top: 1px solid var(--divider-color);
          border-bottom: 1px solid var(--divider-color);
          background: var(--card-background-color);
@@ -731,12 +690,6 @@ class HaPanelDevAction extends LitElement {
          display: flex;
          align-items: center;
        }
-
-        .response img {
-          max-width: 100%;
-          height: auto;
-          margin-top: 24px;
-        }
      `,
    ];
  }
--- a/src/panels/developer-tools/assist/developer-tools-assist.ts
+++ b/src/panels/developer-tools/assist/developer-tools-assist.ts
@@ -241,6 +241,10 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
      css`
        .content {
          padding: 28px 20px 16px;
+          padding: max(28px, calc(12px + var(--safe-area-inset-top)))
+            max(20px, calc(4px + var(--safe-area-inset-right)))
+            max(16px, var(--safe-area-inset-bottom))
+            max(20px, calc(4px + var(--safe-area-inset-left)));
          max-width: 1040px;
          margin: 0 auto;
        }
--- a/Show More
+++ b/Show More