Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 11x 11x 384x | import type { ReactNode } from "react";
import { WhatsAppSubNav } from "./WhatsAppSubNav";
/**
* The admin layout (admin-layout.tsx) pads its content p-4 sm:p-6 lg:p-8. The
* negative margins pull the page to the edges; below lg they match the
* padding exactly (a fixed -mx-6 spilled 0.5rem past each side of a phone),
* and at lg they leave the 0.5rem it has always had.
*/
const BLEED = "-mx-4 -mt-4 sm:-mx-6 sm:-mt-6";
/**
* Viewport height left for the page: below lg a 3.5rem header plus the bottom
* padding (1rem, then 1.5rem from sm); at lg no header, and the 2rem padding
* less the 1.5rem -mt-6 cancels, plus 2rem at the bottom. Written out in full
* — Tailwind only generates classes it can read in the source, so a height
* built with a template string never exists and the inbox grows with its
* messages instead of scrolling inside.
*/
const FULL_HEIGHT =
"h-[calc(100dvh-4.5rem)] sm:h-[calc(100dvh-5rem)] lg:h-[calc(100dvh-2.5rem)]";
type WhatsAppPageLayoutProps = {
children: ReactNode;
/** When true, children fill remaining height (for inbox-style layouts) */
fullHeight?: boolean;
};
export function WhatsAppPageLayout({
children,
fullHeight,
}: WhatsAppPageLayoutProps) {
return (
<div
className={`${BLEED} flex flex-col ${fullHeight ? FULL_HEIGHT : ""}`}
>
<WhatsAppSubNav />
<div
className={`${fullHeight ? "flex-1 min-h-0" : "px-6 py-6"}`}
>
{children}
</div>
</div>
);
}
|