Fix AdminSettings mobile: scroll to top on open and add safe area padding

This commit is contained in:
PEDZEO
2026-01-21 05:05:33 +03:00
parent a364b51787
commit 4c5fe78cf3
2 changed files with 16 additions and 2 deletions

View File

@@ -1,4 +1,4 @@
import { useState, useMemo } from 'react' import { useState, useMemo, useEffect } from 'react'
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { adminSettingsApi, SettingDefinition } from '../api/adminSettings' import { adminSettingsApi, SettingDefinition } from '../api/adminSettings'
@@ -28,6 +28,16 @@ export default function AdminSettings() {
// Favorites hook // Favorites hook
const { favorites, toggleFavorite, isFavorite } = useFavoriteSettings() const { favorites, toggleFavorite, isFavorite } = useFavoriteSettings()
// Scroll to top on mount and section change (fix for mobile webviews)
useEffect(() => {
// Use requestAnimationFrame for smoother scroll on mobile
requestAnimationFrame(() => {
window.scrollTo({ top: 0, behavior: 'instant' })
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
})
}, [activeSection])
// Queries // Queries
const { data: themeColors } = useQuery({ const { data: themeColors } = useQuery({
queryKey: ['theme-colors'], queryKey: ['theme-colors'],
@@ -151,7 +161,7 @@ export default function AdminSettings() {
} }
return ( return (
<div className="flex min-h-screen"> <div className="flex min-h-screen pt-safe">
{/* Mobile overlay */} {/* Mobile overlay */}
{mobileMenuOpen && ( {mobileMenuOpen && (
<div <div

View File

@@ -890,6 +890,10 @@
padding-bottom: calc(0.5rem + var(--safe-area-inset-bottom)); padding-bottom: calc(0.5rem + var(--safe-area-inset-bottom));
} }
.pt-safe {
padding-top: env(safe-area-inset-top, 0px);
}
/* Skeleton loader */ /* Skeleton loader */
.skeleton { .skeleton {
@apply bg-dark-800 rounded-lg animate-pulse; @apply bg-dark-800 rounded-lg animate-pulse;