Clean up EuiTableSortMobile flex + remove unnecessary flex group di…

…vs in `EuiBasicTable`

- not totally sure why `.euiTableSortMobile` was even setting flex in the first place if it wasn't using it, might as well get rid of the extra divs

+ extend component props to accept `css`, not just `className`

src/components/basic_table/basic_table.tsx

@@ -30,7 +30,6 @@ import {
 import { CommonProps } from '../common';
 import { isFunction } from '../../services/predicate';
 import { get } from '../../services/objects';
-import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiCheckbox } from '../form';
 
 import { EuiComponentDefaultsContext } from '../provider/component_defaults';
@@ -562,14 +561,8 @@ export class EuiBasicTable<T extends object = any> extends Component<
 
     const mobileHeader = responsive ? (
       <EuiTableHeaderMobile>
-        <EuiFlexGroup
-          responsive={false}
-          justifyContent="spaceBetween"
-          alignItems="baseline"
-        >
-          <EuiFlexItem grow={false}>{this.renderSelectAll(true)}</EuiFlexItem>
-          <EuiFlexItem grow={false}>{this.renderTableMobileSort()}</EuiFlexItem>
-        </EuiFlexGroup>
+        {this.renderSelectAll(true)}
+        {this.renderTableMobileSort()}
       </EuiTableHeaderMobile>
     ) : undefined;
     const caption = this.renderTableCaption();

src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`EuiTableSortMobile is rendered 1`] = `
 <div
-  class="euiTableSortMobile testClass1 testClass2 emotion-euiTestCss"
+  class="euiTableSortMobile testClass1 testClass2 emotion-euiTableSortMobile-euiTestCss"
 >
   <div
     class="euiPopover emotion-euiPopover-inline-block"

src/components/table/mobile/table_header_mobile.styles.ts

@@ -13,7 +13,8 @@ import { UseEuiTheme } from '../../../services';
 export const euiTableHeaderMobileStyles = ({ euiTheme }: UseEuiTheme) => ({
   euiTableHeaderMobile: css`
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
+    align-items: baseline;
     padding-block: ${euiTheme.size.s};
   `,
 });

src/components/table/mobile/table_sort_mobile.tsx

@@ -9,10 +9,12 @@
 import React, { Component, ReactNode, Key } from 'react';
 import classNames from 'classnames';
 
+import { CommonProps } from '../../common';
 import { EuiButtonEmpty } from '../../button/button_empty';
 import { EuiPopover, PopoverAnchorPosition } from '../../popover';
 import { EuiContextMenuPanel } from '../../context_menu';
 import { EuiI18n } from '../../i18n';
+
 import { EuiTableSortMobileItem } from './table_sort_mobile_item';
 
 interface ItemProps {
@@ -23,8 +25,7 @@ interface ItemProps {
   isSortAscending?: boolean;
 }
 
-export interface EuiTableSortMobileProps {
-  className?: string;
+export interface EuiTableSortMobileProps extends CommonProps {
   anchorPosition?: PopoverAnchorPosition;
   items?: ItemProps[];
 }
@@ -53,6 +54,12 @@ export class EuiTableSortMobile extends Component<
     });
   };
 
+  // Aligns the button to the right even when it's the only element present
+  euiTableSortMobileStyles = {
+    marginInlineStart: 'auto',
+    label: 'euiTableSortMobile',
+  };
+
   render() {
     const { className, anchorPosition, items, ...rest } = this.props;
 
@@ -101,6 +108,10 @@ export class EuiTableSortMobile extends Component<
       </EuiPopover>
     );
 
-    return <div className={classes}>{mobileSortPopover}</div>;
+    return (
+      <div className={classes} css={this.euiTableSortMobileStyles}>
+        {mobileSortPopover}
+      </div>
+    );
   }
 }