fixes

src/app/globals.css

@@ -11,7 +11,8 @@
 
 html,
 body {
-	overflow-x: hidden;
+	padding: 0 !important;
+	overflow: auto !important;
 }
 
 a {

src/components/DiscDetail.tsx

@@ -3,7 +3,7 @@
 import Image from "next/image";
 import { useContext } from "react";
 
-import { DiscContext, Modal } from "@components";
+import { DiscContext, DiscModal } 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 (
-		<Modal>
+		<DiscModal>
 			<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>
-		</Modal>
+		</DiscModal>
 	);
 };

src/components/Modal.tsx → src/components/DiscModal.tsx

@@ -6,11 +6,11 @@ import { Modal as MuiModal } from "@mui/material";
 
 import type { ModalProps } from "@types";
 
-export function Modal({ children }: ModalProps) {
+export function DiscModal({ children }: ModalProps) {
 	const router = useRouter();
 	const onClose = () => router.back();
 	return (
-		<MuiModal open={true}>
+		<MuiModal open={true} className="mui-fixed">
 			<div className="modal" onClick={onClose}>
 				{children}
 			</div>

src/components/index.ts

@@ -4,8 +4,8 @@ export * from "./DiscContext";
 export * from "./DiscCount";
 export * from "./DiscDetail";
 export * from "./DiscGrid";
+export * from "./DiscModal";
 export * from "./Filters";
 export * from "./Header";
 export * from "./Home";
-export * from "./Modal";
 export * from "./ScrollToTop";