feat: enhance CSS and components for Telegram Mini App performance

- Updated CSS to utilize viewport variables for safe area insets and stable height, improving layout consistency across devices.
- Introduced haptic feedback triggers in various components to enhance user interaction, mimicking native Telegram behavior.
- Added functionality to detect Android performance class, minimizing animations on low-performance devices for better user experience.
- Refactored components to incorporate new CSS classes for content safety and improved responsiveness.

webapp-next/src/lib/telegram-ready.ts

@@ -1,15 +1,17 @@
 /**
- * Single-call wrapper for Telegram Mini App ready().
+ * Single-call wrapper for Telegram Mini App ready() and expand().
  * Called once when the first visible screen has finished loading so Telegram
  * hides its native loading animation only after our content is ready.
+ * Also expands the Mini App to full height when supported.
  */
 
-import { miniAppReady } from "@telegram-apps/sdk-react";
+import { miniAppReady, expandViewport } from "@telegram-apps/sdk-react";
 
 let readyCalled = false;
 
 /**
- * Calls Telegram miniAppReady() at most once per session.
+ * Calls Telegram miniAppReady() at most once per session, then expandViewport()
+ * when available so the app opens to full height.
  * Safe when SDK is unavailable (e.g. non-Telegram environment).
  */
 export function callMiniAppReadyOnce(): void {
@@ -19,6 +21,9 @@ export function callMiniAppReadyOnce(): void {
       miniAppReady();
       readyCalled = true;
     }
+    if (expandViewport.isAvailable()) {
+      expandViewport();
+    }
   } catch {
     // SDK not available or not in Mini App context; no-op.
   }