modal is w-full on mobile, still doesn't take full screen as it uses …

…<Dialog>

src/components/EventBox/request-view.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { FaChevronDown } from "react-icons/fa6";
 
@@ -27,8 +27,49 @@ const RequestView = ({
   repairAttemptProps
 }: RequestProps) => {
   const [showRepairRequestModal, setShowRepairRequestModal] = useState(false);
-  function manageModal() {
-    setShowRepairRequestModal(true);
+  // function manageModal() {
+  //   setShowRepairRequestModal(true);
+  // }
+
+  const useWindowDimensions = () => {
+    const hasWindow = typeof window !== "undefined";
+
+    const getWindowDimensions = useCallback(() => {
+      const width = hasWindow ? window.innerWidth : null;
+      const height = hasWindow ? window.innerHeight : null;
+      return {
+        width,
+        height
+      };
+    }, [hasWindow]);
+
+    const [windowDimensions, setWindowDimensions] = useState(
+      getWindowDimensions()
+    );
+
+    useEffect(() => {
+      if (hasWindow) {
+        const handleResize = () => {
+          setWindowDimensions(getWindowDimensions());
+        };
+
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+      }
+    }, [hasWindow, getWindowDimensions]);
+
+    return windowDimensions;
+  };
+
+  const { height, width } = useWindowDimensions();
+
+  function handleRepairClick() {
+    if (width > 640) {
+      setShowRepairRequestModal(true);
+    } else {
+      // this is for if we want to optionally render a seperate page on mobile view
+      setShowRepairRequestModal(false);
+    }
   }
   return (
     <div className="mx-5 mt-4 rounded-lg bg-slate-200 shadow-lg">
@@ -83,8 +124,8 @@ const RequestView = ({
                 <div className="flex justify-center mt-1">
                   <button
                     className="bg-primary-700 px-4 py-1 rounded-lg text-white text-md hover:bg-primary-600"
-                    onClick={manageModal}
-                    onKeyDown={manageModal}
+                    onClick={handleRepairClick}
+                    // onKeyDown={handleRepairClick}
                   >
                     Repair
                   </button>

src/components/FormFields/field-radio.tsx

@@ -40,7 +40,7 @@ export default function FieldRadio<T extends FieldValues = FieldValues>({
   const baseStyle = `relative flex ${width} ${height} mb-2 items-center justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 border shadow-sm hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
-  const radioStyle = `my-auto flex ${axis} items-start gap-4 text-xs`;
+  const radioStyle = `m-auto flex ${axis} items-start gap-4 text-xs justify-center`;
 
   return (
     <div

src/components/FormFields/field-text-area.tsx

@@ -35,7 +35,7 @@ export default function FieldTextArea<T extends FieldValues = FieldValues>({
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
 
-  const baseStyle = `relative flex ${height} ${width} justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 shadow-sm border border-grey-300 hover:shadow-grey-300`;
+  const baseStyle = `relative flex ${height} ${width} justify-between rounded-lg bg-white px-3 py-2.5 text-base font-medium text-gray-900 shadow-sm border border-grey-300 hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
   const textAreaStyle = `overflow-wrap:break-word pt-3 h-full w-full resize-none overflow-y-auto text-base placeholder:text-gray-500 placeholder:font-normal focus:outline-none focus:ring-0`;