Modal placement in mobile is not working as intended

[klemonade]

using "flowbite-svelte": "^0.24.0"

I tried to use Modal placement prop which is worked fine in PC screen

But it seems to be broken on mobile

This is what I wrote

<Modal title={selectData.title} bind:open placement="center">
  <div class="grid grid-cols-[50px_auto] gap-2">
	  <img src="/icon/calendar.png" alt="" class="w-[24px] h-[24px]" />
	  <p>{new Date(selectData.time).toLocaleDateString('en-UK')}</p>
	  <img src="/icon/clock.png" alt="" class="w-[24px] h-[24px]" />
	  <p>
		  {new Date(selectData.time).toLocaleTimeString([], {
			  hour: '2-digit',
			  minute: '2-digit'
		  })}
	  </p>
	  <img src="/icon/location.png" alt="" class="w-[24px] h-[24px]" />
	  <p>{selectData.location}</p>
  </div>
  <p class="pt-4 indent-4 overflow-scroll max-h-[40vh]">{selectData.description}</p>
  
  <svelte:fragment slot="footer">
	  <button
		  class="bg-black text-white w-[150px] h-[50px] rounded-2xl hover:bg-white hover:text-black transition-all ease-in-out border-2 border-black"
		  on:click={() => {
			  goto(selectData.hyperlink);
		  }}>More detail</button
	  >
  </svelte:fragment>
</Modal>

[HenryKun55]

You need to customize theme

the default theme for content is

return (
    <ModalFlowbite
      theme={{ content: { base: 'relative h-auto w-full p-4' } }}
      show={show}
      onClose={close}
      position="center"
      dismissible>
      {props.children}
    </ModalFlowbite>
  )

I just changed the h-full for h-auto