Enhance Layout and useTelegramWebApp hook: add contentSafeAreaInset state and adjust header padding for fullscreen mode to improve layout responsiveness.

src/components/layout/Layout.tsx

@@ -142,7 +142,7 @@ export default function Layout({ children }: LayoutProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const { toggleTheme, isDark } = useTheme()
   const [userPhotoUrl, setUserPhotoUrl] = useState<string | null>(null)
-  const { isTelegramWebApp, isFullscreen, isFullscreenSupported, toggleFullscreen } = useTelegramWebApp()
+  const { isTelegramWebApp, isFullscreen, isFullscreenSupported, toggleFullscreen, safeAreaInset, contentSafeAreaInset } = useTelegramWebApp()
 
   // Fetch enabled themes from API - same source of truth as AdminSettings
   const { data: enabledThemes } = useQuery({
@@ -300,7 +300,13 @@ export default function Layout({ children }: LayoutProps) {
       <AnimatedBackground />
 
       {/* Header */}
-      <header className="sticky top-0 z-50 glass border-b border-dark-800/50">
+      <header
+        className="sticky top-0 z-50 glass border-b border-dark-800/50"
+        style={{
+          // In fullscreen mode, add padding for safe area (notch/camera)
+          paddingTop: isFullscreen ? `${Math.max(safeAreaInset.top, contentSafeAreaInset.top)}px` : undefined,
+        }}
+      >
         <div className="w-full mx-auto px-4 sm:px-6">
           <div className="flex justify-between items-center h-16 lg:h-20">
             {/* Logo */}

src/hooks/useTelegramWebApp.ts

@@ -8,6 +8,7 @@ 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 })
 
   const webApp = typeof window !== 'undefined' ? window.Telegram?.WebApp : undefined
 
@@ -20,6 +21,7 @@ export function useTelegramWebApp() {
     setIsTelegramWebApp(true)
     setIsFullscreen(webApp.isFullscreen || false)
     setSafeAreaInset(webApp.safeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 })
+    setContentSafeAreaInset(webApp.contentSafeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 })
 
     // Expand WebApp to full height
     webApp.expand()
@@ -29,12 +31,23 @@ export function useTelegramWebApp() {
     const handleFullscreenChanged = () => {
       setIsFullscreen(webApp.isFullscreen || false)
       setSafeAreaInset(webApp.safeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 })
+      setContentSafeAreaInset(webApp.contentSafeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 })
+    }
+
+    // Listen for safe area changes
+    const handleSafeAreaChanged = () => {
+      setSafeAreaInset(webApp.safeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 })
+      setContentSafeAreaInset(webApp.contentSafeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 })
     }
 
     webApp.onEvent('fullscreenChanged', handleFullscreenChanged)
+    webApp.onEvent('safeAreaChanged', handleSafeAreaChanged)
+    webApp.onEvent('contentSafeAreaChanged', handleSafeAreaChanged)
 
     return () => {
       webApp.offEvent('fullscreenChanged', handleFullscreenChanged)
+      webApp.offEvent('safeAreaChanged', handleSafeAreaChanged)
+      webApp.offEvent('contentSafeAreaChanged', handleSafeAreaChanged)
     }
   }, [webApp])
 
@@ -86,6 +99,7 @@ export function useTelegramWebApp() {
     isFullscreen,
     isFullscreenSupported,
     safeAreaInset,
+    contentSafeAreaInset,
     requestFullscreen,
     exitFullscreen,
     toggleFullscreen,