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

@@ -17,17 +17,17 @@ export default function FullscreenModal(props: ModalProps) {
       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 className="p-3 md:p-5 bg-white rounded-lg border-blue-300 h:auto max-w-[90svw] w-auto md:max-w-[80svw] relative pt-4">
+      <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} />
+          <FontAwesomeIcon icon={faClose} size="lg" />
         </button>
-        <div
-          className="h-auto md:max-h-[75svh] max-h-[80svh] overflow-auto px-2 cursor-default text-left"
-          onClick={cancelClick}
-        >
+        <div className="h-auto md:max-h-[75svh] max-h-[80svh] overflow-auto px-2 text-left">
           {props.children}
         </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 = {

www/app/lib/textComponents.tsx

@@ -4,13 +4,15 @@ type SimpleProps = {
 };
 
 const Title = ({ children, className }: SimpleProps) => (
-  <h2 className={`text-lg font-bold md:text-xl ${className}`}>{children}</h2>
+  <h2 className={`text-lg font-bold md:text-xl ${className || ""}`}>
+    {children}
+  </h2>
 );
 const Subtitle = ({ children, className }: SimpleProps) => (
-  <h3 className={`text-base md:text-lg ${className}`}>{children}</h3>
+  <h3 className={`text-base md:text-lg ${className || ""}`}>{children}</h3>
 );
 const Paragraph = ({ children, className }: SimpleProps) => (
-  <p className={`mb-2 md:mb-4 ${className}`}>{children}</p>
+  <p className={`mb-2 md:mb-4 ${className || ""}`}>{children}</p>
 );
 
 export { Title, Subtitle, Paragraph };