modal tweaks

src/app/@modal/(.)[name_slug]/page.tsx

@@ -1,5 +1,9 @@
-import { DiscDetail } from "@components";
+import { DiscDetail, DiscModal } from "@components";
 
 export default function DiscDetailPage({ params: { name_slug } }: { params: { name_slug: string } }) {
-	return <DiscDetail name_slug={name_slug} />;
+	return (
+		<DiscModal>
+			<DiscDetail name_slug={name_slug} />
+		</DiscModal>
+	);
 }

src/app/globals.css

@@ -9,12 +9,6 @@
 	user-select: none;
 }
 
-html,
-body {
-	padding: 0 !important;
-	overflow: auto !important;
-}
-
 a {
 	text-decoration: none;
 }
@@ -94,14 +88,23 @@ h1 {
 .modal {
 	top: 0;
 	left: 0;
-	width: 100vw;
-	height: 100vh;
+	width: 100%;
+	height: 100%;
 	z-index: 1000;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 
+.disc-detail-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	width: 100%;
+	height: 100%;
+}
+
 .disc-detail {
 	display: flex;
 	flex-direction: column;
@@ -125,7 +128,7 @@ h1 {
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	row-gap: 0.5vmin;
+	row-gap: 0.75vmin;
 }
 
 .disc-detail-img-container {

src/components/DiscDetail.tsx

@@ -3,7 +3,7 @@
 import Image from "next/image";
 import { useContext } from "react";
 
-import { DiscContext, DiscModal } from "@components";
+import { DiscContext } from "@components";
 import { hexToRgba } from "@util";
 
 import type { DiscDetailProps } from "@types";
@@ -29,7 +29,7 @@ export const DiscDetail = ({ name_slug }: DiscDetailProps) => {
 	const borderColor = hexToRgba(color, 0.25);
 
 	return (
-		<DiscModal>
+		<div className="disc-detail-container">
 			<div
 				className="disc-detail"
 				onClick={e => e.stopPropagation()}
@@ -49,6 +49,6 @@ export const DiscDetail = ({ name_slug }: DiscDetailProps) => {
 					<Image src={pic} alt={name} width={400} height={340} className="disc-detail-img" />
 				</div>
 			</div>
-		</DiscModal>
+		</div>
 	);
 };