[EuiTable EuiBasicTable] Ensure nested content is correctly positioned and aligned

[mgadewoll]

Description

As part of the Emotion conversion for EUI table components (PR), there was a change made to improve alignment of nested table content which seems to causes overlapping content issues.

🔗 reported Kibana issue: elastic/kibana#188374

ℹ The issue only appears when selection is set as there is additional padding set for expanded rows when the table is selectable.

This is reproducible in EUI, e.g. locally in Storybook by nesting EuiBasicTable.

// Storybook reproduction example

const testColumns = [
  {
    name: '',
    render: () => <EuiIcon type="warning" />,
    width: '32px',
  },
  ...columns,
];

export const ExpandedRow: Story = {
  parameters: {
    controls: {
      include: ['columns', 'items', 'itemIdToExpandedRowMap'],
    },
  },
  args: {
    tableCaption: 'EuiBasicTable playground',
    items: users,
    itemId: 'id',
    rowHeader: 'firstName',
    columns: testColumns,
    itemIdToExpandedRowMap: {
      1: (
        <EuiBasicTable
          tableCaption="EuiBasicTable playground"
          items={users}
          itemId="id"
          rowHeader="firstName"
          columns={testColumns}
        />
      ),
    },
    selection: {
      selectable: (user) => user.online,
      selectableMessage: (selectable) =>
        !selectable ? 'User is currently offline' : '',
      onSelectionChange: action('onSelectionChange'),
    },
  },
};