Dropdown Menus don't work within Table Cells

[tsekiguchi]

Describe the bug

When using the table components that are provided, if a button with a dropdown menu is put inside, the dropdown functions but options are cut off by the bounds of the table, and positioning is not respected. However, when testing with HTML Table elements, dropdown menus work fine.

Reproduction

Here's a quick test mockup using Table Elements, Button, and Dropdown

https://stackblitz.com/edit/sveltejs-kit-template-default-4rfsg8?file=src%2Froutes%2F%2Bpage.svelte

Flowbite version and System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.34 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 4.3.0 - ~/.nvm/versions/node/v20.12.2/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
  Browsers:
    Chrome: 126.0.6478.115
    Safari: 17.5
  npmPackages:
    svelte: ^4.2.18 => 4.2.18 
    vite: ^5.3.1 => 5.3.1

[shinokada]

Button and Dropdown need to be in the same row.

https://stackblitz.com/edit/sveltejs-kit-template-default-4ilvxp?file=src%2Froutes%2F%2Bpage.svelte,package.json

[gregg-cbs]

I am having issues with dropdown placement in my table - on ios safari. I thought this was fixed in the dropdown updates that were done but its still acting up.

Video Recording: https://github.com/themesberg/flowbite-svelte/assets/57114335/a480f554-fb1f-4248-a081-708a97703e80

Code used (simplified):

<Table class='min-w-[920px] md:min-w-[1100px]'>
  <TableHead>
    <TableHeadCell class={thClass}>action</TableHeadCell>
  </TableHead>

  <TableBody>
    {#each orders as order, index (order.id)}
    <TableBodyRow>
      <TableBodyCell {tdClass}>
        <Button
          color="none"
          size="xs"
          class="dropdown-actions rounded-none"
          on:click={() => setActiveOrder(order, index)}
          >
          <Icon src={EllipsisVertical} class="w-5" />
        </Button>
      </TableBodyCell>
    </TableBodyRow>
    {/each}
  </TableBody>
</Table>

<Dropdown
  bind:open={dropdownOpen}
  placement="bottom-end"
  triggeredBy={'.dropdown-actions'}
  containerClass="z-10 w-36"
>
<DropdownItem on:click={() => onOpenResend()} class="flex gap-3 items-center">
  <Icon src={ArrowPath} size="15" />
  Resend
</DropdownItem>

<DropdownItem class="flex gap-3 items-center" href={activeOrder?.attributes?.pdf_url} download target="_blank">
  <Icon src={ArrowDownTray} size="15" />
  Download
</DropdownItem>
</Dropdown>

[shinokada]

I will close the issue for now. Please feel free to open a new issue.