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

fix: UI improvements - reduce Android header, hide mobile scrollbar, disable animations in Telegram, consistent menu overlay

Browse Source
This commit is contained in:
c0mrade
2026-02-01 21:22:42 +03:00
parent 093c9f2893
commit 768b340c35
3 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/layout/AppShell/AppHeader.tsx
View File

@@ -182,7 +182,7 @@ export function AppHeader({
className="glass fixed left-0 right-0 top-0 z-50 shadow-lg shadow-black/10 lg:hidden"
style={{
paddingTop: isFullscreen
? `${Math.max(safeAreaInset.top, contentSafeAreaInset.top) + (telegramPlatform === 'android' ? 56 : 45)}px`
? `${Math.max(safeAreaInset.top, contentSafeAreaInset.top) + (telegramPlatform === 'android' ? 48 : 45)}px`
: undefined,
}}
>
@@ -319,14 +319,11 @@ export function AppHeader({
style={{ top: headerHeight }}
>
{/* Backdrop */}
<div
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
onClick={() => setMobileMenuOpen(false)}
/>
<div className="absolute inset-0 bg-black/60" onClick={() => setMobileMenuOpen(false)} />
{/* Menu content */}
<div
className="mobile-menu-content absolute inset-x-0 bottom-0 top-0 overflow-y-auto overscroll-contain border-t border-dark-800/50 bg-dark-900 pb-[calc(5rem+env(safe-area-inset-bottom,0px))]"
className="mobile-menu-content absolute inset-x-0 bottom-0 top-0 overflow-y-auto overscroll-contain border-t border-dark-800/50 bg-dark-900/95 pb-[calc(5rem+env(safe-area-inset-bottom,0px))]"
style={{ WebkitOverflowScrolling: 'touch' }}
>
<div className="mx-auto max-w-6xl px-4 py-4">

8
src/components/layout/AppShell/AppShell.tsx
View File

@@ -364,8 +364,8 @@ export function AppShell({ children }: AppShellProps) {
// Calculate header height based on fullscreen mode (only on mobile Telegram)
// On iOS: contentSafeAreaInset.top includes status bar + dynamic island + Telegram header
// On Android: safeAreaInset.top only includes status bar, need to add Telegram header height (~56px)
const telegramHeaderHeight = platform === 'android' ? 56 : 45;
// On Android: safeAreaInset.top only includes status bar, need to add Telegram header height (~48px)
const telegramHeaderHeight = platform === 'android' ? 48 : 45;
const headerHeight = isMobileFullscreen
? 64 + Math.max(safeAreaInset.top, contentSafeAreaInset.top) + telegramHeaderHeight
: 64;
@@ -503,8 +503,8 @@ export function AppShell({ children }: AppShellProps) {
{/* Main content */}
<main className="mx-auto max-w-6xl px-4 py-6 pb-28 lg:px-6 lg:pb-8">
{/* Disable animations for admin pages to prevent scroll jumps in Telegram Mini App */}
{location.pathname.startsWith('/admin') ? (
{/* Disable animations in Telegram Mini App and admin pages to prevent visual glitches */}
{isTelegramWebApp || location.pathname.startsWith('/admin') ? (
children
) : (
<AnimatePresence mode="popLayout">

15
src/styles/globals.css
View File

@@ -134,6 +134,21 @@
scrollbar-color: rgb(var(--color-dark-700)) transparent;
}
/* Hide scrollbar on mobile (iOS/Android) */
@media (max-width: 1023px) {
html,
body {
scrollbar-width: none;
-ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
}
::-webkit-scrollbar {
width: 6px;
height: 6px;