Проблема с полноразмерными разделами в мобильном телефоне. ⇐ CSS

[Anonymous]

Я пытаюсь создать полноразмерные разделы для веб-приложения в Nextjs с помощью Tailwind CSS.
Однако я сталкиваюсь с проблемами на мобильных устройствах, поскольку не переопределяется строка состояния (Фото 1) и область под панелью навигации (Фото 2):



Фото 1. Переопределение строки состояния
Фото 2. Панель навигации      













Это мой настоящий код
global.css

Код: Выделить всё

@import "tailwindcss";

:root {
/* Color tokens */
--color-sage: #889C82; /* sfondo sage */
--color-white: #FFFFFF;
--color-sage-on: #FFFFFF; /* testo quando sfondo sage */
--color-white-on: #6F6F6F; /* testo quando sfondo white */

/* Default theme values (white) */
--background: var(--color-white);
--foreground: var(--color-white-on);

/* Font variable fallbacks; Next font will set --font-inter and --font-merriweather */
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
--font-serif: Georgia, "Times New Roman", Times, serif;

--status-bar: #ff0000;
}

/* Theme helper classes */
.theme-sage {
--background: var(--color-sage);
--foreground: var(--color-sage-on);
background-color: var(--background);
color: var(--foreground);
}

.theme-white {
--background: var(--color-white);
--foreground: var(--color-white-on);
background-color: var(--background);
color: var(--foreground);
}

@media all and (display-mode: standalone) {
body {
background-color: var(--status-bar);
margin: 0;
}

#app {
-webkit-overflow-scrolling: touch;
background-color: #fff;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
width: 100%;
}
}

@media (prefers-color-scheme: dark) {
:root:not(.theme-sage):not(.theme-white) {
/* Keep defaults for user preference only when no explicit theme class is present */
--background: #0a0a0a;
--foreground: #ededed;
}
}

/* Apply to body so components inherit correctly */
body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-inter, var(--font-sans));
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Utility: when an element has an explicit background color use appropriate foreground color */
/* This covers cases where components set their own bg via classes (e.g., bg-[var(--color-sage)]) */
.bg-sage, .has-bg-sage {
background-color: var(--color-sage) !important;
color: var(--color-sage-on) !important;
}

.bg-white, .has-bg-white {
background-color: var(--color-white) !important;
color: var(--color-white-on) !important;
}

/* Headings and serif usage: prefer Merriweather for headings */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-merriweather, var(--font-serif));
}

/* Small accessibility tweak: ensure links and interactive elements inherit foreground for contrast */
a, button, input, textarea, select {
color: inherit;
}

/* Base section styles moved from inline to CSS for best practices */
.section-base {
width: 100%;
/* Prefer dynamic viewport unit where supported */
height: 100dvh;
min-height: 100vh;
box-sizing: border-box;
/* Respect safe-area insets (notch, status bar, home indicator) */
/* padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); */
}

/* Smooth theme transitions for better UX */
html {
transition: background-color 150ms ease, color 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
html {
transition: none;
}
}

Section.tsx

Код: Выделить всё

"use client";

import React from "react";

type SectionProps = {
children?: React.ReactNode;
className?: string;
/** theme selects the CSS theme helper: 'sage' maps to .theme-sage, 'white' to .theme-white */
theme?: "sage" | "white";
/** align content vertically and horizontally (Tailwind utilities) */
center?: boolean;
};

/**
* Section
* - Full viewport section for desktop and mobile
* - Respects safe-area insets (status bar / notch) using env(safe-area-inset-*)
* - Uses CSS "100dvh"  when available with a 100vh fallback
* - Works with Tailwind classes passed via `className`
*/
export default function Section({
children,
className = "",
theme = "white",
center = false,
}: SectionProps) {
const themeClass = theme === "sage" ? "theme-sage" : "theme-white";
const ref = React.useRef(null);

return (

{children}

);
}

layout.tsx

Код: Выделить всё

import type { Metadata } from "next";
import { Inter, Merriweather } from "next/font/google";
import "./globals.css";

const inter = Inter({
variable: "--font-inter",
subsets: ["latin"],
display: "swap",
});

const merriweather = Merriweather({
variable: "--font-merriweather",
subsets: ["latin"],
display: "swap",
});

export const metadata: Metadata = {
title: "",
description: "",
};

export default function RootLayout({
children,
}: Readonly) {
return (









{children}


);
}

Как лучше всего решить эту проблему, чтобы разделы были полноразмерными, а цвет строки состояния при прокрутке соответствовал цвету раздела?

Подробнее здесь: https://stackoverflow.com/questions/797 ... -in-mobile