From 1afd2f273b58e5e91ad9e041e32c04ae1d9a8e55 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 12 Jun 2026 18:35:19 +0300
Subject: [PATCH] style(iot-hub): detail dialog mobile close button + meta-grid
 overflow polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Split the detail dialog close button into desktop (inline in header) and mobile (absolute, top-right) variants. Switch meta-grid first column to minmax(0, …) so the creator section can shrink, and truncate the creator name with a tooltip. Add 8px right margin to the card type label.
---
 .../iot-hub/iot-hub-item-card.component.scss  |  1 +
 .../iot-hub-item-detail-dialog.component.html | 10 ++++---
 .../iot-hub-item-detail-dialog.component.scss | 27 ++++++++++++++++---
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss
index d46124d91e..71f3ea051d 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss
@@ -285,6 +285,7 @@
     font-weight: 500;
     color: rgba(0, 0, 0, 0.54);
     text-transform: uppercase;
+    margin-right: 8px;
 
     tb-icon {
       font-size: 12px;
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 3827599242..e42f1521aa 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
@@ -69,12 +69,16 @@
           </span>
         }
       }
-      <button mat-icon-button class="shrink-0" (click)="close()" type="button">
+      <button mat-icon-button class="dlg-close-btn-desktop" (click)="close()" type="button">
         <tb-icon>close</tb-icon>
       </button>
     </div>
   </div>
 
+  <button mat-icon-button class="dlg-close-btn-mobile" (click)="close()" type="button">
+    <tb-icon>close</tb-icon>
+  </button>
+
   <!-- Scrollable content -->
   <div class="dlg-body">
     <!-- Main content -->
@@ -163,7 +167,7 @@
       <div class="dlg-divider"></div>
       <div class="dlg-meta" [class.dlg-meta-4-col]="item.type === ItemType.SOLUTION_TEMPLATE || item.type === ItemType.DASHBOARD">
         @if (showCreator) {
-          <div class="dlg-meta-group">
+          <div class="dlg-meta-group dlg-meta-creator-section">
             <span class="dlg-meta-label">{{ 'iot-hub.creator' | translate }}</span>
             <div class="dlg-meta-creator" role="button" tabindex="0"
                  [class.clickable]="mode !== 'add'"
@@ -179,7 +183,7 @@
                   <mat-icon class="dlg-meta-creator-verified">verified</mat-icon>
                 }
               </div>
-              <span class="dlg-meta-creator-name">{{ item.creatorDisplayName }}</span>
+              <span class="dlg-meta-creator-name" tbTruncateWithTooltip>{{ item.creatorDisplayName }}</span>
             </div>
           </div>
         }
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss
index 0622ce4af5..5b7a182a01 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss
@@ -54,6 +54,21 @@
 
 }
 
+.dlg-close-btn-desktop {
+  @media #{$mat-lt-sm} {
+    display: none;
+  }
+}
+
+.dlg-close-btn-mobile {
+  position: absolute;
+  top: 16px;
+  right: 12px;
+  @media #{$mat-gt-xs} {
+    display: none;
+  }
+}
+
 // Header icon for CF/RC — Design: 64px, rounded-8, colored bg, white icon 36px
 .dlg-header-icon {
   width: 64px;
@@ -250,21 +265,25 @@
   display: grid;
   gap: 24px;
   padding: 16px 24px 12px;
-  grid-template-columns: max-content minmax(0, max-content) minmax(auto, max-content) minmax(auto, 1fr) max-content;
+  grid-template-columns: minmax(0, max-content) minmax(0, max-content) minmax(auto, max-content) minmax(auto, 1fr) max-content;
 
   &.dlg-meta-4-col {
-    grid-template-columns: max-content minmax(auto, max-content) minmax(auto, 1fr) max-content;
+    grid-template-columns: minmax(0, max-content) minmax(auto, max-content) minmax(auto, 1fr) max-content;
   }
 
   .dlg-meta-details {
     display: none;
   }
 
+  .dlg-meta-creator-section {
+    min-width: 0;
+  }
+
   @media #{$mat-lt-md} {
-    grid-template-columns: max-content max-content max-content;
+    grid-template-columns: minmax(0, 1fr) max-content max-content;
 
     &.dlg-meta-4-col {
-      grid-template-columns: max-content max-content max-content;
+      grid-template-columns: minmax(0, 1fr) max-content max-content;
     }
 
     .dlg-meta-details-section {