From 12cd0f9f37cd13e0e69adfc44fd04212b5eb4a9e Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Wed, 19 Nov 2025 15:03:20 +0000
Subject: [PATCH] - minor adjustments to modal

---
 src/components/SightingModal/SightingModal.tsx | 8 ++++----
 src/components/UI/ModalComponent.tsx           | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/SightingModal/SightingModal.tsx b/src/components/SightingModal/SightingModal.tsx
index 26a270f..a8091a2 100644
--- a/src/components/SightingModal/SightingModal.tsx
+++ b/src/components/SightingModal/SightingModal.tsx
@@ -83,7 +83,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
   return (
     <>
       <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
-        <div className="max-w-screen-lg mx-auto py-4 px-2">
+        <div className="mx-auto py-4 px-6 overflow-y-scroll">
           <div className="border-b border-gray-600 mb-4">
             <h2 className="text-lg md:text-xl font-semibold">Sighting Details</h2>
           </div>
@@ -134,7 +134,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
             {isNPEDHitB && <img src={NPED_CAT_B} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
             {isNPEDHitC && <img src={NPED_CAT_C} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
           </div>
-          {hotlistNames && (
+          {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%]">
@@ -148,11 +148,11 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
               </div>
             </div>
           )}
-          <div className="flex flex-col lg: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"
+              className="w-full h-56 sm:h-72 md:h-72 rounded-lg object-cover border 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>
diff --git a/src/components/UI/ModalComponent.tsx b/src/components/UI/ModalComponent.tsx
index 2910484..93c9c79 100644
--- a/src/components/UI/ModalComponent.tsx
+++ b/src/components/UI/ModalComponent.tsx
@@ -12,7 +12,7 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
     <Modal
       isOpen={isModalOpen}
       onRequestClose={close}
-      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[80%] mx-auto mt-[1%] md:w-[70%] md:h-[95%] z-[100] overflow-y-auto max-h-screen"
+      className="bg-[#1e2a38] p-3 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] h-[100%] md:h-[95%] lg:h-[85%] z-[100] overflow-y-auto"
       overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
     >
       {children}