Chore: fixed text-alignment on hovering tableCells (#27311)

## FilterableTableCell

### added
- added `display: inline-flex` and `align-items: center` to
  `tableCellWrapper` class
- added `flex: 1` to `tableCell` class

### removed
- unused imports
- removed ternary if since it has no use anymore
- removed `tableCellWrapper` style definition from stylesFactory

packages/grafana-ui/src/components/Table/FilterableTableCell.tsx

@@ -1,10 +1,9 @@
 import React, { FC, useCallback, useState } from 'react';
 import { TableCellProps } from 'react-table';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css } from 'emotion';
 
 import { stylesFactory, useTheme } from '../../themes';
-import { TableStyles } from './styles';
 import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableFilterActionCallback } from './types';
 import { Icon, Tooltip } from '..';
 import { Props, renderCell } from './TableCell';
@@ -35,15 +34,10 @@ export const FilterableTableCell: FC<FilterableTableCellProps> = ({
     [cell, field, onCellFilterAdded]
   );
   const theme = useTheme();
-  const styles = getFilterableTableCellStyles(theme, tableStyles);
+  const styles = getFilterableTableCellStyles(theme);
 
   return (
-    <div
+    <div {...cellProps} className={tableStyles.tableCellWrapper} onMouseOver={onMouseOver} onMouseLeave={onMouseLeave}>
-      {...cellProps}
-      className={showFilters ? styles.tableCellWrapper : tableStyles.tableCellWrapper}
-      onMouseOver={onMouseOver}
-      onMouseLeave={onMouseLeave}
-    >
       {renderCell(cell, field, tableStyles)}
       {showFilters && cell.value && (
         <div className={styles.filterWrapper}>
@@ -63,15 +57,7 @@ export const FilterableTableCell: FC<FilterableTableCellProps> = ({
   );
 };
 
-const getFilterableTableCellStyles = stylesFactory((theme: GrafanaTheme, tableStyles: TableStyles) => ({
+const getFilterableTableCellStyles = stylesFactory((theme: GrafanaTheme) => ({
-  tableCellWrapper: cx(
-    tableStyles.tableCellWrapper,
-    css`
-      display: inline-flex;
-      justify-content: space-between;
-      align-items: center;
-    `
-  ),
   filterWrapper: css`
     label: filterWrapper;
     display: inline-flex;

packages/grafana-ui/src/components/Table/styles.ts

@@ -89,6 +89,8 @@ export const getTableStyles = stylesFactory(
       `,
       tableCellWrapper: css`
         border-right: 1px solid ${borderColor};
+        display: inline-flex;
+        align-items: center;
         height: 100%;
 
         &:last-child {
@@ -107,6 +109,7 @@ export const getTableStyles = stylesFactory(
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
+        flex: 1;
       `,
       overflow: css`
         overflow: hidden;