From 78cfbf4b32e9ecf0660ac217c75dd8f4c6fb5953 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 19 Jun 2026 18:27:30 +0300
Subject: [PATCH] fix(iot-hub): mobile detail-dialog stacks
 preview+description, hero shrinks on lt-sm, device install URL falls back to
 first created device

Detail dialog non-CF/RC layout stacks the preview and description on lt-md instead of overflowing horizontally. Hero cluster moves up to 15% and title drops to 28px on the smallest viewport. getInstalledItemUrl for DEVICE descriptors now falls back to the first DEVICE entry in createdEntityIds when dashboardId is missing, so single-device packages still resolve to an entity URL.
---
 .../iot-hub-item-detail-dialog.component.html        |  2 +-
 .../home/pages/iot-hub/iot-hub-home.component.scss   |  8 ++++++++
 .../models/iot-hub/iot-hub-installed-item.models.ts  | 12 ++++++++++--
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
index e42f1521aa..30d9322dd9 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
@@ -96,7 +96,7 @@
         </div>
       } @else {
         <!-- Widget/Dashboard/Solution: image + description side by side -->
-        <div class="flex gap-6">
+        <div class="flex gap-6 lt-md:flex-col">
           <div class="dlg-preview"
                [class.dlg-preview-carousel]="item.type === ItemType.SOLUTION_TEMPLATE && carouselImages.length > 1">
             @if (item.type === ItemType.SOLUTION_TEMPLATE && carouselImages.length > 1) {
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss
index f0768bf330..c433bad1a9 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss
@@ -757,6 +757,14 @@
     padding: 140px 16px 40px;
   }
 
+  .tb-iot-hub-hero-cluster {
+    top: 15%;
+  }
+
+  .tb-iot-hub-hero-title {
+    font-size: 28px;
+  }
+
   .tb-iot-hub-categories {
     grid-template-columns: 1fr;
   }
diff --git a/ui-ngx/src/app/shared/models/iot-hub/iot-hub-installed-item.models.ts b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-installed-item.models.ts
index b2320453bb..b2bb0e7ad9 100644
--- a/ui-ngx/src/app/shared/models/iot-hub/iot-hub-installed-item.models.ts
+++ b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-installed-item.models.ts
@@ -140,8 +140,16 @@ export const getInstalledItemUrl = (descriptor?: IotHubInstalledItemDescriptor):
   let query: string | null = null;
   switch (descriptor.type) {
     case 'DEVICE':
-      entityId = descriptor.dashboardId?.id;
-      entityType = EntityType.DASHBOARD;
+      if (descriptor.dashboardId) {
+        entityId = descriptor.dashboardId?.id;
+        entityType = EntityType.DASHBOARD;
+      } else if (descriptor.createdEntityIds) {
+        const found = descriptor.createdEntityIds.find(id => id.entityType === EntityType.DEVICE);
+        if (found) {
+          entityId = found.id;
+          entityType = EntityType.DEVICE;
+        }
+      }
       break;
     case 'WIDGET':
       entityId = descriptor.widgetTypeId?.id;