Need help setting up p-safe class strategy for a Next.js pwa app with a fixed top and bottom navbar #14

monecchi · 2024-05-07T15:29:24Z

monecchi
May 7, 2024

Hi there. Thanks for the plugin. I'm trying to perform an optmized UX for my pwa app (Next.js 12 / Tailwindcss / Shadcn ui) when installed on iOS fullscreen / standalone mode.

The issue is I can't find the right "recipe" when applying p-safe classes to my app's layout structure, as it is shown bellow...

The top and bottom navbars are working as expected with the safe padding apllied properly when in fullscreen / standalone mode. However, I'm still having issues with the body that ends up getting a huge extra top padding when the app is opened on iOS standalone mode, it also seems to block interactivity until it is touched or scrolled, which is when it kind of falls back to a normal acceptable padding.

Even if I remove the safe padding from the body and then try to apply a top and bottom padding to the main layout, something is just not right in fullscreen mode. I'd really appreciate any guidance regarding the layout. Thanks in advance!

global.css

  html {
    display: flex;
    flex-direction: column;
  }

  html,
  body {
    height: -webkit-fill-available;
  }

  body {
    flex-grow: 1;
    /* PWA enhancements */
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    overflow-x: hidden;
    @apply flex flex-col bg-background text-foreground antialiased select-none pt-safe pb-safe;
  }

top-navbar.tsx

interface TopNavProps {
  title?: string
}

export const TopNav = ({ title }: TopNavProps) => {
  return (
    <header className='site-header fixed left-0 top-0 z-40 w-full border-b border-border bg-secondary px-safe pt-safe'>
      <div className='mx-auto flex h-16 w-full max-w-screen-lg items-center justify-between px-6'>
        ...
      </div>
    </header>
  )
}

bottom-nav.tsx

export const BottomNav = () => {
    return (
        <nav className='bottom-nav fixed bottom-0 left-0 z-40 w-full border-t border-border bg-secondary pb-safe'>
            <div className='mx-auto flex h-16 max-w-md items-center justify-around px-6'>
                ...
            </div>
        </nav>
    )
}

layout.tsx

import Head from 'next/head'
import { Appbar } from '@/components/nav-top'
import { BottomNav } from '@/components/nav-bottom'
import { cn } from '@/lib/utils'

interface PageLayoutProps {
  title?: string
  className?: string
  children: React.ReactNode
}

export const PageLayout = ({ title, className, children }: PageLayoutProps): JSX.Element => (
  <>
    {title ? (
      <Head>
        <title>{title} - Mio Vino</title>
      </Head>
    ) : null}

    <Appbar title={title} />

    <main
      /**
       * Padding top = `appbar` height
       * Padding bottom = `bottom-nav` height
       */
      className={cn('mx-auto max-w-screen-lg px-safe pt-16 pb-20', className)}
    >
      <div className='px-6 py-4'>{children}</div>
    </main>

    <BottomNav />
  </>
)

AndreasDamen · 2025-04-30T21:43:43Z

AndreasDamen
Apr 30, 2025

did you ever figure this out haha? currently not able to add the bottom padding

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Need help setting up p-safe class strategy for a Next.js pwa app with a fixed top and bottom navbar #14

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Need help setting up p-safe class strategy for a Next.js pwa app with a fixed top and bottom navbar #14

Uh oh!

monecchi May 7, 2024

Replies: 1 comment

Uh oh!

Uh oh!

AndreasDamen Apr 30, 2025

monecchi
May 7, 2024

AndreasDamen
Apr 30, 2025