fix(web): full height (#3277)

apps/web/app/(content)/about/layout.tsx

@@ -1,5 +1,6 @@
 import { type Metadata } from 'next'
 import { type ReactNode } from 'react'
+import SimpleTitle from '@/components/simple-title'
 import { title as siteName, twitterAccount } from '@/lib/constants'
 
 export const metadata = {
@@ -25,6 +26,9 @@ type Props = {
 
 export default function AboutLayout({ children }: Props) {
   return (
-    <div className="prose prose-invert prose-orange max-w-none">{children}</div>
+    <div className="prose prose-invert prose-orange max-w-none [&_em]:font-semibold [&_em]:not-italic">
+      <SimpleTitle>{siteName}とは</SimpleTitle>
+      {children}
+    </div>
   )
 }

apps/web/app/(content)/kuji/[id]/loading.tsx

@@ -1,8 +1,13 @@
 import Skeleton from '@inaba-jinja/components/skeleton'
+import SimpleTitle from '@/components/simple-title'
 
 export default function KujiLoading() {
   return (
     <>
+      <SimpleTitle>
+        <Skeleton className="h-4 w-24" />
+      </SimpleTitle>
+
       <div className="flex items-center justify-center">
         <Skeleton className="block h-[540px] w-[254px]" />
       </div>

apps/web/app/(content)/kuji/[id]/page.tsx

@@ -1,6 +1,7 @@
 import { type Metadata } from 'next'
 import Image from 'next/image'
 import { notFound } from 'next/navigation'
+import SimpleTitle from '@/components/simple-title'
 import { title as siteName, twitterAccount } from '@/lib/constants'
 import { type FortuneEntry, getFortune, getFortuneIDs } from '@/lib/contentful'
 import { generateFortuneName, getImageURL } from '@/lib/fortune'
@@ -89,6 +90,8 @@ export default async function Page({ params }: Props) {
 
   return (
     <>
+      <SimpleTitle>{name}</SimpleTitle>
+
       <div className="flex items-center justify-center">
         <Image
           alt={name}

apps/web/app/(content)/layout.tsx

@@ -5,12 +5,11 @@ import { title as siteName } from '@/lib/constants'
 
 type Props = {
   children: ReactNode
-  title: ReactNode
 }
 
-export default function ContentLayout({ children, title }: Props) {
+export default function ContentLayout({ children }: Props) {
   return (
-    <div className="mx-auto w-full max-w-screen-md py-4 text-slate-100">
+    <div className="mx-auto grid h-full w-full max-w-screen-md grid-rows-[auto_1fr] py-4 text-slate-100">
       <header className="px-2">
         <Link href="/">
           <Logo
@@ -21,8 +20,7 @@ export default function ContentLayout({ children, title }: Props) {
       </header>
 
       <main className="px-2 pt-4">
-        <div className="rounded-2xl bg-slate-900/70 p-4 pb-8">
-          {title}
+        <div className="h-full rounded-2xl bg-slate-900/70 p-4 pb-8">
           {children}
         </div>
       </main>

apps/web/app/(content)/lottery/page.tsx

@@ -34,7 +34,7 @@ export default function LotteryPage() {
   const idPromise = getAnyFortuneID()
 
   return (
-    <div className="mb-4 mt-8 flex flex-col items-center justify-center">
+    <div className="mb-4 mt-8 flex h-full flex-col items-center justify-center">
       <Suspense fallback={null}>
         <Redirect idPromise={idPromise} />
       </Suspense>

apps/web/app/(content)/privacy/layout.tsx

@@ -1,5 +1,6 @@
 import { type Metadata } from 'next'
 import { type ReactNode } from 'react'
+import SimpleTitle from '@/components/simple-title'
 import { title as siteName, twitterAccount } from '@/lib/constants'
 
 export const metadata = {
@@ -25,6 +26,9 @@ type Props = {
 
 export default function PrivacyLayout({ children }: Props) {
   return (
-    <div className="prose prose-invert prose-orange max-w-none">{children}</div>
+    <div className="prose prose-invert prose-orange max-w-none">
+      <SimpleTitle>プライバシーポリシー</SimpleTitle>
+      {children}
+    </div>
   )
 }

apps/web/app/_components/mobile-menu.tsx

@@ -9,12 +9,22 @@ import {
   DialogTrigger
 } from '@radix-ui/react-dialog'
 import Link from 'next/link'
+import { twMerge } from 'tailwind-merge'
 import Logo from '@/components/logo.svg'
 
-export default function MobileMenu() {
+type Props = {
+  className?: string
+}
+
+export default function MobileMenu({ className }: Props) {
   return (
     <Dialog>
-      <DialogTrigger className="supports-[right:env(safe-area-inset-right)]:right-[env(safe-area-inset-right, 0)] fixed right-0 top-0 m-2 w-10 space-y-1.5 p-2 text-slate-100 supports-[top:env(safe-area-inset-top)]:top-[env(safe-area-inset-top,0)] md:hidden">
+      <DialogTrigger
+        className={twMerge(
+          'm-2 w-10 space-y-1.5 p-2 text-slate-100',
+          className
+        )}
+      >
         <span
           aria-hidden
           className="block h-0.5 w-full rounded-full bg-current"

apps/web/app/layout.tsx

@@ -36,12 +36,12 @@ export default function RootLayout({ children }: Props) {
     <html lang="ja">
       <head prefix="og: http://ogp.me/ns#" />
       <body>
-        <div className="pl-[env(safe-area-inset-left,0)] pr-[env(safe-area-inset-right,0)] pt-[env(safe-area-inset-top,0)] md:grid md:min-h-dvh md:grid-rows-[1fr_auto]">
-          <MobileMenu />
+        <div className="md:grid md:min-h-dvh md:grid-rows-[1fr_auto]">
+          <MobileMenu className="supports-[right:env(safe-area-inset-right)]:right-safe supports-[top:env(safe-area-inset-top)]:top-safe fixed right-0 top-0 md:hidden" />
 
-          {children}
+          <div className="pl-safe pr-safe pt-safe">{children}</div>
 
-          <footer className="hidden bg-black/80 pb-[env(safe-area-inset-bottom,0)] text-sm text-slate-100 md:block">
+          <footer className="pb-safe pl-safe pr-safe hidden bg-black/80 text-sm text-slate-100 md:block">
             <nav className="p-4">
               <ul className="flex items-center justify-end gap-4">
                 <li>

apps/web/app/not-found.tsx

@@ -11,7 +11,8 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <ContentLayout title={<SimpleTitle>{title}</SimpleTitle>}>
+    <ContentLayout>
+      <SimpleTitle>{title}</SimpleTitle>
       <p>申し訳ありませんがお探しのページを見つけられませんでした。</p>
     </ContentLayout>
   )

packages/tailwind-config/package.json

@@ -9,11 +9,12 @@
     "url": "https://github.com/inabagumi/inaba-jinja/issues"
   },
   "dependencies": {
-    "tailwindcss": "^3.4.1"
+    "@tailwindcss/typography": "^0.5.10",
+    "tailwindcss": "^3.4.1",
+    "tailwindcss-safe-area": "^0.5.1"
   },
   "description": "This is a tailwind.config for Inaba Jinja.",
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.10",
     "@tsconfig/node20": "^20.1.2",
     "@tsconfig/strictest": "^2.0.3",
     "tsup": "^8.0.2"

packages/tailwind-config/src/index.ts

@@ -1,10 +1,11 @@
 import typographyPlugin from '@tailwindcss/typography'
 import { type Config } from 'tailwindcss'
 import { fontFamily as defaultFontFamily } from 'tailwindcss/defaultTheme.js'
+import safeAreaPlugin from 'tailwindcss-safe-area'
 
 const tailwindConfig: Config = {
   content: [],
-  plugins: [typographyPlugin],
+  plugins: [typographyPlugin, safeAreaPlugin],
   theme: {
     fontFamily: {
       ...defaultFontFamily,

packages/tailwind-config/src/plugins.d.ts

@@ -0,0 +1,7 @@
+declare module 'tailwindcss-safe-area' {
+  import { type PluginCreator } from 'tailwindcss'
+
+  const plugin: PluginCreator
+
+  export default plugin
+}