admin画面でスクロールできないのを修正

taiseiue · taiseiue · commit edd3da676500 · 2025-02-24T11:51:36.000+09:00
diff --git a/packages/akane-next/src/app/admin/layout.tsx b/packages/akane-next/src/app/admin/layout.tsx
@@ -3,33 +3,38 @@ import type { Metadata, Viewport } from "next";
 import Script from "next/script";
 
 export const metadata: Metadata = {
-	title: "Akane 管理画面",
-	description: "Akane 管理画面です。操作には注意してください。",
+  title: "Akane 管理画面",
+  description: "Akane 管理画面です。操作には注意してください。",
 };
 
 export const viewport: Viewport = {
-	width: "device-width",
-	initialScale: 1.0,
-	maximumScale: 1.0,
+  width: "device-width",
+  initialScale: 1.0,
+  maximumScale: 1.0,
+};
+
+export const scrollableStyle = {
+  overflow: "scroll",
+  height: "100%",
 };
 
 export default function AdminRootLayout({
-	children,
+  children,
 }: Readonly<{
-	children: React.ReactNode;
+  children: React.ReactNode;
 }>) {
-	return (
-		<html lang="ja" suppressHydrationWarning>
-			<body>
-				<AdminPageLayout>{children}</AdminPageLayout>
-			</body>
+  return (
+    <html lang="ja" suppressHydrationWarning>
+      <body style={scrollableStyle} suppressHydrationWarning>
+        <AdminPageLayout>{children}</AdminPageLayout>
+      </body>
 
-			<Script
-				src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-				integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-				crossOrigin="anonymous"
-				strategy="afterInteractive"
-			/>
-		</html>
-	);
+      <Script
+        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossOrigin="anonymous"
+        strategy="afterInteractive"
+      />
+    </html>
+  );
 }
diff --git a/packages/akane-next/src/app/admin/page.tsx b/packages/akane-next/src/app/admin/page.tsx
@@ -1,16 +1,16 @@
 import Link from "next/link";
 
 export default function AdminIndexPage() {
-	return (
-		<div className=" mt-3">
-			<section>
-				<h2 className="fw-bold fs-4">ストーリー関連</h2>
-				<ul className="list-group">
-					<li className="list-group-item">
-						<Link href="/admin/story">ストーリー一覧</Link>
-					</li>
-				</ul>
-			</section>
-		</div>
-	);
+  return (
+    <div className=" mt-3">
+      <section>
+        <h2 className="fw-bold fs-4">ストーリー関連</h2>
+        <ul className="list-group">
+          <li className="list-group-item">
+            <Link href="/admin/story">ストーリー一覧</Link>
+          </li>
+        </ul>
+      </section>
+    </div>
+  );
 }
diff --git a/packages/akane-next/src/app/layout.tsx b/packages/akane-next/src/app/layout.tsx
@@ -3,7 +3,6 @@ import "./globals.css";
 import { Provider } from "@/components/ui/provider";
 import { WithApolloProvider } from "@/graphql/provider";
 
-
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -16,11 +15,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ja" suppressHydrationWarning>
-      <body>
+      <body suppressHydrationWarning>
         <WithApolloProvider>
-          <Provider>
-            {children}
-          </Provider>
+          <Provider>{children}</Provider>
         </WithApolloProvider>
       </body>
     </html>
diff --git a/packages/akane-next/src/components/admin/layout.tsx b/packages/akane-next/src/components/admin/layout.tsx
@@ -3,16 +3,16 @@ import type React from "react";
 import { AdminNavbar } from "./navbar";
 
 export const AdminPageLayout = ({ children }: React.PropsWithChildren) => {
-	return (
-		<div>
-			<AdminNavbar />
-			<main className="container">{children}</main>
-		</div>
-	);
+  return (
+    <div>
+      <AdminNavbar />
+      <main className="container">{children}</main>
+    </div>
+  );
 };
 
 export const AdminPageLayoutDecorator = (Story: React.FC) => (
-	<AdminPageLayout>
-		<Story />
-	</AdminPageLayout>
+  <AdminPageLayout>
+    <Story />
+  </AdminPageLayout>
 );
