From d567817e0564f2438d4192eb7b2321e1725da266 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 27 Feb 2026 09:27:36 +0300
Subject: [PATCH] fix: show progress bar instead of dots when device_limit > 10

Match the Dashboard behavior: show individual dots for <= 10 devices,
switch to a compact progress bar for higher limits (e.g. 18 devices).
Prevents dot overflow breaking the connect-device card layout on mobile.
---
 src/pages/Subscription.tsx | 41 ++++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index ec29ae3..fcef62e 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -692,18 +692,37 @@ export default function Subscription() {
                       })}
                     </div>
                   </div>
-                  <div className="flex flex-shrink-0 gap-1.5" aria-hidden="true">
-                    {Array.from({ length: subscription.device_limit }, (_, i) => (
+                  {subscription.device_limit <= 10 ? (
+                    <div className="flex flex-shrink-0 gap-1.5" aria-hidden="true">
+                      {Array.from({ length: subscription.device_limit }, (_, i) => (
+                        <div
+                          key={i}
+                          className="h-[7px] w-[7px] rounded-full transition-[background-color,box-shadow] duration-300"
+                          style={{
+                            background: i < connectedDevices ? zone.mainHex : g.textGhost,
+                            boxShadow: i < connectedDevices ? `0 0 6px ${zone.mainHex}50` : 'none',
+                          }}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="flex w-16 flex-shrink-0 items-center" aria-hidden="true">
                       <div
-                        key={i}
-                        className="h-[7px] w-[7px] rounded-full transition-[background-color,box-shadow] duration-300"
-                        style={{
-                          background: i < connectedDevices ? zone.mainHex : g.textGhost,
-                          boxShadow: i < connectedDevices ? `0 0 6px ${zone.mainHex}50` : 'none',
-                        }}
-                      />
-                    ))}
-                  </div>
+                        className="h-[6px] w-full overflow-hidden rounded-full"
+                        style={{ background: g.textGhost }}
+                      >
+                        <div
+                          className="h-full rounded-full transition-[width] duration-500"
+                          style={{
+                            width: `${Math.round((connectedDevices / subscription.device_limit) * 100)}%`,
+                            background: zone.mainHex,
+                            boxShadow: `0 0 8px ${zone.mainHex}40`,
+                            minWidth: connectedDevices > 0 ? '4px' : '0px',
+                          }}
+                        />
+                      </div>
+                    </div>
+                  )}
                 </HoverBorderGradient>
               )}