Refactor ConnectionModal and TopUpModal: reintroduce app selector logic in ConnectionModal, implement body scroll locking in TopUpModal, and adjust modal styling for improved responsiveness and user experience.

src/components/ConnectionModal.tsx

@@ -267,6 +267,19 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
     return available
   }, [appConfig, detectedPlatform])
 
+  // Get all apps for selector (must be before any conditional returns)
+  const allAppsForSelector = useMemo(() => {
+    if (!appConfig?.platforms) return []
+    const result: { platform: string; apps: AppInfo[] }[] = []
+    for (const platform of availablePlatforms) {
+      const apps = appConfig.platforms[platform]
+      if (apps?.length) {
+        result.push({ platform, apps })
+      }
+    }
+    return result
+  }, [appConfig, availablePlatforms])
+
   const copySubscriptionLink = async () => {
     if (!appConfig?.subscriptionUrl) return
     try {
@@ -371,19 +384,6 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
     )
   }
 
-  // Get all apps for selector
-  const allAppsForSelector = useMemo(() => {
-    if (!appConfig?.platforms) return []
-    const result: { platform: string; apps: AppInfo[] }[] = []
-    for (const platform of availablePlatforms) {
-      const apps = appConfig.platforms[platform]
-      if (apps?.length) {
-        result.push({ platform, apps })
-      }
-    }
-    return result
-  }, [appConfig, availablePlatforms])
-
   // App selector view
   if (showAppSelector || !selectedApp) {
     return (