fix: Remove top padding gap and add exit/logout to More page

Fixed 2 issues:

1. Top Padding Gap (pt-16 → removed)
   Problem: Mobile fullscreen had pt-16 padding creating gap at top
   Cause: Redundant padding when header is hidden in fullscreen
   Solution: Removed pt-16 from mobile fullscreen layout

   Before:
   <div className="flex flex-1 flex-col min-h-0 pt-16">

   After:
   <div className="flex flex-1 flex-col min-h-0">

   Result: No gap, submenu starts at top-0 ✓

2. Exit/Logout Buttons in More Page
   Problem: No way to exit fullscreen or logout from mobile
   Solution: Added context-aware button to More page

   WP-Admin Mode:
   - Shows "Exit Fullscreen" button
   - Exits fullscreen mode (back to normal WP-admin)

   Standalone Mode (PWA):
   - Shows "Logout" button
   - Redirects to WP-admin login

   Implementation:
   - Created AppContext to provide isStandalone and exitFullscreen
   - Wrapped Shell with AppProvider
   - More page uses useApp() to get context
   - Conditional rendering based on mode

Files Modified:
- App.tsx: Removed pt-16, added AppProvider
- AppContext.tsx: New context for app-level state
- More/index.tsx: Added Exit/Logout button

Result:
 No top gap in mobile fullscreen
 Exit fullscreen available in WP-admin mode
 Logout available in standalone mode
 Clean, functional mobile UX! 🎯
This commit is contained in:
dwindown
2025-11-06 23:22:18 +07:00
parent 0dace90597
commit 796e661808
3 changed files with 69 additions and 4 deletions

View File

@@ -31,6 +31,7 @@ import DashboardSubmenuBar from './components/nav/DashboardSubmenuBar';
import { DashboardProvider } from '@/contexts/DashboardContext';
import { PageHeaderProvider } from '@/contexts/PageHeaderContext';
import { FABProvider } from '@/contexts/FABContext';
import { AppProvider } from '@/contexts/AppContext';
import { PageHeader } from '@/components/PageHeader';
import { BottomNav } from '@/components/nav/BottomNav';
import { FAB } from '@/components/FAB';
@@ -447,6 +448,7 @@ function Shell() {
const { on, setOn } = useFullscreen();
const { main } = useActiveSection();
const toggle = () => setOn(v => !v);
const exitFullscreen = () => setOn(false);
const isDesktop = useIsDesktop();
const location = useLocation();
const scrollContainerRef = React.useRef<HTMLDivElement>(null);
@@ -463,7 +465,7 @@ function Shell() {
const isMorePage = location.pathname === '/more';
return (
<>
<AppProvider isStandalone={isStandalone} exitFullscreen={exitFullscreen}>
{!isStandalone && <ShortcutsBinder onToggle={toggle} />}
{!isStandalone && <CommandPalette toggleFullscreen={toggle} />}
<div className={`flex flex-col min-h-screen ${fullscreen ? 'woonoow-fullscreen-root' : ''}`}>
@@ -485,7 +487,7 @@ function Shell() {
</main>
</div>
) : (
<div className={`flex flex-1 flex-col min-h-0 ${fullscreen ? 'pt-0' : 'pt-16'}`}>
<div className="flex flex-1 flex-col min-h-0">
<PageHeader fullscreen={true} />
{!isMorePage && (isDashboardRoute ? (
<DashboardSubmenuBar items={main.children} fullscreen={true} headerVisible={isHeaderVisible} />
@@ -518,7 +520,7 @@ function Shell() {
</div>
)}
</div>
</>
</AppProvider>
);
}