From 4a75d64829d1372d11a7bb68b60152e22a67a831 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 16 Apr 2026 15:43:17 +0300
Subject: [PATCH] fix(iot-hub): move search field to left, results count to
 sort row, filter button to right on mobile

---
 .../iot-hub/iot-hub-browse.component.html      | 18 +++++++-----------
 .../iot-hub/iot-hub-browse.component.scss      | 15 +--------------
 2 files changed, 8 insertions(+), 25 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html
index 9d3a04791e..523b1e11e1 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html
@@ -340,15 +340,8 @@
 
       <!-- Right content area -->
       <div class="tb-iot-hub-results">
-      <!-- Top bar: filter button (mobile) + results count + search + sort -->
+      <!-- Top bar: search + filter button (mobile) -->
       <div class="tb-iot-hub-results-top">
-        <button mat-stroked-button color="primary" class="tb-iot-hub-filter-toggle-btn" (click)="filterDrawerOpened = true">
-          <mat-icon>filter_list</mat-icon>
-          {{ 'iot-hub.filter' | translate }}@if (activeFilterCount) {: {{ activeFilterCount }}}
-        </button>
-        <span class="tb-iot-hub-results-count">
-          {{ 'iot-hub.results-count' | translate:{ count: totalElements } }}
-        </span>
         <div class="tb-iot-hub-search-field">
           <mat-icon class="tb-iot-hub-search-icon">search</mat-icon>
           <input class="tb-iot-hub-search-input"
@@ -361,12 +354,15 @@
             </button>
           }
         </div>
+        <button mat-stroked-button color="primary" class="tb-iot-hub-filter-toggle-btn" (click)="filterDrawerOpened = true">
+          <mat-icon>filter_list</mat-icon>
+          {{ 'iot-hub.filter' | translate }}@if (activeFilterCount) {: {{ activeFilterCount }}}
+        </button>
       </div>
 
-      <!-- Sort button -->
+      <!-- Sort row: results count + filter chips + sort -->
       <div class="tb-iot-hub-sort-row">
-        <!-- Results count (visible on small screens when filter chips are hidden) -->
-        <span class="tb-iot-hub-results-count-mobile">
+        <span class="tb-iot-hub-results-count">
           {{ 'iot-hub.results-count' | translate:{ count: totalElements } }}
         </span>
         <!-- Active filter chips (hidden on small screens) -->
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 73345849cd..6850001ac0 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
@@ -362,8 +362,7 @@
 }
 
 // Results count — Design: 14px Medium, rgba(0,0,0,0.76), tracking 0.25
-.tb-iot-hub-results-count,
-.tb-iot-hub-results-count-mobile {
+.tb-iot-hub-results-count {
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
@@ -371,10 +370,6 @@
   color: rgba(0, 0, 0, 0.76);
 }
 
-.tb-iot-hub-results-count-mobile {
-  display: none;
-}
-
 // Search field — Design: 320px, h-40, rounded-8, border rgba(0,0,0,0.12), white bg
 .tb-iot-hub-search-field {
   width: 320px;
@@ -644,10 +639,6 @@
     display: inline-flex;
   }
 
-  .tb-iot-hub-results-count {
-    display: none;
-  }
-
   .tb-iot-hub-sort-row {
     .tb-iot-hub-active-filters,
     .tb-iot-hub-clear-btn {
@@ -655,10 +646,6 @@
     }
   }
 
-  .tb-iot-hub-results-count-mobile {
-    display: inline;
-  }
-
   .tb-iot-hub-results {
     padding-left: 24px;
     padding-right: 24px;