Convert compressed vs uncompressed styles

+ fix line-height regression from production - doesn't quite match the new `euiFontSize` util

- note: compressed styles are not applied in mobile views

src/components/table/_responsive.scss

@@ -22,8 +22,6 @@
 
 @include euiBreakpoint('xs', 's') {
   .euiTable.euiTable--responsive {
-    // Not allowing compressed styles in mobile view (for now)
-
     thead {
       display: none; // Use mobile versions of selecting and filtering instead
     }

src/components/table/_table.scss

@@ -1,13 +1,3 @@
-// Compressed styles not for mobile
-@include euiBreakpoint('m', 'l', 'xl') {
-  .euiTable--compressed {
-    .euiTableCellContent {
-      @include euiFontSizeXS;
-      padding: $euiTableCellContentPaddingCompressed;
-    }
-  }
-}
-
 .euiTableFooterCell,
 .euiTableHeaderCell {
   @include euiTableCell;
@@ -127,16 +117,13 @@
 
 /**
  * 1. Vertically align all children.
- * 2. The padding on this div allows the ellipsis to show if the content is truncated. If
- *    the padding was on the cell, the ellipsis would be cropped.
  * 4. Prevent very long single words (e.g. the name of a field in a document) from overflowing
  *    the cell.
  */
 .euiTableCellContent {
   overflow: hidden; /* 4 */
   display: flex;
   align-items: center; /* 1 */
-  padding: $euiTableCellContentPadding; /* 2 */
 }
 
 .euiTableCellContent__text {

src/components/table/table.styles.ts

@@ -14,11 +14,12 @@ import { euiFontSize, euiNumberFormat, logicalCSS } from '../../global_styling';
 export const euiTableStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
+  const cellContentPadding = euiTheme.size.s;
+  const compressedCellContentPadding = euiTheme.size.xs;
+
   return {
     euiTable: css`
-      ${euiFontSize(euiThemeContext, 's')}
       ${euiNumberFormat(euiThemeContext)}
-
       ${logicalCSS('width', '100%')}
       border: none;
       border-collapse: collapse;
@@ -32,6 +33,29 @@ export const euiTableStyles = (euiThemeContext: UseEuiTheme) => {
         table-layout: auto;
       `,
     },
+    /**
+     * 1. The padding on the `.euiTableCellContent` div allows the ellipsis to show if the
+     * content is truncated. If the padding was on the cell, the ellipsis would be cropped.
+     * 2. The `:where()` selector sets the specificity to 0, allowing consumers to more easily
+     * override our CSS if needed
+     */
+    uncompressed: css`
+      font-size: ${euiFontSize(euiThemeContext, 's').fontSize};
+      line-height: ${euiFontSize(euiThemeContext, 'm').lineHeight};
+
+      /* 1 & 2 */
+      & :where(.euiTableCellContent) {
+        padding: ${cellContentPadding};
+      }
+    `,
+    compressed: css`
+      ${euiFontSize(euiThemeContext, 'xs')}
+
+      /* 1 & 2 */
+      & :where(.euiTableCellContent) {
+        padding: ${compressedCellContentPadding};
+      }
+    `,
   };
 };
 

src/components/table/table.tsx

@@ -9,7 +9,7 @@
 import React, { FunctionComponent, TableHTMLAttributes } from 'react';
 import classNames from 'classnames';
 
-import { useEuiMemoizedStyles } from '../../services';
+import { useEuiMemoizedStyles, useIsWithinMaxBreakpoint } from '../../services';
 import { CommonProps } from '../common';
 
 import { euiTableStyles } from './table.styles';
@@ -33,13 +33,20 @@ export const EuiTable: FunctionComponent<EuiTableProps> = ({
   responsive = true,
   ...rest
 }) => {
+  // TODO: Make the table responsive breakpoint customizable via prop
+  const isResponsive = useIsWithinMaxBreakpoint('s') && responsive;
+
   const classes = classNames('euiTable', className, {
-    'euiTable--compressed': compressed,
     'euiTable--responsive': responsive,
   });
 
   const styles = useEuiMemoizedStyles(euiTableStyles);
-  const cssStyles = [styles.euiTable, styles.layout[tableLayout]];
+  const cssStyles = [
+    styles.euiTable,
+    styles.layout[tableLayout],
+    (!compressed || isResponsive) && styles.uncompressed,
+    compressed && !isResponsive && styles.compressed,
+  ];
 
   return (
     <table tabIndex={-1} css={cssStyles} className={classes} {...rest}>