small styling improvements

www/app/(aboutAndPrivacy)/about.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useState } from "react";
-import FullscreenModal from "../transcripts/fullsreenModal";
+import FullscreenModal from "./fullsreenModal";
 import AboutContent from "./aboutContent";
 
 type AboutProps = {

www/app/(aboutAndPrivacy)/fullsreenModal.tsx

@@ -0,0 +1,36 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faClose } from "@fortawesome/free-solid-svg-icons";
+import { MouseEventHandler } from "react";
+
+type ModalProps = {
+  children: JSX.Element;
+  close: () => void;
+};
+const cancelClick: MouseEventHandler<HTMLDivElement> = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+export default function FullscreenModal(props: ModalProps) {
+  return (
+    <div
+      className="fixed z-50 cursor-pointer top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/10"
+      onClick={props.close}
+    >
+      <div
+        onClick={cancelClick}
+        className="p-4 md:p-6 bg-white rounded-lg border-blue-300 h:auto max-w-[90svw] w-auto md:max-w-[80svw] relative pt-4 cursor-default"
+      >
+        <button
+          className="absolute right-2 top-2 p-0 min-h-0"
+          onClick={props.close}
+        >
+          <FontAwesomeIcon icon={faClose} size="lg" />
+        </button>
+        <div className="h-auto md:max-h-[75svh] max-h-[80svh] overflow-auto px-2 text-left">
+          {props.children}
+        </div>
+      </div>
+    </div>
+  );
+}

www/app/(aboutAndPrivacy)/privacy.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useState } from "react";
-import FullscreenModal from "../transcripts/fullsreenModal";
+import FullscreenModal from "./fullsreenModal";
 import PrivacyContent from "./privacyContent";
 
 type PrivacyProps = {