From 4c5fe78cf3937dca1235ce697f4fe1312083754e Mon Sep 17 00:00:00 2001
From: PEDZEO <vitali.gavrikov@yandex.ru>
Date: Wed, 21 Jan 2026 05:05:33 +0300
Subject: [PATCH] Fix AdminSettings mobile: scroll to top on open and add safe
 area padding

---
 src/pages/AdminSettings.tsx | 14 ++++++++++++--
 src/styles/globals.css      |  4 ++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/pages/AdminSettings.tsx b/src/pages/AdminSettings.tsx
index 2276df8..2286183 100644
--- a/src/pages/AdminSettings.tsx
+++ b/src/pages/AdminSettings.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useEffect } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { adminSettingsApi, SettingDefinition } from '../api/adminSettings'
@@ -28,6 +28,16 @@ export default function AdminSettings() {
   // Favorites hook
   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
   const { data: themeColors } = useQuery({
     queryKey: ['theme-colors'],
@@ -151,7 +161,7 @@ export default function AdminSettings() {
   }
 
   return (
-    <div className="flex min-h-screen">
+    <div className="flex min-h-screen pt-safe">
       {/* Mobile overlay */}
       {mobileMenuOpen && (
         <div
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 3cab324..d4091ce 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -890,6 +890,10 @@
     padding-bottom: calc(0.5rem + var(--safe-area-inset-bottom));
   }
 
+  .pt-safe {
+    padding-top: env(safe-area-inset-top, 0px);
+  }
+
   /* Skeleton loader */
   .skeleton {
     @apply bg-dark-800 rounded-lg animate-pulse;