Запретить выход div за пределы экрана в макете Next.js ⇐ CSS

[Anonymous]

Я работаю над проектом Next.js и имею следующую настройку макета. Моя проблема в том, что элемент div в моем Page.tsx выходит за пределы экрана, вызывая нежелательное переполнение. Я хотел бы убедиться, что содержимое полностью находится в области просмотра.
Вот соответствующие части моего кода:
Код Layout.tsx

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

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/app-sidebar";
import { AuthProvider } from "@/AuthContext";
import { ThemeProvider } from "@/components/theme-provider"

const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});

const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});

export const metadata: Metadata = {
title: "Lumos",
description: "SNU CGPA Calculator",
};

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








{children}





);
}

Код Page.tsx

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

import { ModeToggle } from "@/components/dark-mode-toggle";

export default function Home() {
return (





Hello



);
}

Текущий вывод


Проблема:
Как видно на снимке экрана ниже, содержимое (div) выходит за пределы экрана, вызывая нежелательную горизонтальную прокрутку. Я хочу, чтобы весь контент оставался в области просмотра, не вызывая переполнения.
Что я пробовал:
Я использовал w-screen для ширины , но это не решило проблему.
Похоже, что h-full в дочернем элементе div также выводит его за пределы экрана.

Может кто-нибудь подскажет, как решить проблему переполнения? Я хотел бы убедиться, что контент остается в пределах области просмотра..

Подробнее здесь: https://stackoverflow.com/questions/793 ... -js-layout