feat(telegram): clear bottom and side safe-area insets

Only the device safe-area TOP inset was mirrored, so on phones with a home
indicator the rack / bottom bar sat under it, and in landscape the notch
clipped the screen edges.

Mirror the full device safe-area inset (bottom / left / right) into new
--tg-safe-bottom / --tg-safe-left / --tg-safe-right CSS vars (0 outside
Telegram) and pad the shared Screen wrapper by them, so every screen clears the
home indicator and the landscape notch; the top inset stays owned by the header.
Replace telegramSafeAreaTop with telegramSafeAreaInset (the full inset object),
with a unit test.

ui/src/lib/telegram.ts

@@ -274,13 +274,15 @@ export function telegramContentSafeAreaTop(): number {
 }
 
 /**
- * telegramSafeAreaTop returns the device safe-area top inset (px) — the notch / status bar
- * (Bot API 8.0). Telegram's own nav controls sit in the band between it and
- * telegramContentSafeAreaTop, so aligning our header to that band lines it up with them. 0
- * outside Telegram or on older clients.
+ * telegramSafeAreaInset returns the device safe-area insets (px) — the notch / status bar (top),
+ * the home indicator (bottom) and, in landscape, the notch sides (left / right) — from the SDK's
+ * safeAreaInset (Bot API 8.0). All 0 outside Telegram or on a client predating it, so callers can
+ * pad defensively. Telegram's own nav controls sit in the band between the top inset and
+ * telegramContentSafeAreaTop, so aligning our header to that band lines it up with them.
  */
-export function telegramSafeAreaTop(): number {
-  return webApp()?.safeAreaInset?.top ?? 0;
+export function telegramSafeAreaInset(): { top: number; bottom: number; left: number; right: number } {
+  const i = webApp()?.safeAreaInset;
+  return { top: i?.top ?? 0, bottom: i?.bottom ?? 0, left: i?.left ?? 0, right: i?.right ?? 0 };
 }
 
 /**