From 6aeb225a171fc4d999d42f389e170e96fc01f54d Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 6 May 2026 14:52:52 +0300
Subject: [PATCH] fix(iot-hub): widen connectivity cards when exactly two
 methods are available

Apply a tb-connectivity-cards-pair modifier to the card grid when
availableInstallMethods.length === 2 and switch its tracks to
repeat(auto-fill, minmax(300px, 1fr)) so the two cards spread to
sensible widths instead of squeezing into the 240px minimum.
---
 .../device-install-dialog.component.html                     | 3 ++-
 .../device-install-dialog.component.scss                     | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
index 82f8ea9a2b..7b4f00ecc0 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
@@ -30,7 +30,8 @@
       @case ('connectivity') {
         <div class="tb-device-install-connectivity flex flex-col gap-5 p-6">
           <p>{{ 'iot-hub.device-install-select-connectivity' | translate }}</p>
-          <div class="tb-connectivity-cards">
+          <div class="tb-connectivity-cards"
+               [class.tb-connectivity-cards-pair]="availableInstallMethods.length === 2">
             @for (ct of availableInstallMethods; track ct) {
               <button type="button"
                       class="tb-connectivity-card"
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss
index 83f3642be1..ed14ceda8d 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss
@@ -92,10 +92,15 @@
   }
 
   // Card grid — design uses 276px cards with 12px gap, wrapping into rows.
+  // The 2-card variant uses a wider min-track so they don't squeeze.
   .tb-connectivity-cards {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
     gap: 12px;
+
+    &.tb-connectivity-cards-pair {
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    }
   }
 
   // Connection-card-vertical from the design: primary-tinted surface