- corrected sighting modal sizing and button locations for small screens

src/components/SightingModal/SightingModal.tsx

@@ -49,7 +49,6 @@ const SightingModal = ({
       }
 
       dispatch({ type: "ADD", payload: sighting });
-      toast.success("Sighting successfully added to alert list");
       handleClose();
     } catch (error) {
       console.log(error);
@@ -80,6 +79,42 @@ const SightingModal = ({
               Sighting Details
             </h2>
           </div>
+          <div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center flex md:hidden">
+            {onDelete ? (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
+                onClick={handleDeleteClick}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+                Delete
+              </button>
+            ) : (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
+                onClick={handleClose}
+              >
+                <FontAwesomeIcon icon={faX} />
+                Deny
+              </button>
+            )}
+            {onDelete ? (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-blue-600 text-white hover:bg-blue-700 w-full md:w-full"
+                onClick={handleClose}
+              >
+                <FontAwesomeIcon icon={faX} />
+                Close
+              </button>
+            ) : (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-full"
+                onClick={handleAcknowledgeButton}
+              >
+                <FontAwesomeIcon icon={faCheck} />
+                Accept
+              </button>
+            )}
+          </div>
           <div className="flex flex-col md:flex-row gap-3 items-center mb-2 justify-between">
             <div className="flex flex-col md:flex-row gap-3 items-center">
               <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
@@ -119,13 +154,13 @@ const SightingModal = ({
               />
             )}
           </div>
-          <div className="flex flex-col md:flex-row items-center gap-3">
+          <div className="flex flex-col lg:flex-row items-center gap-3">
             <img
               src={sighting?.overviewUrl}
               alt="overview patch"
               className="w-full h-56 sm:h-72 md:h-96 rounded-lg object-cover border border-gray-700"
             />
-            <aside className="w-full md:w-80 lg:w-[40%] bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700">
+            <aside className="w-full lg:w-80  bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700">
               <h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">
                 Vehicle Info
               </h3>
@@ -177,7 +212,7 @@ const SightingModal = ({
             </aside>
           </div>
 
-          <div className="mt-3 flex flex-col-reverse gap-3 md:flex-row md:justify-center">
+          <div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center hidden md:flex">
             {onDelete ? (
               <button
                 className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-blue-600 text-white hover:bg-blue-700 w-full md:w-full"

src/hooks/useCameraBlackboard.ts

@@ -41,10 +41,11 @@ export const useCameraBlackboard = () => {
         value: options?.value,
       }),
     onError: (error) => {
-      toast.error(`cannot get data: ${error.message}`, {
+      toast.error(`${error.message}`, {
         id: "viewBlackboardData",
       });
     },
+    onSuccess: () => toast.success("Sighting successfully added to alert list"),
   });
 
   useEffect(() => {