added fullscreen mode and removed swipedown

src/components/UI/Header.tsx

@@ -1,9 +1,14 @@
-import * as React from "react";
 import { Link } from "react-router";
 import Logo from "/MAV.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGear, faListCheck } from "@fortawesome/free-solid-svg-icons";
+import {
+  faGear,
+  faListCheck,
+  faMaximize,
+  faMinimize,
+} from "@fortawesome/free-solid-svg-icons";
 import type { VersionFieldType } from "../../types/types";
+import { useEffect, useState } from "react";
 
 async function fetchVersions(
   signal?: AbortSignal
@@ -33,10 +38,23 @@ function formatFromMs(ms: number, tz: "local" | "utc" = "local") {
 }
 
 export default function Header() {
-  const [offsetMs, setOffsetMs] = React.useState<number | null>(null);
-  const [nowMs, setNowMs] = React.useState<number>(Date.now());
+  const [offsetMs, setOffsetMs] = useState<number | null>(null);
+  const [nowMs, setNowMs] = useState<number>(Date.now());
+  const [isFullscreen, setIsFullscreen] = useState(false);
 
-  React.useEffect(() => {
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      // Enter fullscreen on the entire app
+      document.documentElement.requestFullscreen();
+      setIsFullscreen(true);
+    } else {
+      // Exit fullscreen
+      document.exitFullscreen();
+      setIsFullscreen(false);
+    }
+  };
+
+  useEffect(() => {
     const ac = new AbortController();
     fetchVersions(ac.signal)
       .then((data) => {
@@ -50,7 +68,7 @@ export default function Header() {
     return () => ac.abort("failed");
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     let timer: number;
     const schedule = () => {
       const now = Date.now();
@@ -81,6 +99,14 @@ export default function Header() {
           <h2>UTC: {utcStr}</h2>
         </div>
         <div className="flex flex-row space-x-8">
+          <div onClick={toggleFullscreen} className="flex flex-col">
+            {isFullscreen ? (
+              <FontAwesomeIcon icon={faMinimize} size="2x" />
+            ) : (
+              <FontAwesomeIcon icon={faMaximize} size="2x" />
+            )}
+            {/* <small>{isFullscreen ? "Shrink" : "enlarge"}</small> */}
+          </div>
           <Link to={"/session-settings"}>
             <FontAwesomeIcon
               className="text-white"

src/components/UI/ModalComponent.tsx

@@ -16,7 +16,7 @@ const ModalComponent = ({
     <Modal
       isOpen={isModalOpen}
       onRequestClose={close}
-      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[90%] mx-auto mt-[1%] md:w-[80%] md:h-[90%] z-[100] overflow-y-auto max-h-screen"
+      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[90%] mx-auto mt-[1%] md:w-[80%] md:h-[95%] z-[100] overflow-y-auto max-h-screen"
       overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
     >
       {children}