fix: レイアウトの構造を変更してヘッダーのスタイルを調整

namidapoo · Dec 29, 2024 · 68f47c9 · 68f47c9
1 parent ce7c7bf
commit 68f47c9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -23,8 +23,12 @@ const RootLayout: FC<Readonly<Props>> = ({ children }) => {
 					enableSystem
 					disableTransitionOnChange
 				>
-					<Header />
-					<div className="h-[calc(100dvh-64px)] p-4 md:px-6">{children}</div>
+					<div className="flex flex-col h-dvh">
+						<Header />
+						<div className="flex-grow p-4 md:px-6 overflow-auto">
+							{children}
+						</div>
+					</div>
 				</ThemeProvider>
 			</body>
 		</html>

diff --git a/app/recap/components/header/header.tsx b/app/recap/components/header/header.tsx
@@ -18,7 +18,7 @@ export const Header: FC = () => {
 		<SessionProvider>
 			<header
 				className={cn(
-					"flex h-16 items-center justify-between sticky top-0 z-10 bg-background shadow-md dark:shadow-current px-6",
+					"flex h-16 items-center justify-between bg-background border-b dark:shadow-current p-6",
 					isOnTop && "hidden",
 				)}
 			>