From e797b1e282d4fef7437f3905e7728a0b8a841673 Mon Sep 17 00:00:00 2001 From: Egor Date: Tue, 20 Jan 2026 13:50:37 +0300 Subject: [PATCH 1/5] Update ConnectionModal.tsx --- src/components/ConnectionModal.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx index 2c031fb..a94403e 100644 --- a/src/components/ConnectionModal.tsx +++ b/src/components/ConnectionModal.tsx @@ -113,10 +113,13 @@ function detectPlatform(): string | null { } function useIsMobile() { - const [isMobile, setIsMobile] = useState(false) + // Initialize synchronously to avoid flash between desktop/mobile layouts + const [isMobile, setIsMobile] = useState(() => { + if (typeof window === 'undefined') return false + return window.innerWidth < 768 + }) useEffect(() => { const check = () => setIsMobile(window.innerWidth < 768) - check() window.addEventListener('resize', check) return () => window.removeEventListener('resize', check) }, []) From d57419e338eea71e5958d2ca057f6b52589d8bc7 Mon Sep 17 00:00:00 2001 From: Egor Date: Tue, 20 Jan 2026 13:51:08 +0300 Subject: [PATCH 2/5] Update useTelegramWebApp.ts --- src/hooks/useTelegramWebApp.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/hooks/useTelegramWebApp.ts b/src/hooks/useTelegramWebApp.ts index 31f5d01..4fc5b03 100644 --- a/src/hooks/useTelegramWebApp.ts +++ b/src/hooks/useTelegramWebApp.ts @@ -25,13 +25,14 @@ export const setCachedFullscreenEnabled = (enabled: boolean) => { * Provides fullscreen mode, safe area insets, and other WebApp features */ export function useTelegramWebApp() { - const [isFullscreen, setIsFullscreen] = useState(false) - const [isTelegramWebApp, setIsTelegramWebApp] = useState(false) - const [safeAreaInset, setSafeAreaInset] = useState({ top: 0, bottom: 0, left: 0, right: 0 }) - const [contentSafeAreaInset, setContentSafeAreaInset] = useState({ top: 0, bottom: 0, left: 0, right: 0 }) - + // Initialize synchronously to avoid flash/flicker on first render const webApp = typeof window !== 'undefined' ? window.Telegram?.WebApp : undefined + const [isFullscreen, setIsFullscreen] = useState(() => webApp?.isFullscreen || false) + const [isTelegramWebApp, setIsTelegramWebApp] = useState(() => !!webApp) + const [safeAreaInset, setSafeAreaInset] = useState(() => webApp?.safeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 }) + const [contentSafeAreaInset, setContentSafeAreaInset] = useState(() => webApp?.contentSafeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 }) + useEffect(() => { if (!webApp) { setIsTelegramWebApp(false) From 89c5726e2c682dcacac211f4d5deaf3a0bb3532c Mon Sep 17 00:00:00 2001 From: Egor Date: Tue, 20 Jan 2026 13:51:52 +0300 Subject: [PATCH 3/5] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 8f9b149..e654320 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + From 4fc2dbc2d5ccf4d008257e367da0bb437f516e33 Mon Sep 17 00:00:00 2001 From: Egor Date: Tue, 20 Jan 2026 14:03:10 +0300 Subject: [PATCH 4/5] Update ConnectionModal.tsx --- src/components/ConnectionModal.tsx | 38 ++++++++++++++++++------------ 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx index a94403e..6490c0b 100644 --- a/src/components/ConnectionModal.tsx +++ b/src/components/ConnectionModal.tsx @@ -135,7 +135,8 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) { const { isTelegramWebApp, isFullscreen, safeAreaInset, contentSafeAreaInset } = useTelegramWebApp() const isMobileScreen = useIsMobile() - const isMobile = isMobileScreen || isTelegramWebApp + // Use mobile layout only on small screens, even in Telegram Desktop + const isMobile = isMobileScreen const safeBottom = isTelegramWebApp ? Math.max(safeAreaInset.bottom, contentSafeAreaInset.bottom) : 0 // In fullscreen mode, add +45px for Telegram native controls (close/menu buttons in corners) @@ -211,10 +212,23 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) { window.location.href = redirectUrl } - // Desktop modal wrapper + // Desktop modal wrapper - compact centered modal with max height const DesktopWrapper = ({ children }: { children: React.ReactNode }) => ( -
-
e.stopPropagation()}> +
+
e.stopPropagation()} + > + {/* Desktop close button */} + {children}
@@ -260,7 +274,7 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) { if (isLoading) { return ( -
+
@@ -271,7 +285,7 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) { if (error || !appConfig) { return ( -
+
😕

{t('common.error')}

@@ -284,7 +298,7 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) { if (!appConfig.hasSubscription) { return ( -
+
📱

{t('subscription.connection.title')}

{t('subscription.connection.noSubscription')}

@@ -317,7 +331,7 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
{/* Apps grouped by platform */} -
+
{availablePlatforms.map(platform => { const apps = appConfig.platforms[platform] if (!apps?.length) return null @@ -390,7 +404,7 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
{/* Content */} -
+
{/* Step 1 */} {selectedApp?.installationStep && (
@@ -464,12 +478,6 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) { )}
- {/* Desktop footer */} - {!isMobile && ( -
- -
- )} ) } From 70f9830e79a62324b758fa55dadf39b8b3a8e5ea Mon Sep 17 00:00:00 2001 From: Egor Date: Tue, 20 Jan 2026 14:08:52 +0300 Subject: [PATCH 5/5] Update ConnectionModal.tsx --- src/components/ConnectionModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx index 6490c0b..c1563c8 100644 --- a/src/components/ConnectionModal.tsx +++ b/src/components/ConnectionModal.tsx @@ -215,7 +215,7 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) { // Desktop modal wrapper - compact centered modal with max height const DesktopWrapper = ({ children }: { children: React.ReactNode }) => (