From 5b6e156934ad7798d636355abb201db399ce90b7 Mon Sep 17 00:00:00 2001
From: Michel Engelen <32863416+michelengelen@users.noreply.github.com>
Date: Tue, 8 Sep 2020 18:20:44 +0200
Subject: [PATCH] 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
---
 .../components/Table/FilterableTableCell.tsx  | 22 ++++---------------
 .../grafana-ui/src/components/Table/styles.ts |  3 +++
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/FilterableTableCell.tsx b/packages/grafana-ui/src/components/Table/FilterableTableCell.tsx
index fa1962d5ba2..b15d98a8d13 100644
--- a/packages/grafana-ui/src/components/Table/FilterableTableCell.tsx
+++ b/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
-      {...cellProps}
-      className={showFilters ? styles.tableCellWrapper : tableStyles.tableCellWrapper}
-      onMouseOver={onMouseOver}
-      onMouseLeave={onMouseLeave}
-    >
+    <div {...cellProps} className={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) => ({
-  tableCellWrapper: cx(
-    tableStyles.tableCellWrapper,
-    css`
-      display: inline-flex;
-      justify-content: space-between;
-      align-items: center;
-    `
-  ),
+const getFilterableTableCellStyles = stylesFactory((theme: GrafanaTheme) => ({
   filterWrapper: css`
     label: filterWrapper;
     display: inline-flex;
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index 8617145c0f4..87b08c76d9d 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/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;