From dcbafcf4233a19c3d0dfe5c40e85cc5078eccc9f Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 17 Jun 2026 17:40:32 +0300
Subject: [PATCH] style(iot-hub): scroll long creator description + links
 inside their own container

Wrap the creator description and social-link block in a flex column that takes the remaining height with overflow-y:auto, so long bios scroll inside the left rail instead of pushing the avatar off-screen. Lock the avatar's min-height to keep its circle from collapsing.
---
 .../iot-hub-creator-profile.component.html    | 76 ++++++++++---------
 .../iot-hub-creator-profile.component.scss    | 13 ++++
 2 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html
index f599fcc743..9e181dff63 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html
@@ -41,7 +41,7 @@
           <mat-icon>chevron_left</mat-icon>
           {{ 'iot-hub.back-to-iot-hub' | translate }}
         </button>
-        <div class="flex flex-col gap-4">
+        <div class="flex min-h-0 flex-1 flex-col gap-4">
           <div class="tb-creator-avatar">
             @if (getAvatarUrl(); as avatarUrl) {
               <img [src]="avatarUrl" alt="">
@@ -57,46 +57,48 @@
                         matTooltipPosition="above">verified</mat-icon>
             }
           </div>
-          @if (creator.description) {
-            <p class="tb-creator-desc">{{ creator.description }}</p>
-          }
-          <div class="flex flex-col gap-1">
-            @if (creator.website) {
-              <a class="tb-creator-link tb-creator-link-primary" [href]="creator.website" target="_blank">
-                <mat-icon>language</mat-icon>
-                <span>{{ getWebsiteLabel() }}</span>
-              </a>
+          <div class="tb-creator-desc-container">
+            @if (creator.description) {
+              <p class="tb-creator-desc">{{ creator.description }}</p>
             }
-            @if (creator.contactEmail) {
-              <span class="tb-creator-link">
+            <div class="flex flex-col gap-1">
+              @if (creator.website) {
+                <a class="tb-creator-link tb-creator-link-primary" [href]="creator.website" target="_blank">
+                  <mat-icon>language</mat-icon>
+                  <span>{{ getWebsiteLabel() }}</span>
+                </a>
+              }
+              @if (creator.contactEmail) {
+                <span class="tb-creator-link">
                 <tb-icon>mdi:email-outline</tb-icon>
                 <span>{{ creator.contactEmail }}</span>
               </span>
-            }
-            @if (creator.githubUrl) {
-              <a class="tb-creator-link" [href]="creator.githubUrl" target="_blank">
-                <tb-icon>mdi:github</tb-icon>
-                <span>GitHub</span>
-              </a>
-            }
-            @if (creator.linkedinUrl) {
-              <a class="tb-creator-link" [href]="creator.linkedinUrl" target="_blank">
-                <tb-icon>mdi:linkedin</tb-icon>
-                <span>LinkedIn</span>
-              </a>
-            }
-            @if (creator.twitterUrl) {
-              <a class="tb-creator-link" [href]="creator.twitterUrl" target="_blank">
-                <tb-icon>mdi:twitter</tb-icon>
-                <span>X</span>
-              </a>
-            }
-            @if (creator.youtubeUrl) {
-              <a class="tb-creator-link" [href]="creator.youtubeUrl" target="_blank">
-                <tb-icon>mdi:youtube</tb-icon>
-                <span>YouTube</span>
-              </a>
-            }
+              }
+              @if (creator.githubUrl) {
+                <a class="tb-creator-link" [href]="creator.githubUrl" target="_blank">
+                  <tb-icon>mdi:github</tb-icon>
+                  <span>GitHub</span>
+                </a>
+              }
+              @if (creator.linkedinUrl) {
+                <a class="tb-creator-link" [href]="creator.linkedinUrl" target="_blank">
+                  <tb-icon>mdi:linkedin</tb-icon>
+                  <span>LinkedIn</span>
+                </a>
+              }
+              @if (creator.twitterUrl) {
+                <a class="tb-creator-link" [href]="creator.twitterUrl" target="_blank">
+                  <tb-icon>mdi:twitter</tb-icon>
+                  <span>X</span>
+                </a>
+              }
+              @if (creator.youtubeUrl) {
+                <a class="tb-creator-link" [href]="creator.youtubeUrl" target="_blank">
+                  <tb-icon>mdi:youtube</tb-icon>
+                  <span>YouTube</span>
+                </a>
+              }
+            </div>
           </div>
         </div>
       </div>
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss
index 885ef74812..3163c89674 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss
@@ -68,6 +68,7 @@
   width: 140px;
   height: 140px;
   min-width: 140px;
+  min-height: 140px;
   border-radius: 50%;
   overflow: hidden;
   display: flex;
@@ -107,6 +108,18 @@
   cursor: default;
 }
 
+.tb-creator-desc-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  @media #{$mat-gt-md} {
+    padding-bottom: 1rem;
+  }
+}
+
 // Description
 .tb-creator-desc {
   font-size: 16px;