TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- minor adjustments to modal

Browse Source
This commit is contained in:
Toba Ojo
2025-11-19 15:03:20 +00:00
parent 0b3dcbb265
commit 12cd0f9f37
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/SightingModal/SightingModal.tsx
View File

@@ -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>

2
src/components/UI/ModalComponent.tsx
View File

@@ -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}