From 0db943f4422e6f65546c1b2a09c5715769067b3c Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 22 Jun 2026 14:46:20 +0300
Subject: [PATCH 1/2] fix(iot-hub): let active-filters row grow when chips wrap
 so card grid doesn't overlap

PROD-8420: .tb-iot-hub-sort-row was locked to height: 32px, so when many use-case filters were selected the chip-set wrapped to multiple lines but the row stayed one line tall and the card grid below rendered on top of the wrapped chips. Switch to min-height: 32px so the row keeps its baseline single-line height when empty but grows naturally with wrapped chips.
---
 .../home/components/iot-hub/iot-hub-browse.component.scss  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss
index fc685f5b90..1f04befb6a 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss
@@ -359,14 +359,17 @@
   }
 }
 
-// Filter chips row — Design: 32px tall, no padding, centered
 .tb-iot-hub-sort-row {
-  height: 32px;
+  min-height: 32px;
   align-items: center;
   padding: 0;
   margin-top: 16px;
   margin-bottom: 12px;
 
+  ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips {
+    row-gap: 8px;
+  }
+
   .mat-mdc-chip {
     margin-top: 0;
     margin-bottom: 0;

From 304904cedb8ca006f8a06fe50880af5d9bed25cd Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 22 Jun 2026 14:46:23 +0300
Subject: [PATCH 2/2] fix(home): reset main-content scroll on route navigation
 so pages open at the top

PROD-8423: .tb-main-content (the scroll container holding the router-outlet in home.component.html) keeps its scrollTop across route changes, so navigating from a scrolled-down IoT Hub home to a child page (e.g. Calculated Fields) opened the new page already scrolled. Angular's scrollPositionRestoration only handles window scroll, not arbitrary containers. Add a #mainContent ref, capture the ElementRef, and reset its scroll position in the existing (activate) handler so every route navigation lands at the top.
---
 ui-ngx/src/app/modules/home/home.component.html | 2 +-
 ui-ngx/src/app/modules/home/home.component.ts   | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html
index 10c15080f6..03ce291f18 100644
--- a/ui-ngx/src/app/modules/home/home.component.html
+++ b/ui-ngx/src/app/modules/home/home.component.html
@@ -79,7 +79,7 @@
       <mat-progress-bar color="warn" style="z-index: 10; margin-bottom: -4px; width: 100%;" mode="indeterminate"
                         *ngIf="!hideLoadingBar && (isLoading$ | async)">
       </mat-progress-bar>
-      <div tb-toast class="tb-main-content flex flex-1 flex-col">
+      <div #mainContent tb-toast class="tb-main-content flex flex-1 flex-col">
         <router-outlet (activate)="activeComponentChanged($event)"></router-outlet>
       </div>
     </div>
diff --git a/ui-ngx/src/app/modules/home/home.component.ts b/ui-ngx/src/app/modules/home/home.component.ts
index 6191280933..1bd9b73386 100644
--- a/ui-ngx/src/app/modules/home/home.component.ts
+++ b/ui-ngx/src/app/modules/home/home.component.ts
@@ -58,6 +58,8 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
   @ViewChild('sidenav')
   sidenav: MatSidenav;
 
+  @ViewChild('mainContent', { static: true }) mainContent: ElementRef<HTMLElement>;
+
   @ViewChild('searchInput') searchInputField: ElementRef;
 
   fullscreenEnabled = screenfull.isEnabled;
@@ -136,6 +138,7 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
 
   activeComponentChanged(activeComponent: any) {
     this.activeComponentService.setCurrentActiveComponent(activeComponent);
+    this.mainContent?.nativeElement?.scrollTo({ top: 0, left: 0 });
     if (!this.activeComponent) {
       setTimeout(() => {
         this.updateActiveComponent(activeComponent);