In an effort to style my MapBoxGL popup content, I am working on aligning the text above the image to the left and centering the image below within the popup. As shown in the image below, this is currently proving to be a challenge as I transition from using <img> components to next.js <Image /> components and find myself wishing for more examples in the documentation.
https://i.stack.imgur.com/JhQ0U.png
Below is my existing code where I have experimented with various approaches to achieve the desired layout. As far as I understand it, the text should be contained within an outer parent with the class flex flex-col, aligned using either justify-start or items-start, while the parent of the <Image /> should utilize flex justify-center or similar attributes.
I am also struggling to comprehend why my popup appears wider than the content when I only specify w-full in the parent div and provide an exact width for the <Image />.
Any assistance or guidance on this matter would be greatly appreciated!
const popupContent = (
<div className='test w-full h-full flex flex-col space-y-4'>
{/*<div className='flex flex-row w-full h-full'>*/}
<div className='flex flex-col items-start'>
<Link
href={`/listings/${listing.id}`}
className="text-blue-500 hover:underline focus:outline-none">
<h3>
{listing.title}
</h3>
</Link>
<p>{listing.activity_type}</p>
<p>{listing.mount_type}</p>
</div>
{/*<div className="relative w-full h-full">*/}
<div className="relative w-3/4 h-full flex justify-center">
{/*<div className="relative w-36 h-64">*/}
<Image
src={listing.primary_image_url}
alt="Listing"
// fill={true}
object-Fit='fill'
// width="100%"
// className='justify-items-center'
// className="object-cover w-full h-full"
width='300'
height='600'
/*object-Fit='contain'
fill={false}
className='w-full'*/
/>
</div>
</div>
);