From 675310afdff68b630a413daa16aa3cc9cceca00f Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 26 Jun 2025 13:04:13 +0200
Subject: [PATCH] add version number to integration page (#25940)

* add version number to integration page

* Update ha-config-integration-page.ts
---
 .../config/integrations/ha-config-integration-page.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/panels/config/integrations/ha-config-integration-page.ts b/src/panels/config/integrations/ha-config-integration-page.ts
index 639255962a..8b6f5c0d56 100644
--- a/src/panels/config/integrations/ha-config-integration-page.ts
+++ b/src/panels/config/integrations/ha-config-integration-page.ts
@@ -380,6 +380,11 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
               <div class="title">
                 <h1>${domainToName(this.hass.localize, this.domain)}</h1>
                 <div class="sub">
+                  ${this._manifest?.version != null
+                    ? html`<span class="version"
+                        >${this._manifest.version}</span
+                      >`
+                    : nothing}
                   ${this._manifest?.is_built_in === false
                     ? html`<div
                         class=${`integration-info ${
@@ -893,7 +898,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         }
         .title {
           display: flex;
-          gap: 8px;
+          gap: 4px;
           flex-direction: column;
           justify-content: space-between;
         }
@@ -911,6 +916,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
           display: flex;
           flex-wrap: wrap;
           gap: 8px 16px;
+          align-items: center;
         }
         .card-content {
           padding: 16px 0 8px;
@@ -934,9 +940,6 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
           width: 80px;
         }
         .version {
-          padding-top: 8px;
-          display: flex;
-          justify-content: center;
           color: var(--secondary-text-color);
         }
         .overview .card-actions {