etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 10:27:49 +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" className="glass fixed left-0 right-0 top-0 z-50 shadow-lg shadow-black/10 lg:hidden"
style={{ style={{
paddingTop: isFullscreen 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, : undefined,
}} }}
> >
@@ -319,14 +319,11 @@ export function AppHeader({
style={{ top: headerHeight }} style={{ top: headerHeight }}
> >
{/* Backdrop */} {/* Backdrop */}
<div <div className="absolute inset-0 bg-black/60" onClick={() => setMobileMenuOpen(false)} />
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
onClick={() => setMobileMenuOpen(false)}
/>
{/* Menu content */} {/* Menu content */}
<div <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' }} style={{ WebkitOverflowScrolling: 'touch' }}
> >
<div className="mx-auto max-w-6xl px-4 py-4"> <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) // Calculate header height based on fullscreen mode (only on mobile Telegram)
// On iOS: contentSafeAreaInset.top includes status bar + dynamic island + Telegram header // 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) // On Android: safeAreaInset.top only includes status bar, need to add Telegram header height (~48px)
const telegramHeaderHeight = platform === 'android' ? 56 : 45; const telegramHeaderHeight = platform === 'android' ? 48 : 45;
const headerHeight = isMobileFullscreen const headerHeight = isMobileFullscreen
? 64 + Math.max(safeAreaInset.top, contentSafeAreaInset.top) + telegramHeaderHeight ? 64 + Math.max(safeAreaInset.top, contentSafeAreaInset.top) + telegramHeaderHeight
: 64; : 64;
@@ -503,8 +503,8 @@ export function AppShell({ children }: AppShellProps) {
{/* Main content */} {/* Main content */}
<main className="mx-auto max-w-6xl px-4 py-6 pb-28 lg:px-6 lg:pb-8"> <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 */} {/* Disable animations in Telegram Mini App and admin pages to prevent visual glitches */}
{location.pathname.startsWith('/admin') ? ( {isTelegramWebApp || location.pathname.startsWith('/admin') ? (
children children
) : ( ) : (
<AnimatePresence mode="popLayout"> <AnimatePresence mode="popLayout">

15
src/styles/globals.css
View File

@@ -134,6 +134,21 @@
scrollbar-color: rgb(var(--color-dark-700)) transparent; 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 { ::-webkit-scrollbar {
width: 6px; width: 6px;
height: 6px; height: 6px;