Data Table and Popover Menu: Popover obscured by footer, display issues.

[GCHQ-Developer-299]

Summary of the bug

Internal client has reported display issue with Popover Menu when inside a data table.

1. The popover is covered by the table footer.
2. A second scrollbar appears to the right of the table when a popover is open.

Issues displayed in below screenshot

🪜 How to reproduce

I have created a code example (with popovers inside data table cells) but without a table-footer or the height restriction from the above screenshot:

import React, { FC, useState } from "react";
import { IcDataTable } from "@ukic/canary-react";
import {
  IcButton,
  IcMenuItem,
  IcPopoverMenu,
  IcTypography,
  SlottedSVG,
} from "@ukic/react";
import type { IcDataTableColumnObject } from "@ukic/canary-web-components";
import { mdiDotsVertical } from "@mdi/js";

import "@ukic/fonts/dist/fonts.css";
import "@ukic/react/dist/core/core.css";
import "@ukic/react/dist/core/normalize.css";

type User = {
  userID: string;
  name: string;
  familiarName?: string;
  organisation: string;
  team: string;
  role: string;
};

const DataTable: FC = () => {
  const [openPopper, setOpenPopper] = useState<number | null>(null);
  const [selectedUser, setSelectedUser] = useState<User | null>(null);

  const columns: IcDataTableColumnObject[] = [
    {
      key: "name",
      title: "Name",
      dataType: "element",
      textWrap: true,
    },
    {
      key: "organisation",
      title: "Organisation",
      dataType: "string",
      textWrap: true,
    },
    {
      key: "team",
      title: "Team",
      dataType: "string",
      textWrap: true,
    },
    {
      key: "role",
      title: "Role",
      dataType: "string",
      textWrap: true,
    },
  ];

  const roles = [
    {
      name: "Alyla Syko",
      organisation: "GBR.ORG1",
      role: "Owner",
      team: "This alias has all the things",
      userID: "alyla",
    },
    {
      name: "Rana Vamma",
      organisation: "GBR.ORG1",
      role: "Member",
      team: "This alias has the frigate and Xwing",
      userID: "rana",
    },
    {
      name: "Timi Abar",
      organisation: "GBR.ORG1",
      role: "Owner",
      team: "This alias has the Freight and Frigate",
      userID: "timi",
    },
    {
      name: "Bo Ath",
      organisation: "GBR.ORG1",
      role: "Owner",
      team: "GBR.ORG1 Staff",
      userID: "bo",
    },
    {
      name: "Darth Sidious",
      organisation: "ORG.WEST",
      role: "Member",
      team: "Sith Lord",
      userID: "darsid2",
    },
  ];

  const data = [
    {
      organisation: "GBR.ORG1",
      team: "This alias",
      role: "Owner",
    },
    {
      organisation: "GBR.ORG1",
      team: "This alias has the frigate and Xwing",
      role: "Member",
    },
    {
      organisation: "GBR.ORG1",
      team: "This alias has the Freight and Frigate",
      role: "Owner",
    },
    {
      organisation: "GBR.ORG1",
      team: "GBR.ORG1 Staff",
      role: "Owner",
    },
    {
      organisation: "ORG.WEST",
      team: "Sith Lord",
      role: "Member",
    },
  ];

  const createNameCells = () =>
    roles.map((role, row) => (
      <div
        className="nameCell"
        slot={`name-${row}`}
        style={{ display: "flex", alignItems: "center", width: "100%" }}
      >
        <IcTypography className="name">
          {`${role.name} (${role.userID})`}
        </IcTypography>
        <IcButton
          variant="icon"
          title="More information"
          id={`button-${row}`}
          onClick={() => setOpenPopper(row)}
        >
          <SlottedSVG
            slot="icon"
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            fill="currentColor"
            class="bi bi-three-dots-vertical"
            viewBox="0 0 16 16"
          >
            <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
          </SlottedSVG>
        </IcButton>
        <IcPopoverMenu
          anchor={`button-${row}`}
          aria-label="popover"
          open={openPopper == row}
          onIcPopoverClosed={() => setOpenPopper(null)}
        >
          <IcMenuItem
            label={`Remove ${role.name}`}
            onClick={() => console.log("Remove Called")}
          />
          <IcMenuItem
            label={`Change to new role?`}
            onClick={() => console.log("Update called")}
          />
        </IcPopoverMenu>
      </div>
    ));

  return (
    <div>
      <IcDataTable
        caption="IcPopoverBug"
        columns={columns}
        data={data}
        minWidth="75rem"
        tableLayout="auto"
      >
        {createNameCells()}
      </IcDataTable>
    </div>
  );
};
export default DataTable;

🧐 Expected behaviour

Expect the popover menu to appear above the table footer and not affect the height of the data table.

Additional info

We recently made a fix to tooltips for a similar issue, that might help:
#2351