etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 17:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
PEDZEO
2026-01-20 01:21:40 +03:00
parent fbb87c8b0e
commit 6048d90e46
2 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/layout/Layout.tsx
View File

@@ -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 */}