@atlaskit/editor-plugin-table 7.16.10 → 7.16.12

package/dist/es2019/ui/common-styles.js

@@ -109,54 +109,61 @@ const shadowSentinelStyles = `
 `;
 const breakoutWidthStyling = () => {
   return css`
-    > *:not([data-mark-type='fragment'])
-      .${ClassName.NODEVIEW_WRAPPER}
-      .${ClassName.TABLE_CONTAINER} {
-      margin-left: unset !important;
-      width: 100% !important;
-    }
-
-    > [data-mark-type='fragment']
-      *
-      .${ClassName.NODEVIEW_WRAPPER}
-      .${ClassName.TABLE_CONTAINER} {
-      margin-left: unset !important;
-      width: 100% !important;
-    }
-  `;
+		> *:not([data-mark-type='fragment'])
+			.${ClassName.NODEVIEW_WRAPPER}
+			.${ClassName.TABLE_CONTAINER} {
+			margin-left: unset !important;
+			width: 100% !important;
+		}
+
+		> [data-mark-type='fragment'] * .${ClassName.NODEVIEW_WRAPPER} .${ClassName.TABLE_CONTAINER} {
+			margin-left: unset !important;
+			width: 100% !important;
+		}
+	`;
 };
 const viewModeSortStyles = () => {
   if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
     return css`
-      th {
-        .${SORTING_ICON_CLASS_NAME} {
-          + p {
-            margin-top: 0 !important;
-          }
-        }
-
-        &:has(.is-active) {
-          .${SORTABLE_COLUMN_ICON_CLASSNAME} {
-            opacity: 1;
-          }
-        }
-
-        .${SORTABLE_COLUMN_ICON_CLASSNAME} {
-          opacity: 0;
-          &:focus {
-            opacity: 1;
-          }
-        }
-
-        &:hover {
-          .${SORTABLE_COLUMN_ICON_CLASSNAME} {
-            opacity: 1;
-          }
-        }
-      }
-    `;
+			th {
+				.${SORTING_ICON_CLASS_NAME} {
+					+ p {
+						margin-top: 0 !important;
+					}
+				}
+
+				&:has(.is-active) {
+					.${SORTABLE_COLUMN_ICON_CLASSNAME} {
+						opacity: 1;
+					}
+				}
+
+				.${SORTABLE_COLUMN_ICON_CLASSNAME} {
+					opacity: 0;
+					&:focus {
+						opacity: 1;
+					}
+				}
+
+				&:hover {
+					.${SORTABLE_COLUMN_ICON_CLASSNAME} {
+						opacity: 1;
+					}
+				}
+			}
+		`;
   }
 };
+const numberColumnFix = () => {
+  if (getBooleanFF('platform.editor.table.editor-num-col-style-changes')) {
+    return '';
+  }
+  return css`
+		> table[data-number-column='true'] {
+			width: calc(100% - 1px);
+		}
+	`;
+};
 const tableBorderStyles = () => {
   return `border-color: ${tableBorderDeleteColor}`;
 };
@@ -164,39 +171,36 @@ const tableBorderStyles = () => {
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 const tableStickyHeaderColumnControlsDecorationsStyle = () => {
   return css`
-    .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-      z-index: 0;
-      left: -1px;
-    }
-
-    .${ClassName.TABLE_STICKY}
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-      border-left: 1px solid ${tableBorderColor};
-    }
-
-    .${ClassName.TABLE_STICKY}
-      tr:first-of-type
-      th.${ClassName.TABLE_HEADER_CELL} {
-      &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
-        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-          left: 0;
-        }
-      }
-    }
-  `;
+		.${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+			z-index: 0;
+			left: -1px;
+		}
+
+		.${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+			border-left: 1px solid ${tableBorderColor};
+		}
+
+		.${ClassName.TABLE_STICKY} tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
+			&.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
+				.${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+					left: 0;
+				}
+			}
+		}
+	`;
 };
 const tableStickyHeaderFirefoxFixStyle = () => {
   /*
-    This is MAGIC!
-    This fixes a bug which occurs in firefox when the first row becomes sticky.
-    see https://product-fabric.atlassian.net/browse/ED-19177
-  */
+     This is MAGIC!
+     This fixes a bug which occurs in firefox when the first row becomes sticky.
+     see https://product-fabric.atlassian.net/browse/ED-19177
+   */
   if (browser.gecko) {
     return css`
-      .${ClassName.TABLE_STICKY} > tbody::before {
-        content: '';
-      }
-    `;
+			.${ClassName.TABLE_STICKY} > tbody::before {
+				content: '';
+			}
+		`;
   }
 };
 
@@ -204,58 +208,58 @@ const tableStickyHeaderFirefoxFixStyle = () => {
 export const baseTableStyles = props => {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4;
   return css`
-  ${tableSharedStyle()};
-  ${columnControlsLineMarker()};
-  ${hoveredDeleteButton()};
-  ${hoveredCell()};
-  ${hoveredWarningCell};
-  ${((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && insertLine()};
-  ${resizeHandle((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop)};
-  ${rangeSelectionStyles};
-  ${viewModeSortStyles()};
-
-  .${ClassName.LAST_ITEM_IN_CELL} {
-    margin-bottom: 0;
-  }
-
-  .${ClassName.TABLE_NODE_WRAPPER} {
-    td.${ClassName.TABLE_CELL}, th.${ClassName.TABLE_HEADER_CELL} {
-      position: relative;
-      overflow: visible;
-    }
-
-    td.${ClassName.TABLE_CELL} {
-      background-color: ${tableCellBackgroundColor};
-
-      // ED-15246: Trello card is visible through a border of a table border
-      // This fixes a border issue caused by relative positioned table cells
-      &::after {
-        height: 100%;
-        content: '';
-        border-left: 1px solid ${tableBorderColor};
-        border-bottom: 1px solid ${tableBorderColor};
-        position: absolute;
-        right: 0px;
-        top: 0px;
-        bottom: 0;
-        width: 100%;
-        display: inline-block;
-        pointer-events: none;
-      }
-    }
-  }
-
-  .${ClassName.CONTROLS_FLOATING_BUTTON_COLUMN} {
-    ${insertColumnButtonWrapper()}
-  }
-
-  .${ClassName.CONTROLS_FLOATING_BUTTON_ROW} {
-    ${insertRowButtonWrapper()}
-  }
-
-  ${dragInsertButtonWrapper()}
-
-  ${dragCornerControlButton()}
+	${tableSharedStyle()};
+	${columnControlsLineMarker()};
+	${hoveredDeleteButton()};
+	${hoveredCell()};
+	${hoveredWarningCell};
+	${((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && insertLine()};
+	${resizeHandle((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop)};
+	${rangeSelectionStyles};
+	${viewModeSortStyles()};
+
+	.${ClassName.LAST_ITEM_IN_CELL} {
+		margin-bottom: 0;
+	}
+
+	.${ClassName.TABLE_NODE_WRAPPER} {
+		td.${ClassName.TABLE_CELL}, th.${ClassName.TABLE_HEADER_CELL} {
+			position: relative;
+			overflow: visible;
+		}
+
+		td.${ClassName.TABLE_CELL} {
+			background-color: ${tableCellBackgroundColor};
+
+			// ED-15246: Trello card is visible through a border of a table border
+			// This fixes a border issue caused by relative positioned table cells
+			&::after {
+				height: 100%;
+				content: '';
+				border-left: 1px solid ${tableBorderColor};
+				border-bottom: 1px solid ${tableBorderColor};
+				position: absolute;
+				right: 0px;
+				top: 0px;
+				bottom: 0;
+				width: 100%;
+				display: inline-block;
+				pointer-events: none;
+			}
+		}
+	}
+
+	.${ClassName.CONTROLS_FLOATING_BUTTON_COLUMN} {
+		${insertColumnButtonWrapper()}
+	}
+
+	.${ClassName.CONTROLS_FLOATING_BUTTON_ROW} {
+		${insertRowButtonWrapper()}
+	}
+
+	${dragInsertButtonWrapper()}
+
+	${dragCornerControlButton()}
 
     /* Delete button */
     ${DeleteButton()}
@@ -263,312 +267,306 @@ export const baseTableStyles = props => {
 
     /* sticky styles */
     .${ClassName.TABLE_STICKY} .${ClassName.NUMBERED_COLUMN} .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
-    margin-top: ${stickyRowOffsetTop + 2}px;
-    width: ${akEditorTableNumberColumnWidth}px;
-
-    position: fixed !important;
-    z-index: ${akEditorStickyHeaderZIndex} !important;
-    box-shadow: 0px -${stickyRowOffsetTop}px ${"var(--ds-surface, white)"};
-    border-right: 0 none;
-    /* top set by NumberColumn component */
-  }
+		margin-top: ${stickyRowOffsetTop + 2}px;
+		width: ${akEditorTableNumberColumnWidth}px;
 
-  .${ClassName.TABLE_STICKY} .${ClassName.CORNER_CONTROLS}.sticky {
-    position: fixed !important;
-    /* needs to be above row controls */
-    z-index: ${akEditorSmallZIndex} !important;
-    background: ${"var(--ds-surface, white)"};
+		position: fixed !important;
+		z-index: ${akEditorStickyHeaderZIndex} !important;
+		box-shadow: 0px -${stickyRowOffsetTop}px ${"var(--ds-surface, white)"};
+		border-right: 0 none;
+		/* top set by NumberColumn component */
+	}
 
-    width: ${tableToolbarSize}px;
-    height: ${tableToolbarSize}px;
-  }
+	.${ClassName.TABLE_STICKY} .${ClassName.CORNER_CONTROLS}.sticky {
+		position: fixed !important;
+		/* needs to be above row controls */
+		z-index: ${akEditorSmallZIndex} !important;
+		background: ${"var(--ds-surface, white)"};
 
-  .${ClassName.CORNER_CONTROLS}.sticky .${ClassName.CONTROLS_CORNER_BUTTON} {
-    border-bottom: 0px none;
-    border-right: 0px none;
+		width: ${tableToolbarSize}px;
+		height: ${tableToolbarSize}px;
+	}
 
-    height: ${tableToolbarSize}px;
-    width: ${tableToolbarSize}px;
-  }
+	.${ClassName.CORNER_CONTROLS}.sticky .${ClassName.CONTROLS_CORNER_BUTTON} {
+		border-bottom: 0px none;
+		border-right: 0px none;
 
-  ${tableStickyHeaderColumnControlsDecorationsStyle()}
+		height: ${tableToolbarSize}px;
+		width: ${tableToolbarSize}px;
+	}
 
-  ${tableStickyHeaderFirefoxFixStyle()}
+	${tableStickyHeaderColumnControlsDecorationsStyle()}
+
+	${tableStickyHeaderFirefoxFixStyle()}
 
     .${ClassName.TABLE_STICKY}
       .${ClassName.ROW_CONTROLS}
       .${ClassName.ROW_CONTROLS_BUTTON_WRAP}.sticky {
-    position: fixed !important;
-    z-index: ${akEditorStickyHeaderZIndex} !important;
-    display: flex;
-    border-left: ${tableToolbarSize}px solid
-      ${"var(--ds-surface, white)"};
-    margin-left: -${tableToolbarSize}px;
-  }
-
-  .${ClassName.TABLE_STICKY} col:first-of-type {
-    /* moving rows out of a table layout does weird things in Chrome */
-    border-right: 1px solid ${"var(--ds-surface, green)"};
-  }
-
-  tr.sticky {
-    padding-top: ${stickyRowOffsetTop}px;
-    position: fixed;
-    display: grid;
-
-    /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */
-    z-index: ${akEditorTableCellOnStickyHeaderZIndex - 5};
-
-    overflow-y: visible;
-    overflow-x: hidden;
-
-    grid-auto-flow: column;
-
-    /* background for where controls apply */
-    background: ${"var(--ds-surface, white)"};
-    box-sizing: content-box;
-
-    margin-top: 2px;
-
-    box-shadow: 0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`};
-    margin-left: -1px;
-
-    &.no-pointer-events {
-      pointer-events: none;
-    }
-  }
-
-  .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
-    left: unset;
-    position: fixed;
-    /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */
-    z-index: ${akEditorTableCellOnStickyHeaderZIndex};
-  }
-
-  .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY}
-    .${ClassName.TABLE_STICKY_SHADOW} {
-    padding-bottom: ${tableToolbarSize}px;
-  }
-
-  tr.sticky th {
-    border-bottom: ${stickyHeaderBorderBottomWidth}px solid ${tableBorderColor};
-    margin-right: -1px;
-  }
-
-  .${ClassName.TABLE_STICKY} tr.sticky > th:last-child {
-    border-right-width: 1px;
-  }
-
-  /* add left edge for first cell */
-  .${ClassName.TABLE_STICKY} tr.sticky > th:first-of-type {
-    margin-left: 0px;
-  }
-
-  /* add a little bit so the scroll lines up with the table */
-  .${ClassName.TABLE_STICKY} tr.sticky::after {
-    content: ' ';
-    width: ${insertColumnButtonOffset + 1}px;
-  }
-
-  /* To fix jumpiness caused in Chrome Browsers for sticky headers */
-  .${ClassName.TABLE_STICKY} .sticky + tr {
-    min-height: 0px;
-  }
-
-  /* move resize line a little in sticky bar */
-  .${ClassName.TABLE_CONTAINER}.${ClassName.TABLE_STICKY} {
-    tr.sticky
-      td.${ClassName.WITH_RESIZE_LINE},
-      tr.sticky
-      th.${ClassName.WITH_RESIZE_LINE} {
-      .${ClassName.RESIZE_HANDLE_DECORATION}::after {
-        right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1}px;
-      }
-    }
-
-    /* when selected put it back to normal -- :not selector would be nicer */
-    tr.sticky
-      td.${ClassName.WITH_RESIZE_LINE}.${ClassName.SELECTED_CELL},
-      tr.sticky
-      th.${ClassName.WITH_RESIZE_LINE}.${ClassName.SELECTED_CELL} {
-      .${ClassName.RESIZE_HANDLE_DECORATION}::after {
-        right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2}px;
-      }
-    }
-  }
-
-  tr.sticky .${ClassName.HOVERED_CELL}, tr.sticky .${ClassName.SELECTED_CELL} {
-    z-index: 1;
-  }
-
-  .${ClassName.WITH_CONTROLS} tr.sticky {
-    padding-top: ${tableControlsSpacing}px;
-  }
-
-  .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY}
-    .${ClassName.NUMBERED_COLUMN}
-    .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
-    margin-top: ${tableControlsSpacing + 2}px;
-  }
-
-  .${ClassName.CORNER_CONTROLS}.sticky {
-    border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid
-      ${"var(--ds-surface, white)"};
-  }
-
-  ${sentinelStyles}
-  ${OverflowShadow((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop)}
+		position: fixed !important;
+		z-index: ${akEditorStickyHeaderZIndex} !important;
+		display: flex;
+		border-left: ${tableToolbarSize}px solid ${"var(--ds-surface, white)"};
+		margin-left: -${tableToolbarSize}px;
+	}
+
+	.${ClassName.TABLE_STICKY} col:first-of-type {
+		/* moving rows out of a table layout does weird things in Chrome */
+		border-right: 1px solid ${"var(--ds-surface, green)"};
+	}
+
+	tr.sticky {
+		padding-top: ${stickyRowOffsetTop}px;
+		position: fixed;
+		display: grid;
+
+		/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */
+		z-index: ${akEditorTableCellOnStickyHeaderZIndex - 5};
+
+		overflow-y: visible;
+		overflow-x: hidden;
+
+		grid-auto-flow: column;
+
+		/* background for where controls apply */
+		background: ${"var(--ds-surface, white)"};
+		box-sizing: content-box;
+
+		margin-top: 2px;
+
+		box-shadow: 0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`};
+		margin-left: -1px;
+
+		&.no-pointer-events {
+			pointer-events: none;
+		}
+	}
+
+	.${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
+		left: unset;
+		position: fixed;
+		/* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */
+		z-index: ${akEditorTableCellOnStickyHeaderZIndex};
+	}
+
+	.${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
+		padding-bottom: ${tableToolbarSize}px;
+	}
+
+	tr.sticky th {
+		border-bottom: ${stickyHeaderBorderBottomWidth}px solid ${tableBorderColor};
+		margin-right: -1px;
+	}
+
+	.${ClassName.TABLE_STICKY} tr.sticky > th:last-child {
+		border-right-width: 1px;
+	}
+
+	/* add left edge for first cell */
+	.${ClassName.TABLE_STICKY} tr.sticky > th:first-of-type {
+		margin-left: 0px;
+	}
+
+	/* add a little bit so the scroll lines up with the table */
+	.${ClassName.TABLE_STICKY} tr.sticky::after {
+		content: ' ';
+		width: ${insertColumnButtonOffset + 1}px;
+	}
+
+	/* To fix jumpiness caused in Chrome Browsers for sticky headers */
+	.${ClassName.TABLE_STICKY} .sticky + tr {
+		min-height: 0px;
+	}
+
+	/* move resize line a little in sticky bar */
+	.${ClassName.TABLE_CONTAINER}.${ClassName.TABLE_STICKY} {
+		tr.sticky td.${ClassName.WITH_RESIZE_LINE}, tr.sticky th.${ClassName.WITH_RESIZE_LINE} {
+			.${ClassName.RESIZE_HANDLE_DECORATION}::after {
+				right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1}px;
+			}
+		}
+
+		/* when selected put it back to normal -- :not selector would be nicer */
+		tr.sticky
+			td.${ClassName.WITH_RESIZE_LINE}.${ClassName.SELECTED_CELL},
+			tr.sticky
+			th.${ClassName.WITH_RESIZE_LINE}.${ClassName.SELECTED_CELL} {
+			.${ClassName.RESIZE_HANDLE_DECORATION}::after {
+				right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2}px;
+			}
+		}
+	}
+
+	tr.sticky .${ClassName.HOVERED_CELL}, tr.sticky .${ClassName.SELECTED_CELL} {
+		z-index: 1;
+	}
+
+	.${ClassName.WITH_CONTROLS} tr.sticky {
+		padding-top: ${tableControlsSpacing}px;
+	}
+
+	.${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY}
+		.${ClassName.NUMBERED_COLUMN}
+		.${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
+		margin-top: ${tableControlsSpacing + 2}px;
+	}
+
+	.${ClassName.CORNER_CONTROLS}.sticky {
+		border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid
+			${"var(--ds-surface, white)"};
+	}
+
+	${sentinelStyles}
+	${OverflowShadow((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop)}
     ${stickyScrollbarStyles(props.featureFlags)}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
-    height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts
-  }
-
-  .less-padding {
-    padding: 0 ${tablePadding}px;
-
-    .${ClassName.DRAG_ROW_CONTROLS_WRAPPER},
-      .${ClassName.ROW_CONTROLS_WRAPPER} {
-      padding: 0 ${tablePadding}px;
-
-      // https://product-fabric.atlassian.net/browse/ED-16386
-      // Fixes issue where the extra padding that is added here throws off the position
-      // of the rows control dot
-      &::after {
-        right: 6px !important;
-      }
-    }
-
-    .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
-      padding: 0 ${tablePadding}px;
-    }
-
-    &.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
-      padding-left: ${akEditorTableNumberColumnWidth + tablePadding - 1}px;
-    }
-    .${ClassName.TABLE_LEFT_SHADOW}, .${ClassName.TABLE_RIGHT_SHADOW} {
-      width: ${tableOverflowShadowWidth}px;
-    }
-
-    .${ClassName.TABLE_LEFT_SHADOW} {
-      left: 6px;
-    }
-
-    .${ClassName.TABLE_RIGHT_SHADOW} {
-      left: calc(100% - 6px);
-    }
-  }
-
-  > .${ClassName.NODEVIEW_WRAPPER} {
-    /**
+		height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts
+	}
+
+	.less-padding {
+		padding: 0 ${tablePadding}px;
+
+		.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}, .${ClassName.ROW_CONTROLS_WRAPPER} {
+			padding: 0 ${tablePadding}px;
+
+			// https://product-fabric.atlassian.net/browse/ED-16386
+			// Fixes issue where the extra padding that is added here throws off the position
+			// of the rows control dot
+			&::after {
+				right: 6px !important;
+			}
+		}
+
+		.${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
+			padding: 0 ${tablePadding}px;
+		}
+
+		&.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
+			padding-left: ${akEditorTableNumberColumnWidth + tablePadding - 1}px;
+		}
+		.${ClassName.TABLE_LEFT_SHADOW}, .${ClassName.TABLE_RIGHT_SHADOW} {
+			width: ${tableOverflowShadowWidth}px;
+		}
+
+		.${ClassName.TABLE_LEFT_SHADOW} {
+			left: 6px;
+		}
+
+		.${ClassName.TABLE_RIGHT_SHADOW} {
+			left: calc(100% - 6px);
+		}
+	}
+
+	> .${ClassName.NODEVIEW_WRAPPER} {
+		/**
        * Prevent margins collapsing, aids with placing the gap-cursor correctly
        * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
        *
        * TODO: Enable this, many tests will fail!
        * border-top: 1px solid transparent;
        */
-  }
+	}
 
-  /* Breakout only works on top level unless wrapped in fragment mark */
-  ${breakoutWidthStyling()}
+	/* Breakout only works on top level unless wrapped in fragment mark */
+	${breakoutWidthStyling()}
 
-  ${columnControlsDecoration()};
-  ${rowControlsWrapperDotStyle()};
+	${columnControlsDecoration()};
+	${rowControlsWrapperDotStyle()};
 
-  /* Corner controls */
-  .${ClassName.CORNER_CONTROLS} {
-    width: ${tableToolbarSize + 1}px;
-    height: ${cornerControlHeight}px;
-    display: none;
+	/* Corner controls */
+	.${ClassName.CORNER_CONTROLS} {
+		width: ${tableToolbarSize + 1}px;
+		height: ${cornerControlHeight}px;
+		display: none;
 
-    .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
-      position: relative;
+		.${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
+			position: relative;
 
-      ${InsertMarker(`
+			${InsertMarker(`
           left: -11px;
           top: 9px;
         `)};
-    }
-  }
-
-  .${ClassName.CORNER_CONTROLS}.sticky {
-    .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
-      /* sticky row insert dot overlaps other row insert and messes things up */
-      display: none !important;
-    }
-  }
-
-  .${ClassName.CONTROLS_CORNER_BUTTON} {
-    position: absolute;
-    top: 0;
-    width: ${tableToolbarSize + 1}px;
-    height: ${tableToolbarSize + 1}px;
-    border: 1px solid ${tableBorderColor};
-    border-radius: 0;
-    border-top-left-radius: ${tableBorderRadiusSize}px;
-    background: ${tableHeaderCellBackgroundColor};
-    box-sizing: border-box;
-    padding: 0;
-    :focus {
-      outline: none;
-    }
-  }
-  .active .${ClassName.CONTROLS_CORNER_BUTTON} {
-    border-color: ${tableBorderSelectedColor};
-    background: ${tableToolbarSelectedColor};
-  }
-
-  .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
-    .${ClassName.CORNER_CONTROLS}, .${ClassName.CONTROLS_CORNER_BUTTON} {
-      width: ${akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1}px;
-    }
-    .${ClassName.ROW_CONTROLS} .${ClassName.CONTROLS_BUTTON} {
-      border-right-width: 0;
-    }
-  }
-
-  :not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
-    border-color: ${tableBorderSelectedColor};
-    background: ${tableToolbarSelectedColor};
-    cursor: pointer;
-  }
-
-  :not(.${ClassName.IS_RESIZING})
-    .${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-    border-color: ${tableBorderDeleteColor};
-    background: ${tableToolbarDeleteColor};
-  }
-
-  /* Row controls */
-  .${ClassName.ROW_CONTROLS} {
-    width: ${tableToolbarSize}px;
-    box-sizing: border-box;
-    display: none;
-    position: relative;
-
-    ${InsertMarker(`
+		}
+	}
+
+	.${ClassName.CORNER_CONTROLS}.sticky {
+		.${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
+			/* sticky row insert dot overlaps other row insert and messes things up */
+			display: none !important;
+		}
+	}
+
+	.${ClassName.CONTROLS_CORNER_BUTTON} {
+		position: absolute;
+		top: 0;
+		width: ${tableToolbarSize + 1}px;
+		height: ${tableToolbarSize + 1}px;
+		border: 1px solid ${tableBorderColor};
+		border-radius: 0;
+		border-top-left-radius: ${tableBorderRadiusSize}px;
+		background: ${tableHeaderCellBackgroundColor};
+		box-sizing: border-box;
+		padding: 0;
+		:focus {
+			outline: none;
+		}
+	}
+	.active .${ClassName.CONTROLS_CORNER_BUTTON} {
+		border-color: ${tableBorderSelectedColor};
+		background: ${tableToolbarSelectedColor};
+	}
+
+	.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
+		.${ClassName.CORNER_CONTROLS}, .${ClassName.CONTROLS_CORNER_BUTTON} {
+			width: ${akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1}px;
+		}
+		.${ClassName.ROW_CONTROLS} .${ClassName.CONTROLS_BUTTON} {
+			border-right-width: 0;
+		}
+	}
+
+	:not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
+		border-color: ${tableBorderSelectedColor};
+		background: ${tableToolbarSelectedColor};
+		cursor: pointer;
+	}
+
+	:not(.${ClassName.IS_RESIZING})
+		.${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
+		border-color: ${tableBorderDeleteColor};
+		background: ${tableToolbarDeleteColor};
+	}
+
+	/* Row controls */
+	.${ClassName.ROW_CONTROLS} {
+		width: ${tableToolbarSize}px;
+		box-sizing: border-box;
+		display: none;
+		position: relative;
+
+		${InsertMarker(`
         bottom: -1px;
         left: -11px;
       `)};
 
-    .${ClassName.ROW_CONTROLS_INNER} {
-      display: flex;
-      flex-direction: column;
-    }
-    .${ClassName.ROW_CONTROLS_BUTTON_WRAP}:last-child > button {
-      border-bottom-left-radius: ${tableBorderRadiusSize}px;
-    }
-    .${ClassName.ROW_CONTROLS_BUTTON_WRAP} {
-      position: relative;
-      margin-top: -1px;
-    }
-    .${ClassName.ROW_CONTROLS_BUTTON_WRAP}:hover,
-      .${ClassName.ROW_CONTROLS_BUTTON_WRAP}.active,
-      .${ClassName.CONTROLS_BUTTON}:hover {
-      z-index: ${akEditorUnitZIndex};
-    }
-
-    ${HeaderButton(`
+		.${ClassName.ROW_CONTROLS_INNER} {
+			display: flex;
+			flex-direction: column;
+		}
+		.${ClassName.ROW_CONTROLS_BUTTON_WRAP}:last-child > button {
+			border-bottom-left-radius: ${tableBorderRadiusSize}px;
+		}
+		.${ClassName.ROW_CONTROLS_BUTTON_WRAP} {
+			position: relative;
+			margin-top: -1px;
+		}
+		.${ClassName.ROW_CONTROLS_BUTTON_WRAP}:hover,
+			.${ClassName.ROW_CONTROLS_BUTTON_WRAP}.active,
+			.${ClassName.CONTROLS_BUTTON}:hover {
+			z-index: ${akEditorUnitZIndex};
+		}
+
+		${HeaderButton(`
         border-bottom: 1px solid ${tableBorderColor};
         border-right: 0px;
         border-radius: 0;
@@ -586,440 +584,436 @@ export const baseTableStyles = props => {
           top: 0;
         }
       `)}
-  }
-
-  .${ClassName.DRAG_ROW_CONTROLS} {
-    display: grid;
-    align-items: center;
-    position: absolute;
-    z-index: ${akEditorUnitZIndex};
-
-    .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
-      position: absolute;
-      align-self: end;
-      height: 100%;
-      width: 18px;
-    }
-
-    .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT} {
-      position: absolute;
-      bottom: -3px;
-      left: 2px;
-      background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
-      height: 4px;
-      width: 4px;
-      border-radius: 50%;
-      pointer-events: none;
-    }
-  }
-
-  .${ClassName.DRAG_COLUMN_CONTROLS} {
-    .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
-      height: 24px;
-      position: absolute;
-      top: ${"var(--ds-space-negative-150, -12px)"};
-      z-index: ${resizeHandlerZIndex};
-    }
-
-    .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER} {
-      position: absolute;
-      height: 24px;
-      width: 100%;
-    }
-
-    .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT} {
-      background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
-      height: 4px;
-      width: 4px;
-      border-radius: 50%;
-      position: absolute;
-      right: -2px;
-    }
-  }
-
-  .${ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE} {
-    background: none;
-    border: none;
-    outline: none;
-    position: absolute;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    :focus {
-      outline: none;
-    }
-  }
-
-  .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
-    cursor: grab;
-    pointer-events: auto;
-
-    line-height: 0;
-    padding: 0;
-    border-radius: 6px;
-    width: max-content;
-    border: 2px solid ${`var(--ds-surface, ${N0})`};
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: transparent;
-    outline: none;
-
-    &.placeholder {
-      background-color: transparent;
-      border: 2px solid transparent;
-    }
-
-    &.${ClassName.DRAG_HANDLE_DISABLED} {
-      cursor: pointer;
-      & svg {
-        & > rect.${ClassName.DRAG_HANDLE_MINIMISED} {
-          fill: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
-        }
-        & > rect {
-          fill: ${"var(--ds-background-accent-gray-subtlest, #F4F5F7)"};
-        }
-        & > g > rect {
-          fill: ${"var(--ds-icon-disabled, #BFDBF847)"};
-        }
-      }
-    }
-
-    &:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
-      & svg {
-        rect {
-          fill: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
-        }
-        g {
-          fill: ${"var(--ds-icon-subtle, #626f86)"};
-        }
-      }
-
-      &:hover {
-        svg {
-          rect {
-            fill: ${"var(--ds-background-accent-blue-subtle, #579DFF)"};
-          }
-          g {
-            fill: ${"var(--ds-icon-inverse, #FFF)"};
-          }
-        }
-      }
-
-      &:active {
-        cursor: grabbing;
-      }
-
-      &.selected {
-        :focus {
-          outline: 2px solid ${"var(--ds-border-focused, #2684FF)"};
-          outline-offset: 1px;
-        }
-
-        &:active {
-          outline: none;
-        }
-
-        svg {
-          rect {
-            fill: ${"var(--ds-background-accent-blue-subtle, #579dff)"};
-          }
-          g {
-            fill: ${"var(--ds-icon-inverse, #fff)"};
-          }
-        }
-      }
-
-      &.danger {
-        svg {
-          rect {
-            fill: ${"var(--ds-background-accent-red-subtler-pressed, #F87462)"};
-          }
-          g {
-            fill: ${"var(--ds-border-inverse, #FFF)"};
-          }
-        }
-      }
-    }
-  }
-
-  ${floatingColumnControls()}
-
-  :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
-    ${HeaderButtonHover()}
-    ${HeaderButtonDanger()}
-  }
-
-  /* Numbered column */
-  .${ClassName.NUMBERED_COLUMN} {
-    position: relative;
-    float: right;
-    margin-left: ${akEditorTableToolbarSize}px;
-    top: ${(_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : akEditorTableToolbarSize}px;
-    width: ${akEditorTableNumberColumnWidth + 1}px;
-    box-sizing: border-box;
-  }
-
-  .${ClassName.NUMBERED_COLUMN_BUTTON} {
-    border: 1px solid ${tableBorderColor};
-    box-sizing: border-box;
-    margin-top: -1px;
-    padding-bottom: 2px;
-    padding: 10px 2px;
-    text-align: center;
-    font-size: ${relativeFontSizeToBase16(fontSize())};
-    background-color: ${tableHeaderCellBackgroundColor};
-    color: ${tableTextColor};
-    border-color: ${tableBorderColor};
-
-    :first-child:not(style),
-    style:first-child + * {
-      margin-top: 0;
-    }
-    :last-child {
-      border-bottom: 1px solid ${tableBorderColor};
-    }
-  }
-
-  // add a background above the first numbered column cell when sticky header is engaged
-  // which hides the table when scrolling
-  .${ClassName.TABLE_STICKY} {
-    .${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}:first-of-type::after {
-      content: '';
-      display: block;
-      height: 33px;
-      width: 100%;
-      background-color: ${"var(--ds-surface, white)"};
-      position: absolute;
-
-      // the extra pixel is accounting for borders
-      top: -34px;
-      left: -1px;
-    }
-  }
-
-  .${ClassName.WITH_CONTROLS} {
-    .${ClassName.CORNER_CONTROLS}, .${ClassName.ROW_CONTROLS} {
-      display: block;
-    }
-    .${ClassName.NUMBERED_COLUMN} {
-      padding-left: 0px;
-
-      .${ClassName.NUMBERED_COLUMN_BUTTON} {
-        border-left: 0 none;
-      }
-
-      .${ClassName.NUMBERED_COLUMN_BUTTON}.active {
-        border-bottom: 1px solid ${tableBorderSelectedColor};
-        border-color: ${tableBorderSelectedColor};
-        background-color: ${tableToolbarSelectedColor};
-        position: relative;
-        z-index: ${akEditorUnitZIndex};
-        color: ${`var(--ds-text-selected, ${N0})`};
-      }
-    }
-  }
-  :not(.${ClassName.IS_RESIZING}) .${ClassName.WITH_CONTROLS} {
-    .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}) {
-      cursor: pointer;
-    }
-    .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}):hover {
-      border-bottom: 1px solid ${tableBorderSelectedColor};
-      border-color: ${tableBorderSelectedColor};
-      background-color: ${tableToolbarSelectedColor};
-      position: relative;
-      z-index: ${akEditorUnitZIndex};
-      color: ${`var(--ds-text-selected, ${N0})`};
-    }
-    .${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-      background-color: ${tableToolbarDeleteColor};
-      border: 1px solid ${tableBorderDeleteColor};
-      border-left: 0;
-      color: ${`var(--ds-text-danger, ${R500})`};
-      position: relative;
-      z-index: ${akEditorUnitZIndex};
-    }
-  }
-
-  /* Table */
-  .${ClassName.TABLE_NODE_WRAPPER} > table {
-    table-layout: fixed;
-    white-space: normal;
-    border-top: none;
-    // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212
-    margin-right: -1px;
-    // Allows better positioning for the shadow sentinels - ED-16668
-    position: relative;
-
-    > tbody > tr {
-      white-space: pre-wrap;
-    }
-
-    .${ClassName.COLUMN_CONTROLS_DECORATIONS} + * {
-      margin-top: 0;
-    }
-
-    /*
+	}
+
+	.${ClassName.DRAG_ROW_CONTROLS} {
+		display: grid;
+		align-items: center;
+		position: absolute;
+		z-index: ${akEditorUnitZIndex};
+
+		.${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
+			position: absolute;
+			align-self: end;
+			height: 100%;
+			width: 18px;
+		}
+
+		.${ClassName.DRAG_ROW_FLOATING_INSERT_DOT} {
+			position: absolute;
+			bottom: -3px;
+			left: 2px;
+			background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
+			height: 4px;
+			width: 4px;
+			border-radius: 50%;
+			pointer-events: none;
+		}
+	}
+
+	.${ClassName.DRAG_COLUMN_CONTROLS} {
+		.${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
+			height: 24px;
+			position: absolute;
+			top: ${"var(--ds-space-negative-150, -12px)"};
+			z-index: ${resizeHandlerZIndex};
+		}
+
+		.${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER} {
+			position: absolute;
+			height: 24px;
+			width: 100%;
+		}
+
+		.${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT} {
+			background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
+			height: 4px;
+			width: 4px;
+			border-radius: 50%;
+			position: absolute;
+			right: -2px;
+		}
+	}
+
+	.${ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE} {
+		background: none;
+		border: none;
+		outline: none;
+		position: absolute;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+
+		:focus {
+			outline: none;
+		}
+	}
+
+	.${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
+		cursor: grab;
+		pointer-events: auto;
+
+		line-height: 0;
+		padding: 0;
+		border-radius: 6px;
+		width: max-content;
+		border: 2px solid ${`var(--ds-surface, ${N0})`};
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: transparent;
+		outline: none;
+
+		&.placeholder {
+			background-color: transparent;
+			border: 2px solid transparent;
+		}
+
+		&.${ClassName.DRAG_HANDLE_DISABLED} {
+			cursor: pointer;
+			& svg {
+				& > rect.${ClassName.DRAG_HANDLE_MINIMISED} {
+					fill: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
+				}
+				& > rect {
+					fill: ${"var(--ds-background-accent-gray-subtlest, #F4F5F7)"};
+				}
+				& > g > rect {
+					fill: ${"var(--ds-icon-disabled, #BFDBF847)"};
+				}
+			}
+		}
+
+		&:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
+			& svg {
+				rect {
+					fill: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
+				}
+				g {
+					fill: ${"var(--ds-icon-subtle, #626f86)"};
+				}
+			}
+
+			&:hover {
+				svg {
+					rect {
+						fill: ${"var(--ds-background-accent-blue-subtle, #579DFF)"};
+					}
+					g {
+						fill: ${"var(--ds-icon-inverse, #FFF)"};
+					}
+				}
+			}
+
+			&:active {
+				cursor: grabbing;
+			}
+
+			&.selected {
+				:focus {
+					outline: 2px solid ${"var(--ds-border-focused, #2684FF)"};
+					outline-offset: 1px;
+				}
+
+				&:active {
+					outline: none;
+				}
+
+				svg {
+					rect {
+						fill: ${"var(--ds-background-accent-blue-subtle, #579dff)"};
+					}
+					g {
+						fill: ${"var(--ds-icon-inverse, #fff)"};
+					}
+				}
+			}
+
+			&.danger {
+				svg {
+					rect {
+						fill: ${"var(--ds-background-accent-red-subtler-pressed, #F87462)"};
+					}
+					g {
+						fill: ${"var(--ds-border-inverse, #FFF)"};
+					}
+				}
+			}
+		}
+	}
+
+	${floatingColumnControls()}
+
+	:not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
+		${HeaderButtonHover()}
+		${HeaderButtonDanger()}
+	}
+
+	/* Numbered column */
+	.${ClassName.NUMBERED_COLUMN} {
+		position: relative;
+		float: right;
+		margin-left: ${akEditorTableToolbarSize}px;
+		top: ${(_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : akEditorTableToolbarSize}px;
+		width: ${akEditorTableNumberColumnWidth + 1}px;
+		box-sizing: border-box;
+	}
+
+	.${ClassName.NUMBERED_COLUMN_BUTTON} {
+		border: 1px solid ${tableBorderColor};
+		box-sizing: border-box;
+		margin-top: -1px;
+		padding-bottom: 2px;
+		padding: 10px 2px;
+		text-align: center;
+		font-size: ${relativeFontSizeToBase16(fontSize())};
+		background-color: ${tableHeaderCellBackgroundColor};
+		color: ${tableTextColor};
+		border-color: ${tableBorderColor};
+
+		:first-child:not(style),
+		style:first-child + * {
+			margin-top: 0;
+		}
+		:last-child {
+			border-bottom: 1px solid ${tableBorderColor};
+		}
+	}
+
+	// add a background above the first numbered column cell when sticky header is engaged
+	// which hides the table when scrolling
+	.${ClassName.TABLE_STICKY} {
+		.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}:first-of-type::after {
+			content: '';
+			display: block;
+			height: 33px;
+			width: 100%;
+			background-color: ${"var(--ds-surface, white)"};
+			position: absolute;
+
+			// the extra pixel is accounting for borders
+			top: -34px;
+			left: -1px;
+		}
+	}
+
+	.${ClassName.WITH_CONTROLS} {
+		.${ClassName.CORNER_CONTROLS}, .${ClassName.ROW_CONTROLS} {
+			display: block;
+		}
+		.${ClassName.NUMBERED_COLUMN} {
+			padding-left: 0px;
+
+			.${ClassName.NUMBERED_COLUMN_BUTTON} {
+				border-left: 0 none;
+			}
+
+			.${ClassName.NUMBERED_COLUMN_BUTTON}.active {
+				border-bottom: 1px solid ${tableBorderSelectedColor};
+				border-color: ${tableBorderSelectedColor};
+				background-color: ${tableToolbarSelectedColor};
+				position: relative;
+				z-index: ${akEditorUnitZIndex};
+				color: ${`var(--ds-text-selected, ${N0})`};
+			}
+		}
+	}
+	:not(.${ClassName.IS_RESIZING}) .${ClassName.WITH_CONTROLS} {
+		.${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}) {
+			cursor: pointer;
+		}
+		.${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}):hover {
+			border-bottom: 1px solid ${tableBorderSelectedColor};
+			border-color: ${tableBorderSelectedColor};
+			background-color: ${tableToolbarSelectedColor};
+			position: relative;
+			z-index: ${akEditorUnitZIndex};
+			color: ${`var(--ds-text-selected, ${N0})`};
+		}
+		.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
+			background-color: ${tableToolbarDeleteColor};
+			border: 1px solid ${tableBorderDeleteColor};
+			border-left: 0;
+			color: ${`var(--ds-text-danger, ${R500})`};
+			position: relative;
+			z-index: ${akEditorUnitZIndex};
+		}
+	}
+
+	/* Table */
+	.${ClassName.TABLE_NODE_WRAPPER} > table {
+		table-layout: fixed;
+		white-space: normal;
+		border-top: none;
+		// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212
+		margin-right: -1px;
+		// Allows better positioning for the shadow sentinels - ED-16668
+		position: relative;
+
+		> tbody > tr {
+			white-space: pre-wrap;
+		}
+
+		.${ClassName.COLUMN_CONTROLS_DECORATIONS} + * {
+			margin-top: 0;
+		}
+
+		/*
        * Headings have a top margin by default, but we don't want this on the
        * first heading within table header cells.
        *
        * This specifically sets margin-top for the first heading within a header
        * cell when center/right aligned.
        */
-    th.${ClassName.TABLE_HEADER_CELL} > .fabric-editor-block-mark {
-      > h1:first-of-type,
-      > h2:first-of-type,
-      > h3:first-of-type,
-      > h4:first-of-type,
-      > h5:first-of-type,
-      > h6:first-of-type {
-        margin-top: 0;
-      }
-    }
-
-    .${ClassName.SELECTED_CELL}, .${ClassName.HOVERED_CELL_IN_DANGER} {
-      position: relative;
-    }
-    /* Give selected cells a blue overlay */
-    .${ClassName.SELECTED_CELL}::after,
-      .${ClassName.HOVERED_CELL_IN_DANGER}::after {
-      z-index: ${akEditorSmallZIndex};
-      position: absolute;
-      content: '';
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      width: 100%;
-      pointer-events: none;
-    }
-    .${ClassName.SELECTED_CELL} {
-      border: 1px solid ${tableBorderSelectedColor};
-    }
-    .${ClassName.SELECTED_CELL}::after {
-      background: ${tableCellSelectedColor};
-      z-index: ${akEditorSmallZIndex};
-    }
-    th.${ClassName.HOVERED_CELL_IN_DANGER}::after,
-      td.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-      background: ${tableCellDeleteColor};
-      z-index: ${akEditorUnitZIndex * 100};
-    }
-    // ED-15246: Trello card is visible through a border of a table border
-    /* ED-19064: To fix when enable header column in the table,
+		th.${ClassName.TABLE_HEADER_CELL} > .fabric-editor-block-mark {
+			> h1:first-of-type,
+			> h2:first-of-type,
+			> h3:first-of-type,
+			> h4:first-of-type,
+			> h5:first-of-type,
+			> h6:first-of-type {
+				margin-top: 0;
+			}
+		}
+
+		.${ClassName.SELECTED_CELL}, .${ClassName.HOVERED_CELL_IN_DANGER} {
+			position: relative;
+		}
+		/* Give selected cells a blue overlay */
+		.${ClassName.SELECTED_CELL}::after, .${ClassName.HOVERED_CELL_IN_DANGER}::after {
+			z-index: ${akEditorSmallZIndex};
+			position: absolute;
+			content: '';
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			width: 100%;
+			pointer-events: none;
+		}
+		.${ClassName.SELECTED_CELL} {
+			border: 1px solid ${tableBorderSelectedColor};
+		}
+		.${ClassName.SELECTED_CELL}::after {
+			background: ${tableCellSelectedColor};
+			z-index: ${akEditorSmallZIndex};
+		}
+		th.${ClassName.HOVERED_CELL_IN_DANGER}::after, td.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+			background: ${tableCellDeleteColor};
+			z-index: ${akEditorUnitZIndex * 100};
+		}
+		// ED-15246: Trello card is visible through a border of a table border
+		/* ED-19064: To fix when enable header column in the table,
        and selection the header column, the right border is not tableBorderSelectedColor
        when deleting the header column, the right border is not tableToolbarDeleteColor */
-    td.${ClassName.HOVERED_CELL},
-      td.${ClassName.SELECTED_CELL},
-      th.${ClassName.TABLE_HEADER_CELL}.${ClassName.SELECTED_CELL},
-      th.${ClassName.TABLE_HEADER_CELL}.${ClassName.HOVERED_CELL} {
-      &::after {
-        height: 100%;
-        width: 100%;
-        border: 1px solid ${tableBorderSelectedColor};
-        content: '';
-        position: absolute;
-        left: -1px;
-        top: -1px;
-        bottom: 0;
-        z-index: ${akEditorSmallZIndex};
-        display: inline-block;
-        pointer-events: none;
-      }
-      &.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-        ${tableBorderStyles()};
-        z-index: ${akEditorUnitZIndex * 100};
-      }
-
-      &.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-        ${tableBorderStyles()};
-        z-index: ${akEditorUnitZIndex * 100};
-      }
-    }
-  }
-
-  // override for DnD controls
-  .${ClassName.DRAG_ROW_CONTROLS_WRAPPER} {
-    position: absolute;
-    margin-top: ${tableMarginTop}px;
-    left: -${tableToolbarSize + 1}px;
-    z-index: ${rowControlsZIndex + 4};
-  }
-
-  .${ClassName.ROW_CONTROLS_WRAPPER} {
-    position: absolute;
-    /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
-    top: ${tableMarginTop - cornerControlHeight + 1}px;
-    left: -${tableToolbarSize}px;
-  }
-
-  .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW},
-    .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
-    z-index: ${akEditorUnitZIndex};
-  }
-
-  .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
-    position: absolute;
-    top: ${tableMarginTop}px;
-  }
-
-  .${ClassName.TABLE_STICKY} .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
-    position: fixed;
-    /* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */
-    z-index: ${akEditorTableCellOnStickyHeaderZIndex - 4};
-  }
-
-  .${ClassName.TABLE_NODE_WRAPPER} {
-    padding-bottom: 0px;
-    /* fixes gap cursor height */
-    overflow: auto;
-    overflow-y: hidden;
-    position: relative;
-
-    > table[data-number-column='true'] {
-      width: calc(100% - 1px);
-    }
-  }
+		td.${ClassName.HOVERED_CELL},
+			td.${ClassName.SELECTED_CELL},
+			th.${ClassName.TABLE_HEADER_CELL}.${ClassName.SELECTED_CELL},
+			th.${ClassName.TABLE_HEADER_CELL}.${ClassName.HOVERED_CELL} {
+			&::after {
+				height: 100%;
+				width: 100%;
+				border: 1px solid ${tableBorderSelectedColor};
+				content: '';
+				position: absolute;
+				left: -1px;
+				top: -1px;
+				bottom: 0;
+				z-index: ${akEditorSmallZIndex};
+				display: inline-block;
+				pointer-events: none;
+			}
+			&.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+				${tableBorderStyles()};
+				z-index: ${akEditorUnitZIndex * 100};
+			}
+
+			&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+				${tableBorderStyles()};
+				z-index: ${akEditorUnitZIndex * 100};
+			}
+		}
+	}
+
+	// override for DnD controls
+	.${ClassName.DRAG_ROW_CONTROLS_WRAPPER} {
+		position: absolute;
+		margin-top: ${tableMarginTop}px;
+		left: -${tableToolbarSize + 1}px;
+		z-index: ${rowControlsZIndex + 4};
+	}
+
+	.${ClassName.ROW_CONTROLS_WRAPPER} {
+		position: absolute;
+		/* top of corner control is table margin top - corner control height + 1 pixel of table border. */
+		top: ${tableMarginTop - cornerControlHeight + 1}px;
+		left: -${tableToolbarSize}px;
+	}
+
+	.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW},
+		.${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
+		z-index: ${akEditorUnitZIndex};
+	}
+
+	.${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
+		position: absolute;
+		top: ${tableMarginTop}px;
+	}
+
+	.${ClassName.TABLE_STICKY} .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
+		position: fixed;
+		/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */
+		z-index: ${akEditorTableCellOnStickyHeaderZIndex - 4};
+	}
+
+	.${ClassName.TABLE_NODE_WRAPPER} {
+		padding-bottom: 0px;
+		/* fixes gap cursor height */
+		overflow: auto;
+		overflow-y: hidden;
+		position: relative;
+
+		${numberColumnFix()}
+	}
 `;
 };
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 export const tableStyles = props => css`
-  .ProseMirror {
-    ${baseTableStyles(props)}
-  }
-
-  .ProseMirror.${ClassName.IS_RESIZING} {
-    .${ClassName.TABLE_NODE_WRAPPER} {
-      overflow-x: auto;
-      ${scrollbarStyles};
-    }
-  }
-
-  .ProseMirror.${ClassName.RESIZE_CURSOR} {
-    cursor: col-resize;
-  }
-
-  ${shadowSentinelStyles}
+	.ProseMirror {
+		${baseTableStyles(props)}
+	}
+
+	.ProseMirror.${ClassName.IS_RESIZING} {
+		.${ClassName.TABLE_NODE_WRAPPER} {
+			overflow-x: auto;
+			${scrollbarStyles};
+		}
+	}
+
+	.ProseMirror.${ClassName.RESIZE_CURSOR} {
+		cursor: col-resize;
+	}
+
+	${shadowSentinelStyles}
 `;
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const tableFullPageEditorStyles = css`
-  .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
-    margin-left: 0;
-    // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212
-    margin-right: -1px;
-    width: 100%;
-  }
+	.ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
+		margin-left: 0;
+		// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212
+		margin-right: -1px;
+		width: 100%;
+	}
 `;
 export const tableCommentEditorStyles = css`
-  .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
-    margin-left: 0;
-    margin-right: 0;
-    ${scrollbarStyles};
-  }
+	.ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
+		margin-left: 0;
+		margin-right: 0;
+		${scrollbarStyles};
+	}
 `;