@atlaskit/renderer 111.1.1 → 111.1.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/renderer
 
+## 111.1.2
+
+### Patch Changes
+
+- [#147736](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147736)
+  [`b6868597a50cd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6868597a50cd) -
+  [ux] Fix table resizing when rendering with AK renderer in SSR
+- Updated dependencies
+
 ## 111.1.1
 
 ### Patch Changes

package/dist/cjs/react/nodes/table.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isTableResizingEnabled = exports.isStickyScrollbarEnabled = exports.default = exports.TableProcessor = exports.TableContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -16,6 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("@atlaskit/editor-common/types");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -327,32 +329,43 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       // Please consider changes below carefully to not negatively impact SSR
       // `renderWidth` cannot be depended on during SSR
       var isRenderWidthValid = !!renderWidth && renderWidth > 0;
+      var renderWidthCSS = rendererAppearance === 'full-page' ? "100cqw - ".concat(_style.FullPagePadding, "px * 2") : "100cqw";
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
         if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
-          return isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+          return [isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth, "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];
         } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
-          return isRenderWidthValid ? renderWidth : tableContainerWidth;
+          return [isRenderWidthValid ? renderWidth : tableContainerWidth, renderWidthCSS];
         } else {
           // custom width, or width mapped to breakpoint
           var _tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
-          return isRenderWidthValid ? Math.min(_tableContainerWidth, renderWidth) : _tableContainerWidth;
+          return [isRenderWidthValid ? Math.min(_tableContainerWidth, renderWidth) : _tableContainerWidth, "min(".concat(_tableContainerWidth, "px, ").concat(renderWidthCSS, ")")];
         }
       };
-      var tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
+      var _calcDefaultLayoutWid = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode),
+        _calcDefaultLayoutWid2 = (0, _slicedToArray2.default)(_calcDefaultLayoutWid, 2),
+        tableWidth = _calcDefaultLayoutWid2[0],
+        tableWidthCSS = _calcDefaultLayoutWid2[1];
 
       // Logic for table alignment in renderer
       var isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
       var fullWidthLineLength = isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+      var fullWidthLineLengthCSS = "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
       var commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
       var isCommentAppearanceAndTableAlignmentEnabled = (0, _appearance.isCommentAppearance)(rendererAppearance) && allowTableAlignment;
       var lineLength = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
-      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidth <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var lineLengthCSS = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
+      var fixTableSSRResizing = (0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing');
+      var tableWidthNew = fixTableSSRResizing ? (0, _nodeWidth.getTableContainerWidth)(tableNode) : tableWidth;
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var leftCSS;
       if (shouldCalculateLeftForAlignment) {
         left = (tableWidth - lineLength) / 2;
+        leftCSS = "(".concat(tableWidthCSS, " - ").concat(lineLengthCSS, ") / 2");
       }
-      if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidth > lineLengthFixedWidth) {
+      if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidthNew > lineLengthFixedWidth) {
         left = lineLengthFixedWidth / 2 - tableWidth / 2;
+        leftCSS = "".concat(lineLengthCSS, " / 2 - ").concat(tableWidthCSS, " / 2");
       }
       var children = _react.default.Children.toArray(this.props.children);
 
@@ -367,7 +380,14 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       } else {
         updatedLayout = layout;
       }
-      var finalTableContainerWidth = allowTableResizing ? tableWidth : 'inherit';
+      var finalTableContainerWidth = allowTableResizing ? tableWidthNew : 'inherit';
+
+      // We can only use CSS to determine the width when we have a known width in container.
+      // When appearance is full-page, full-width or comment we use CSS based width calculation.
+      // Otherwise it's fixed table width (customized width) or inherit.
+      if ((rendererAppearance === 'full-page' || rendererAppearance === 'full-width') && fixTableSSRResizing) {
+        finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
+      }
       if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {
         // If table alignment is disabled and table width is akEditorDefaultLayoutWidth = 760,
         // it is most likely a table created before "Support Table in Comments" FF was enabled
@@ -376,24 +396,36 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
 
         // !NOTE: it a table resized to 760 is copied from 'full-page' editor and pasted in comment editor
         // where (allowTableResizing && !allowTableAlignment), the table will loose 760px width.
-        finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== _editorSharedStyles.akEditorDefaultLayoutWidth ? tableWidth : 'inherit';
+        finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== _editorSharedStyles.akEditorDefaultLayoutWidth ? fixTableSSRResizing ? "calc(".concat(tableWidthCSS, ")") : tableWidth : 'inherit';
       }
       if (rendererAppearance === 'comment' && allowTableResizing && allowTableAlignment) {
         // If table alignment is enabled and layout is not 'align-start' or 'center', we are loading a table that was
         // created before "Support Table in Comments" FF was enabled. So the table should have the same width as renderer container
         // instead of 760 that was set on tableNode when the table had been published.
-        finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? tableWidth : 'inherit';
+        finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? fixTableSSRResizing ? "calc(".concat(tableWidthCSS, ")") : tableWidth : 'inherit';
+      }
+      var style;
+      if (fixTableSSRResizing) {
+        style = {
+          width: finalTableContainerWidth,
+          left: leftCSS ? "calc(".concat(leftCSS, ")") : undefined,
+          marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? "calc(-1 * (".concat(leftCSS, "))") : undefined
+        };
+      } else {
+        style = {
+          width: finalTableContainerWidth,
+          left: left,
+          marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
+        };
       }
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
         "data-layout": updatedLayout,
-        ref: this.props.handleRef,
-        style: {
-          width: finalTableContainerWidth,
-          left: left,
-          marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
-        }
+        ref: this.props.handleRef
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: style
       }, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
@@ -438,8 +470,10 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           height: "var(--ds-space-250, 20px)",
           // MAX_BROWSER_SCROLLBAR_HEIGHT
+          // Follow editor to hide by default so it does not show empty gap in SSR
+          // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/editor/editor-plugin-table/src/nodeviews/TableComponent.tsx#957
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          display: 'block',
+          display: fixTableSSRResizing ? 'none' : 'block',
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
           width: '100%'
         }

package/dist/cjs/ui/Renderer/breakout-ssr.js

@@ -38,8 +38,7 @@ function BreakoutSSRInlineScript() {
   });
 }
 function createBreakoutInlineScript(id) {
-  var shouldFixTableResizing = String(Boolean((0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing')));
-  return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(shouldFixTableResizing, ");\n  })(window);\n");
+  return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(Boolean((0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing')), ");\n  })(window);\n");
 }
 var breakoutInlineScriptContext = exports.breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n  breakoutConsts.FullPagePadding = ").concat(_style.FullPagePadding.toString(), ";\n");
 function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
@@ -80,35 +79,32 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
-          if (node.classList.contains('pm-table-container') && mode === 'custom') {
-            var isFullPage = renderer.classList.contains('is-full-page');
-            var rendererWidth = renderer.offsetWidth;
-            var effectiveWidth;
-            if (shouldFixTableResizing) {
-              // Logic from https://stash.atlassian.com/projects/atlassian/repos/atlassian-frontend-monorepo/browse/platform/packages/editor/renderer/src/react/nodes/table.tsx?at=d3af2ef54521ccf10e9b094996ad9528ec05c7e3#610
-              effectiveWidth = isFullPage ? rendererWidth - 2 * breakoutConsts.FullPagePadding : rendererWidth;
+
+          // When flag is on we are using CSS to calculate the table width thus don't need logic below to set the width and left.
+          if (!shouldFixTableResizing) {
+            if (node.classList.contains('pm-table-container') && mode === 'custom') {
+              var rendererWidth = renderer.offsetWidth;
+              var effectiveWidth = rendererWidth - breakoutConsts.padding;
+              width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
             } else {
-              effectiveWidth = rendererWidth - breakoutConsts.padding;
+              width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
             }
-            width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
-          } else {
-            width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
-          }
-          if (node.style.width === width) {
-            return;
-          }
-          node.style.width = width;
+            if (node.style.width === width) {
+              return;
+            }
+            node.style.width = width;
 
-          // Tables require some special logic, as they are not using common css transform approach,
-          // because it breaks with sticky headers. This logic is copied from a table node:
-          // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
-          if (node.classList.contains('pm-table-container') && !renderer.classList.contains('is-full-width')) {
-            var lineLength = breakoutConsts.calcLineLength();
-            var left = lineLength / 2 - parseInt(width) / 2;
-            if (left < 0 && parseInt(width) > lineLength) {
-              node.style.left = left + 'px';
-            } else {
-              node.style.left = '';
+            // Tables require some special logic, as they are not using common css transform approach,
+            // because it breaks with sticky headers. This logic is copied from a table node:
+            // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
+            if (node.classList.contains('pm-table-container') && !renderer.classList.contains('is-full-width')) {
+              var lineLength = breakoutConsts.calcLineLength();
+              var left = lineLength / 2 - parseInt(width) / 2;
+              if (left < 0 && parseInt(width) > lineLength) {
+                node.style.left = left + 'px';
+              } else {
+                node.style.left = '';
+              }
             }
           }
         });
@@ -124,16 +120,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
         applyMediaBreakout(item.target);
       }
     });
-
-    // Renderer is initially set to hidden until we figure out the proper width in packages/editor/editor-common/src/ui/WidthProvider/index.tsx
-    if (renderer.style.visibility === 'hidden') {
-      // Hiding until we get the correct width. But didn't remove them from the DOM so vertical scrollbar can still be correctly calculated.
-      renderer.style.visibility = '';
-      // Since we don't have a screen width to use as initial value.
-      // The width is set to a fix number. This will cause horizontal scrollbar to appear.
-      // Hide it until we have the correct width.
-      renderer.style.overflowX = '';
-    }
   });
   var applyMediaBreakout = function applyMediaBreakout(card) {
     // width was already set by another breakout script
@@ -164,9 +150,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
     childList: true,
     subtree: true
   });
-  if (shouldFixTableResizing) {
-    window.__SSR_BREAKOUT_OBSERVED = true;
-  }
 
   /**
    * Using window load event to unsubscribe from mutation observer, as at this stage document is fully rendered.

package/dist/cjs/ui/Renderer/index.js

@@ -65,7 +65,12 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "111.1.1";
+var packageVersion = "111.1.2";
+var setAsQueryContainerStyles = (0, _react2.css)({
+  containerName: 'ak-renderer-wrapper',
+  containerType: 'inline-size',
+  contain: 'layout style inline-size'
+});
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 
 /**
@@ -499,26 +504,26 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     // We must check if window is defined, if it isn't we are in a SSR environment
     // and we don't want to add the telepointer
     if (typeof window !== 'undefined' && addTelepointer && innerRef !== null && innerRef !== void 0 && innerRef.current) {
-      var renderer = innerRef.current.querySelector('.ak-renderer-document');
+      var _renderer = innerRef.current.querySelector('.ak-renderer-document');
       if (initialUpdate.current) {
-        var lastChild = renderer.lastChild;
+        var lastChild = _renderer.lastChild;
         lastChild && lastChild.appendChild(createTelepointer());
       }
       var mutateTelepointer = function mutateTelepointer(mutations) {
         mutations.forEach(function (mutation) {
           if (initialUpdate.current) {
-            var oldTelepointer = renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
+            var oldTelepointer = _renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
             if (oldTelepointer) {
               oldTelepointer.remove();
             }
-            var _lastChild = renderer.lastChild;
+            var _lastChild = _renderer.lastChild;
             _lastChild && _lastChild.appendChild(createTelepointer());
             initialUpdate.current = false;
           }
           if (mutation.type === 'characterData') {
             var parentNode = mutation.target.parentElement;
             if (parentNode) {
-              var _oldTelepointer = renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
+              var _oldTelepointer = _renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
               if (_oldTelepointer) {
                 _oldTelepointer.remove();
               }
@@ -539,7 +544,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
       };
     }
   }, [innerRef, addTelepointer]);
-  return (0, _react2.jsx)(_ui.WidthProvider
+  var renderer = (0, _react2.jsx)(_ui.WidthProvider
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "ak-renderer-wrapper is-".concat(appearance),
@@ -564,6 +569,17 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
       allowTableResizing: allowTableResizing
     })
   }, children))));
+
+  // We can only make the wrapper div query container when we have a known width.
+  // This is also required for SSR to work correctly. As WidthProvider/WithConsumer will not have the correct width during SSR.
+  //
+  // We are setting this wrapper div as query container conditionally.
+  // Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
+  // Otherwise when appearance is unspecified the renderer size is decided by the content.
+  // In this case we can't set the container-type = inline-size as it will collapse width to 0.
+  return (appearance === 'full-page' || appearance === 'full-width' || appearance === 'comment') && (0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing') ? (0, _react2.jsx)("div", {
+    css: setAsQueryContainerStyles
+  }, renderer) : renderer;
 });
 var RootRendererContext = /*#__PURE__*/_react.default.createContext(null);
 function RendererActionsInternalUpdater(_ref) {

package/dist/es2019/react/nodes/table.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -272,32 +273,40 @@ export class TableContainer extends React.Component {
     // Please consider changes below carefully to not negatively impact SSR
     // `renderWidth` cannot be depended on during SSR
     const isRenderWidthValid = !!renderWidth && renderWidth > 0;
+    const renderWidthCSS = rendererAppearance === 'full-page' ? `100cqw - ${FullPagePadding}px * 2` : `100cqw`;
     const calcDefaultLayoutWidthByAppearance = (rendererAppearance, tableNode) => {
       if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
-        return isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
+        return [isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth, `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`];
       } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
         const tableContainerWidth = getTableContainerWidth(tableNode);
-        return isRenderWidthValid ? renderWidth : tableContainerWidth;
+        return [isRenderWidthValid ? renderWidth : tableContainerWidth, renderWidthCSS];
       } else {
         // custom width, or width mapped to breakpoint
         const tableContainerWidth = getTableContainerWidth(tableNode);
-        return isRenderWidthValid ? Math.min(tableContainerWidth, renderWidth) : tableContainerWidth;
+        return [isRenderWidthValid ? Math.min(tableContainerWidth, renderWidth) : tableContainerWidth, `min(${tableContainerWidth}px, ${renderWidthCSS})`];
       }
     };
-    const tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
+    const [tableWidth, tableWidthCSS] = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
 
     // Logic for table alignment in renderer
     const isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
     const fullWidthLineLength = isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
+    const fullWidthLineLengthCSS = `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`;
     const commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
     const isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
-    let lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
-    const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidth <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+    const lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
+    const lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : `${lineLengthFixedWidth}px`;
+    const fixTableSSRResizing = fg('platform-fix-table-ssr-resizing');
+    const tableWidthNew = fixTableSSRResizing ? getTableContainerWidth(tableNode) : tableWidth;
+    const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+    let leftCSS;
     if (shouldCalculateLeftForAlignment) {
       left = (tableWidth - lineLength) / 2;
+      leftCSS = `(${tableWidthCSS} - ${lineLengthCSS}) / 2`;
     }
-    if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidth > lineLengthFixedWidth) {
+    if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidthNew > lineLengthFixedWidth) {
       left = lineLengthFixedWidth / 2 - tableWidth / 2;
+      leftCSS = `${lineLengthCSS} / 2 - ${tableWidthCSS} / 2`;
     }
     const children = React.Children.toArray(this.props.children);
 
@@ -312,7 +321,14 @@ export class TableContainer extends React.Component {
     } else {
       updatedLayout = layout;
     }
-    let finalTableContainerWidth = allowTableResizing ? tableWidth : 'inherit';
+    let finalTableContainerWidth = allowTableResizing ? tableWidthNew : 'inherit';
+
+    // We can only use CSS to determine the width when we have a known width in container.
+    // When appearance is full-page, full-width or comment we use CSS based width calculation.
+    // Otherwise it's fixed table width (customized width) or inherit.
+    if ((rendererAppearance === 'full-page' || rendererAppearance === 'full-width') && fixTableSSRResizing) {
+      finalTableContainerWidth = allowTableResizing ? `calc(${tableWidthCSS})` : 'inherit';
+    }
     if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {
       // If table alignment is disabled and table width is akEditorDefaultLayoutWidth = 760,
       // it is most likely a table created before "Support Table in Comments" FF was enabled
@@ -321,24 +337,36 @@ export class TableContainer extends React.Component {
 
       // !NOTE: it a table resized to 760 is copied from 'full-page' editor and pasted in comment editor
       // where (allowTableResizing && !allowTableAlignment), the table will loose 760px width.
-      finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== akEditorDefaultLayoutWidth ? tableWidth : 'inherit';
+      finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== akEditorDefaultLayoutWidth ? fixTableSSRResizing ? `calc(${tableWidthCSS})` : tableWidth : 'inherit';
     }
     if (rendererAppearance === 'comment' && allowTableResizing && allowTableAlignment) {
       // If table alignment is enabled and layout is not 'align-start' or 'center', we are loading a table that was
       // created before "Support Table in Comments" FF was enabled. So the table should have the same width as renderer container
       // instead of 760 that was set on tableNode when the table had been published.
-      finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? tableWidth : 'inherit';
+      finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? fixTableSSRResizing ? `calc(${tableWidthCSS})` : tableWidth : 'inherit';
+    }
+    let style;
+    if (fixTableSSRResizing) {
+      style = {
+        width: finalTableContainerWidth,
+        left: leftCSS ? `calc(${leftCSS})` : undefined,
+        marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? `calc(-1 * (${leftCSS}))` : undefined
+      };
+    } else {
+      style = {
+        width: finalTableContainerWidth,
+        left: left,
+        marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
+      };
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames || ''}`,
       "data-layout": updatedLayout,
-      ref: this.props.handleRef,
-      style: {
-        width: finalTableContainerWidth,
-        left: left,
-        marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
-      }
+      ref: this.props.handleRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: style
     }, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
@@ -383,8 +411,10 @@ export class TableContainer extends React.Component {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         height: "var(--ds-space-250, 20px)",
         // MAX_BROWSER_SCROLLBAR_HEIGHT
+        // Follow editor to hide by default so it does not show empty gap in SSR
+        // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/editor/editor-plugin-table/src/nodeviews/TableComponent.tsx#957
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        display: 'block',
+        display: fixTableSSRResizing ? 'none' : 'block',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         width: '100%'
       }

package/dist/es2019/ui/Renderer/breakout-ssr.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { breakoutConsts } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { FullPagePadding } from './style';
+
 /**
  * Inline Script that updates breakout node width on client side,
  * before main JavaScript bundle is ready.
@@ -29,11 +30,10 @@ export function BreakoutSSRInlineScript() {
   });
 }
 export function createBreakoutInlineScript(id) {
-  const shouldFixTableResizing = String(Boolean(fg('platform-fix-table-ssr-resizing')));
   return `
   (function(window){
     ${breakoutInlineScriptContext};
-    (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${shouldFixTableResizing});
+    (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${Boolean(fg('platform-fix-table-ssr-resizing'))});
   })(window);
 `;
 }
@@ -84,35 +84,32 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
-          if (node.classList.contains('pm-table-container') && mode === 'custom') {
-            const isFullPage = renderer.classList.contains('is-full-page');
-            const rendererWidth = renderer.offsetWidth;
-            let effectiveWidth;
-            if (shouldFixTableResizing) {
-              // Logic from https://stash.atlassian.com/projects/atlassian/repos/atlassian-frontend-monorepo/browse/platform/packages/editor/renderer/src/react/nodes/table.tsx?at=d3af2ef54521ccf10e9b094996ad9528ec05c7e3#610
-              effectiveWidth = isFullPage ? rendererWidth - 2 * breakoutConsts.FullPagePadding : rendererWidth;
+
+          // When flag is on we are using CSS to calculate the table width thus don't need logic below to set the width and left.
+          if (!shouldFixTableResizing) {
+            if (node.classList.contains('pm-table-container') && mode === 'custom') {
+              const rendererWidth = renderer.offsetWidth;
+              const effectiveWidth = rendererWidth - breakoutConsts.padding;
+              width = `${Math.min(parseInt(node.style.width), effectiveWidth)}px`;
             } else {
-              effectiveWidth = rendererWidth - breakoutConsts.padding;
+              width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
             }
-            width = `${Math.min(parseInt(node.style.width), effectiveWidth)}px`;
-          } else {
-            width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
-          }
-          if (node.style.width === width) {
-            return;
-          }
-          node.style.width = width;
+            if (node.style.width === width) {
+              return;
+            }
+            node.style.width = width;
 
-          // Tables require some special logic, as they are not using common css transform approach,
-          // because it breaks with sticky headers. This logic is copied from a table node:
-          // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
-          if (node.classList.contains('pm-table-container') && !renderer.classList.contains('is-full-width')) {
-            const lineLength = breakoutConsts.calcLineLength();
-            const left = lineLength / 2 - parseInt(width) / 2;
-            if (left < 0 && parseInt(width) > lineLength) {
-              node.style.left = left + 'px';
-            } else {
-              node.style.left = '';
+            // Tables require some special logic, as they are not using common css transform approach,
+            // because it breaks with sticky headers. This logic is copied from a table node:
+            // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
+            if (node.classList.contains('pm-table-container') && !renderer.classList.contains('is-full-width')) {
+              const lineLength = breakoutConsts.calcLineLength();
+              const left = lineLength / 2 - parseInt(width) / 2;
+              if (left < 0 && parseInt(width) > lineLength) {
+                node.style.left = left + 'px';
+              } else {
+                node.style.left = '';
+              }
             }
           }
         });
@@ -128,16 +125,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
         applyMediaBreakout(item.target);
       }
     });
-
-    // Renderer is initially set to hidden until we figure out the proper width in packages/editor/editor-common/src/ui/WidthProvider/index.tsx
-    if (renderer.style.visibility === 'hidden') {
-      // Hiding until we get the correct width. But didn't remove them from the DOM so vertical scrollbar can still be correctly calculated.
-      renderer.style.visibility = '';
-      // Since we don't have a screen width to use as initial value.
-      // The width is set to a fix number. This will cause horizontal scrollbar to appear.
-      // Hide it until we have the correct width.
-      renderer.style.overflowX = '';
-    }
   });
   const applyMediaBreakout = card => {
     // width was already set by another breakout script
@@ -166,9 +153,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
     childList: true,
     subtree: true
   });
-  if (shouldFixTableResizing) {
-    window.__SSR_BREAKOUT_OBSERVED = true;
-  }
 
   /**
    * Using window load event to unsubscribe from mutation observer, as at this stage document is fully rendered.

package/dist/es2019/ui/Renderer/index.js

@@ -6,7 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 import React, { Fragment, useContext, useLayoutEffect, useRef, PureComponent } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory, ProviderFactoryProvider } from '@atlaskit/editor-common/provider-factory';
@@ -45,7 +45,12 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "111.1.1";
+const packageVersion = "111.1.2";
+const setAsQueryContainerStyles = css({
+  containerName: 'ak-renderer-wrapper',
+  containerType: 'inline-size',
+  contain: 'layout style inline-size'
+});
 export const defaultNodeComponents = nodeToReact;
 
 /**
@@ -511,7 +516,7 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
       return () => observer.disconnect();
     }
   }, [innerRef, addTelepointer]);
-  return jsx(WidthProvider
+  const renderer = jsx(WidthProvider
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: `ak-renderer-wrapper is-${appearance}`,
@@ -536,6 +541,17 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
       allowTableResizing: allowTableResizing
     })
   }, children))));
+
+  // We can only make the wrapper div query container when we have a known width.
+  // This is also required for SSR to work correctly. As WidthProvider/WithConsumer will not have the correct width during SSR.
+  //
+  // We are setting this wrapper div as query container conditionally.
+  // Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
+  // Otherwise when appearance is unspecified the renderer size is decided by the content.
+  // In this case we can't set the container-type = inline-size as it will collapse width to 0.
+  return (appearance === 'full-page' || appearance === 'full-width' || appearance === 'comment') && fg('platform-fix-table-ssr-resizing') ? jsx("div", {
+    css: setAsQueryContainerStyles
+  }, renderer) : renderer;
 });
 const RootRendererContext = /*#__PURE__*/React.createContext(null);
 function RendererActionsInternalUpdater({

package/dist/esm/react/nodes/table.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -14,6 +15,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React from 'react';
 import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -320,32 +322,43 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       // Please consider changes below carefully to not negatively impact SSR
       // `renderWidth` cannot be depended on during SSR
       var isRenderWidthValid = !!renderWidth && renderWidth > 0;
+      var renderWidthCSS = rendererAppearance === 'full-page' ? "100cqw - ".concat(FullPagePadding, "px * 2") : "100cqw";
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
         if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
-          return isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
+          return [isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth, "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];
         } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           var tableContainerWidth = getTableContainerWidth(tableNode);
-          return isRenderWidthValid ? renderWidth : tableContainerWidth;
+          return [isRenderWidthValid ? renderWidth : tableContainerWidth, renderWidthCSS];
         } else {
           // custom width, or width mapped to breakpoint
           var _tableContainerWidth = getTableContainerWidth(tableNode);
-          return isRenderWidthValid ? Math.min(_tableContainerWidth, renderWidth) : _tableContainerWidth;
+          return [isRenderWidthValid ? Math.min(_tableContainerWidth, renderWidth) : _tableContainerWidth, "min(".concat(_tableContainerWidth, "px, ").concat(renderWidthCSS, ")")];
         }
       };
-      var tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
+      var _calcDefaultLayoutWid = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode),
+        _calcDefaultLayoutWid2 = _slicedToArray(_calcDefaultLayoutWid, 2),
+        tableWidth = _calcDefaultLayoutWid2[0],
+        tableWidthCSS = _calcDefaultLayoutWid2[1];
 
       // Logic for table alignment in renderer
       var isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
       var fullWidthLineLength = isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
+      var fullWidthLineLengthCSS = "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
       var commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
       var isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
       var lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
-      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidth <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
+      var fixTableSSRResizing = fg('platform-fix-table-ssr-resizing');
+      var tableWidthNew = fixTableSSRResizing ? getTableContainerWidth(tableNode) : tableWidth;
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var leftCSS;
       if (shouldCalculateLeftForAlignment) {
         left = (tableWidth - lineLength) / 2;
+        leftCSS = "(".concat(tableWidthCSS, " - ").concat(lineLengthCSS, ") / 2");
       }
-      if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidth > lineLengthFixedWidth) {
+      if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidthNew > lineLengthFixedWidth) {
         left = lineLengthFixedWidth / 2 - tableWidth / 2;
+        leftCSS = "".concat(lineLengthCSS, " / 2 - ").concat(tableWidthCSS, " / 2");
       }
       var children = React.Children.toArray(this.props.children);
 
@@ -360,7 +373,14 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       } else {
         updatedLayout = layout;
       }
-      var finalTableContainerWidth = allowTableResizing ? tableWidth : 'inherit';
+      var finalTableContainerWidth = allowTableResizing ? tableWidthNew : 'inherit';
+
+      // We can only use CSS to determine the width when we have a known width in container.
+      // When appearance is full-page, full-width or comment we use CSS based width calculation.
+      // Otherwise it's fixed table width (customized width) or inherit.
+      if ((rendererAppearance === 'full-page' || rendererAppearance === 'full-width') && fixTableSSRResizing) {
+        finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
+      }
       if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {
         // If table alignment is disabled and table width is akEditorDefaultLayoutWidth = 760,
         // it is most likely a table created before "Support Table in Comments" FF was enabled
@@ -369,24 +389,36 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
 
         // !NOTE: it a table resized to 760 is copied from 'full-page' editor and pasted in comment editor
         // where (allowTableResizing && !allowTableAlignment), the table will loose 760px width.
-        finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== akEditorDefaultLayoutWidth ? tableWidth : 'inherit';
+        finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== akEditorDefaultLayoutWidth ? fixTableSSRResizing ? "calc(".concat(tableWidthCSS, ")") : tableWidth : 'inherit';
       }
       if (rendererAppearance === 'comment' && allowTableResizing && allowTableAlignment) {
         // If table alignment is enabled and layout is not 'align-start' or 'center', we are loading a table that was
         // created before "Support Table in Comments" FF was enabled. So the table should have the same width as renderer container
         // instead of 760 that was set on tableNode when the table had been published.
-        finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? tableWidth : 'inherit';
+        finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? fixTableSSRResizing ? "calc(".concat(tableWidthCSS, ")") : tableWidth : 'inherit';
+      }
+      var style;
+      if (fixTableSSRResizing) {
+        style = {
+          width: finalTableContainerWidth,
+          left: leftCSS ? "calc(".concat(leftCSS, ")") : undefined,
+          marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? "calc(-1 * (".concat(leftCSS, "))") : undefined
+        };
+      } else {
+        style = {
+          width: finalTableContainerWidth,
+          left: left,
+          marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
+        };
       }
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
         "data-layout": updatedLayout,
-        ref: this.props.handleRef,
-        style: {
-          width: finalTableContainerWidth,
-          left: left,
-          marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
-        }
+        ref: this.props.handleRef
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: style
       }, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
@@ -431,8 +463,10 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           height: "var(--ds-space-250, 20px)",
           // MAX_BROWSER_SCROLLBAR_HEIGHT
+          // Follow editor to hide by default so it does not show empty gap in SSR
+          // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/editor/editor-plugin-table/src/nodeviews/TableComponent.tsx#957
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          display: 'block',
+          display: fixTableSSRResizing ? 'none' : 'block',
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
           width: '100%'
         }

package/dist/esm/ui/Renderer/breakout-ssr.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { breakoutConsts } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { FullPagePadding } from './style';
+
 /**
  * Inline Script that updates breakout node width on client side,
  * before main JavaScript bundle is ready.
@@ -29,8 +30,7 @@ export function BreakoutSSRInlineScript() {
   });
 }
 export function createBreakoutInlineScript(id) {
-  var shouldFixTableResizing = String(Boolean(fg('platform-fix-table-ssr-resizing')));
-  return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(shouldFixTableResizing, ");\n  })(window);\n");
+  return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(Boolean(fg('platform-fix-table-ssr-resizing')), ");\n  })(window);\n");
 }
 export var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n  breakoutConsts.FullPagePadding = ").concat(FullPagePadding.toString(), ";\n");
 function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
@@ -71,35 +71,32 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
-          if (node.classList.contains('pm-table-container') && mode === 'custom') {
-            var isFullPage = renderer.classList.contains('is-full-page');
-            var rendererWidth = renderer.offsetWidth;
-            var effectiveWidth;
-            if (shouldFixTableResizing) {
-              // Logic from https://stash.atlassian.com/projects/atlassian/repos/atlassian-frontend-monorepo/browse/platform/packages/editor/renderer/src/react/nodes/table.tsx?at=d3af2ef54521ccf10e9b094996ad9528ec05c7e3#610
-              effectiveWidth = isFullPage ? rendererWidth - 2 * breakoutConsts.FullPagePadding : rendererWidth;
+
+          // When flag is on we are using CSS to calculate the table width thus don't need logic below to set the width and left.
+          if (!shouldFixTableResizing) {
+            if (node.classList.contains('pm-table-container') && mode === 'custom') {
+              var rendererWidth = renderer.offsetWidth;
+              var effectiveWidth = rendererWidth - breakoutConsts.padding;
+              width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
             } else {
-              effectiveWidth = rendererWidth - breakoutConsts.padding;
+              width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
             }
-            width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
-          } else {
-            width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
-          }
-          if (node.style.width === width) {
-            return;
-          }
-          node.style.width = width;
+            if (node.style.width === width) {
+              return;
+            }
+            node.style.width = width;
 
-          // Tables require some special logic, as they are not using common css transform approach,
-          // because it breaks with sticky headers. This logic is copied from a table node:
-          // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
-          if (node.classList.contains('pm-table-container') && !renderer.classList.contains('is-full-width')) {
-            var lineLength = breakoutConsts.calcLineLength();
-            var left = lineLength / 2 - parseInt(width) / 2;
-            if (left < 0 && parseInt(width) > lineLength) {
-              node.style.left = left + 'px';
-            } else {
-              node.style.left = '';
+            // Tables require some special logic, as they are not using common css transform approach,
+            // because it breaks with sticky headers. This logic is copied from a table node:
+            // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
+            if (node.classList.contains('pm-table-container') && !renderer.classList.contains('is-full-width')) {
+              var lineLength = breakoutConsts.calcLineLength();
+              var left = lineLength / 2 - parseInt(width) / 2;
+              if (left < 0 && parseInt(width) > lineLength) {
+                node.style.left = left + 'px';
+              } else {
+                node.style.left = '';
+              }
             }
           }
         });
@@ -115,16 +112,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
         applyMediaBreakout(item.target);
       }
     });
-
-    // Renderer is initially set to hidden until we figure out the proper width in packages/editor/editor-common/src/ui/WidthProvider/index.tsx
-    if (renderer.style.visibility === 'hidden') {
-      // Hiding until we get the correct width. But didn't remove them from the DOM so vertical scrollbar can still be correctly calculated.
-      renderer.style.visibility = '';
-      // Since we don't have a screen width to use as initial value.
-      // The width is set to a fix number. This will cause horizontal scrollbar to appear.
-      // Hide it until we have the correct width.
-      renderer.style.overflowX = '';
-    }
   });
   var applyMediaBreakout = function applyMediaBreakout(card) {
     // width was already set by another breakout script
@@ -155,9 +142,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
     childList: true,
     subtree: true
   });
-  if (shouldFixTableResizing) {
-    window.__SSR_BREAKOUT_OBSERVED = true;
-  }
 
   /**
    * Using window load event to unsubscribe from mutation observer, as at this stage document is fully rendered.

package/dist/esm/ui/Renderer/index.js

@@ -16,7 +16,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  */
 import React, { Fragment, useContext, useLayoutEffect, useRef, PureComponent } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory, ProviderFactoryProvider } from '@atlaskit/editor-common/provider-factory';
@@ -55,7 +55,12 @@ import { nodeToReact } from '../../react/nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "111.1.1";
+var packageVersion = "111.1.2";
+var setAsQueryContainerStyles = css({
+  containerName: 'ak-renderer-wrapper',
+  containerType: 'inline-size',
+  contain: 'layout style inline-size'
+});
 export var defaultNodeComponents = nodeToReact;
 
 /**
@@ -489,26 +494,26 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     // We must check if window is defined, if it isn't we are in a SSR environment
     // and we don't want to add the telepointer
     if (typeof window !== 'undefined' && addTelepointer && innerRef !== null && innerRef !== void 0 && innerRef.current) {
-      var renderer = innerRef.current.querySelector('.ak-renderer-document');
+      var _renderer = innerRef.current.querySelector('.ak-renderer-document');
       if (initialUpdate.current) {
-        var lastChild = renderer.lastChild;
+        var lastChild = _renderer.lastChild;
         lastChild && lastChild.appendChild(createTelepointer());
       }
       var mutateTelepointer = function mutateTelepointer(mutations) {
         mutations.forEach(function (mutation) {
           if (initialUpdate.current) {
-            var oldTelepointer = renderer.querySelector("#".concat(TELEPOINTER_ID));
+            var oldTelepointer = _renderer.querySelector("#".concat(TELEPOINTER_ID));
             if (oldTelepointer) {
               oldTelepointer.remove();
             }
-            var _lastChild = renderer.lastChild;
+            var _lastChild = _renderer.lastChild;
             _lastChild && _lastChild.appendChild(createTelepointer());
             initialUpdate.current = false;
           }
           if (mutation.type === 'characterData') {
             var parentNode = mutation.target.parentElement;
             if (parentNode) {
-              var _oldTelepointer = renderer.querySelector("#".concat(TELEPOINTER_ID));
+              var _oldTelepointer = _renderer.querySelector("#".concat(TELEPOINTER_ID));
               if (_oldTelepointer) {
                 _oldTelepointer.remove();
               }
@@ -529,7 +534,7 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
       };
     }
   }, [innerRef, addTelepointer]);
-  return jsx(WidthProvider
+  var renderer = jsx(WidthProvider
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "ak-renderer-wrapper is-".concat(appearance),
@@ -554,6 +559,17 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
       allowTableResizing: allowTableResizing
     })
   }, children))));
+
+  // We can only make the wrapper div query container when we have a known width.
+  // This is also required for SSR to work correctly. As WidthProvider/WithConsumer will not have the correct width during SSR.
+  //
+  // We are setting this wrapper div as query container conditionally.
+  // Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
+  // Otherwise when appearance is unspecified the renderer size is decided by the content.
+  // In this case we can't set the container-type = inline-size as it will collapse width to 0.
+  return (appearance === 'full-page' || appearance === 'full-width' || appearance === 'comment') && fg('platform-fix-table-ssr-resizing') ? jsx("div", {
+    css: setAsQueryContainerStyles
+  }, renderer) : renderer;
 });
 var RootRendererContext = /*#__PURE__*/React.createContext(null);
 function RendererActionsInternalUpdater(_ref) {

package/dist/types/ui/Renderer/breakout-ssr.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-declare global {
-    interface Window {
-        __SSR_BREAKOUT_OBSERVED?: boolean;
-    }
-}
 /**
  * Inline Script that updates breakout node width on client side,
  * before main JavaScript bundle is ready.

package/dist/types-ts4.5/ui/Renderer/breakout-ssr.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-declare global {
-    interface Window {
-        __SSR_BREAKOUT_OBSERVED?: boolean;
-    }
-}
 /**
  * Inline Script that updates breakout node width on client side,
  * before main JavaScript bundle is ready.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "111.1.1",
+	"version": "111.1.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/editor-common": "^92.1.0",
+		"@atlaskit/editor-common": "^93.0.0",
 		"@atlaskit/editor-json-transformer": "^8.18.0",
 		"@atlaskit/editor-palette": "1.6.1",
 		"@atlaskit/editor-prosemirror": "6.0.0",
@@ -37,7 +37,7 @@
 		"@atlaskit/emoji": "^67.8.0",
 		"@atlaskit/feature-gate-js-client": "^4.19.0",
 		"@atlaskit/icon": "^22.20.0",
-		"@atlaskit/link-datasource": "^3.2.0",
+		"@atlaskit/link-datasource": "^3.3.0",
 		"@atlaskit/media-card": "^78.5.0",
 		"@atlaskit/media-client": "^28.0.0",
 		"@atlaskit/media-client-react": "^2.2.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tmp-editor-statsig": "*",
 		"@atlaskit/tokens": "^2.0.0",
-		"@atlaskit/tooltip": "^18.7.0",
+		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",