- enhanced modal animations

src/components/SightingModal/SightingModal.tsx

@@ -21,6 +21,7 @@ type SightingModalProps = {
 };
 
 const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }: SightingModalProps) => {
+  console.log(sighting);
   const { dispatch } = useAlertHitContext();
 
   const { query, mutation } = useCameraBlackboard();
@@ -147,13 +148,13 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
           {hotlistNames && hotlistNames.length > 0 && (
             <div className="flex flex-col border-b border-gray-600 mb-4">
               <p className="text-gray-300">Hotlists</p>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[90%] lg:gap-x-[15%] w-[50%]">
+              <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-[20%] w-[50%]">
                 {hotlistNames.map((hotlistName, index) => (
-                  <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-55 m-2" key={index}>
+                  <span className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-50 m-2" key={index}>
                     <p className="font-medium text-2xl break-all text-amber-800">
                       {hotlistName ? hotlistName?.replace(/\.csv$/i, "") : "-"}
                     </p>
-                  </div>
+                  </span>
                 ))}
               </div>
             </div>