From b5c85c62c71972f75c20ed80e9109dcd116d3db6 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 6 Apr 2026 14:24:31 +0300
Subject: [PATCH] Add responsive breakpoints for IoT Hub home page matching
 design

- LG (1600px): 4-col big cards, 2-col compact cards
- MD (1280px): 3-col big cards, 1-col compact, 2-col categories, hero 40px title
- SM (960px): 2-col big cards, smaller floating icons
- XS (600px): single-col categories, hidden floating icons, reduced padding
- Search page: propagate search to type pages, mat-select paginator
---
 .../pages/iot-hub/iot-hub-home.component.scss | 100 ++++++++++++++++--
 1 file changed, 92 insertions(+), 8 deletions(-)

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 0cd5fdbf9c..b81f104aee 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
@@ -606,10 +606,12 @@
   animation: iot-hub-fade-slide-up 1s cubic-bezier(0.19, 1, 0.22, 1) 0.2s both;
 }
 
-// Responsive
-@media (max-width: 1200px) {
+// Responsive — breakpoints from design: LG=1280, MD=960, SM=600, XS=375
+
+// LG: 1280px content area (sidebar present)
+@media (max-width: 1600px) {
   .tb-iot-hub-big-cards-row {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
   }
 
   .tb-iot-hub-compact-cards-grid {
@@ -617,24 +619,106 @@
   }
 }
 
-@media (max-width: 900px) {
+// MD: 960px viewport — sidebar present, narrower content
+@media (max-width: 1280px) {
+  .tb-iot-hub-big-cards-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .tb-iot-hub-compact-cards-grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
   .tb-iot-hub-categories {
     grid-template-columns: repeat(2, 1fr);
 
     .tb-iot-hub-category-card {
-      height: 180px;
+      height: 189px;
     }
   }
 
+  .tb-iot-hub-hero {
+    padding: 100px 24px 60px;
+  }
+
+  .tb-iot-hub-hero-title {
+    font-size: 40px;
+  }
+
+  .tb-iot-hub-hero-subtitle {
+    font-size: 18px;
+    line-height: 22px;
+  }
+
+  .tb-iot-hub-section {
+    padding: 0 24px;
+  }
+
+  .tb-iot-hub-become-creator {
+    padding: 64px 24px;
+  }
+}
+
+// SM: 600px viewport — sidebar hidden, full width
+@media (max-width: 960px) {
   .tb-iot-hub-big-cards-row {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .tb-iot-hub-hero-title {
-    font-size: 36px;
+  .tb-iot-hub-categories {
+    .tb-iot-hub-category-card {
+      height: 168px;
+    }
+  }
+
+  .tb-iot-hub-hero-float-icon {
+    width: 51px;
+    height: 51px;
+
+    img {
+      width: 51px;
+      height: 51px;
+    }
+  }
+}
+
+// XS: 375px viewport — single column, stacked layout
+@media (max-width: 600px) {
+  :host {
+    padding: 8px;
   }
 
   .tb-iot-hub-hero {
-    padding: 80px 24px 40px;
+    padding: 80px 16px 40px;
+  }
+
+  .tb-iot-hub-categories {
+    grid-template-columns: 1fr;
+    padding-bottom: 32px;
+
+    .tb-iot-hub-category-card {
+      height: 197px;
+    }
+  }
+
+  .tb-iot-hub-big-cards-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .tb-iot-hub-section {
+    padding: 0 16px;
+  }
+
+  .tb-iot-hub-become-creator {
+    padding: 48px 16px;
+  }
+
+  .tb-iot-hub-hero-float-icon {
+    display: none;
+  }
+
+  .tb-iot-hub-installed-btn {
+    top: 12px;
+    right: 12px;
   }
 }