refactor: Improve templates layout flexibility (#89245)
### What
Switches the `create-next-app` templates (`app-tw`, `app`) to flex-based
layouts instead of `min-height: 100vh`.
### Why
At Clerk, we ship a template on top of `create-next-app` that adds a
header with sign-in/sign-up links to the root layout. The current
`min-height: 100vh` approach causes overflow as soon as you add anything
to the layout.
Here's a [minimal repo showing the overflow
issue](https://github.com/alexcarpenter/nextjs-layout-template-repo).
Using flexbox lets the page fill remaining space naturally, so
headers/footers don't force an overflow and avoids us having to modify
the `page.tsx` template.
### Changes
**Tailwind (`app-tw`):**
- Layout: `h-full` on `<html>`, `min-h-full flex flex-col` on `<body>`
- Page: `min-h-screen` → `flex flex-col flex-1`
**CSS Modules (`app`):**
- `globals.css`: `height: 100%` on html, `min-height: 100%; display:
flex; flex-direction: column` on body
- `page.module.css`: `min-height: 100vh` → `flex: 1`
The empty templates (`app-empty`, `app-tw-empty`) don't have height
styling so they're unchanged.
| BEFORE | AFTER |
|--------|--------|
| <img width="1392" height="1522" alt="Screenshot 2026-01-29 at 9 41
58 AM"
src="https://github.com/user-attachments/assets/6642de41-253b-42c0-af2d-d55c4e651541"
/> | <img width="1392" height="1522" alt="Screenshot 2026-01-29 at 9 42
31 AM"
src="https://github.com/user-attachments/assets/633f3d46-ed8c-4d05-8173-77f2cf166703"
/> |
Closes NEXT-
Fixes #