@atlaskit/editor-plugin-table 11.1.3 → 11.1.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 11.1.4
+
+### Patch Changes
+
+- [#185940](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185940)
+  [`456bee393c4d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/456bee393c4d3) -
+  [ux] When editor-area is less than 768px wide, we reduce editor gutters to 24px in Full-page
+  editor.
+- Updated dependencies
+
 ## 11.1.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableContainer.js

@@ -15,6 +15,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -158,6 +159,9 @@ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (
     editorViewModeState: editorViewModeState
   };
 });
+var getPadding = function getPadding(containerWidth) {
+  return containerWidth <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
+};
 var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_react.default.memo(function (_ref4) {
   var children = _ref4.children,
     className = _ref4.className,
@@ -242,6 +246,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
   var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
   var responsiveContainerWidth = 0;
   var resizeHandleSpacing = 12;
+  var padding = getPadding(containerWidth);
   // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
   // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
   // issues when viwport width is less than full width Editor's width. To detect avoid them
@@ -251,7 +256,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
     // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
     // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
-    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - padding * 2 - resizeHandleSpacing;
 
     // platform_editor_table_fw_numcol_overflow_fix:
     // lineLength is undefined on first paint → width: NaN → wrapper expands to page
@@ -265,7 +270,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     // 2) TODO: widen lineLength to `number|undefined` and remove this block.
     if ((0, _platformFeatureFlags.fg)('platform_editor_table_fw_numcol_overflow_fix')) {
       if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
-        responsiveContainerWidth = containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - resizeHandleSpacing;
+        responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
       }
     }
   } else if (isCommentEditor) {
@@ -275,7 +280,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
     // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
     // padding left = padding right = akEditorGutterPadding = 32
-    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 : containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - padding * 2 : containerWidth - padding * 2 - resizeHandleSpacing;
   }
   var width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {

package/dist/cjs/nodeviews/TableResizer.js

@@ -24,6 +24,7 @@ var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
 var _misc = require("../pm-plugins/commands/misc");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
@@ -76,6 +77,9 @@ var getResizerMinWidth = function getResizerMinWidth(node) {
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;
 };
+var getPadding = function getPadding(containerWidth) {
+  return containerWidth <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
+};
 
 /**
  * When guidelines are outside the viewport, filter them out, do not show
@@ -96,8 +100,9 @@ var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWi
     // For PTW we need to ensure that dynamic guideline never gets excluded: 1181 should be > width + guidelineVisibleAdjustment
     // guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
     var preserve_table_widths_adjustment = -1 * _guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET + 1;
+    var padding = getPadding(containerWidth);
     guidelineVisibleAdjustment = isFullWidthModeEnabled ? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
-    : -2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
+    : -2 * padding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
   }
   var width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
   return guidelines.filter(function (guideline) {
@@ -209,7 +214,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       keys = _ref2.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() : containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
+      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
       displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts2.TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
   }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, lineLength, isFullWidthModeEnabled]);
@@ -217,7 +222,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     return snappingEnabled ? {
       x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(_snapping.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
       // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
-      isFullWidthModeEnabled ? lineLength + 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() : containerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths
+      isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths
     } : undefined;
   }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
   var switchToCenterAlignment = (0, _react.useCallback)(function (pos, node, newWidth, state, dispatch) {
@@ -266,7 +271,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() : containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
+    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
@@ -288,7 +293,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     if (typeof pos !== 'number') {
       return;
     }
-    var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() : containerWidth;
+    var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth;
     var closestSnap = !isCommentEditor && (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(_snapping.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, _consts2.TABLE_HIGHLIGHT_GAP, _consts2.TABLE_HIGHLIGHT_TOLERANCE);
     closestSnap && updateActiveGuidelines(closestSnap);
 

package/dist/cjs/nodeviews/toDOM.js

@@ -12,6 +12,7 @@ var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
 var _tableContainerStyles = require("./table-container-styles");
@@ -21,7 +22,13 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
   var tableNode = config.isNestingSupported ? _adfSchema.tableWithNestedTable : _adfSchema.table;
   return _objectSpread(_objectSpread({}, tableNode), {}, {
     toDOM: function toDOM(node) {
-      var gutterPadding = (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
+      var gutterPadding = function gutterPadding() {
+        if ((0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+          return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
+        } else {
+          return "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2, "px");
+        }
+      };
       var alignmentStyle = Object.entries((0, _tableContainerStyles.getAlignmentStyle)(node.attrs.layout)).map(function (_ref) {
         var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
           k = _ref2[0],
@@ -78,14 +85,14 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: "width: min(calc(100cqw - ".concat(gutterPadding, "px), ").concat(tableWidthAttribute, ");")
+        style: "width: min(calc(100cqw - ".concat(gutterPadding(), "), ").concat(tableWidthAttribute, ");")
       }, ['div', {
         class: 'resizer-item display-handle',
         style: (0, _lazyNodeView.convertToInlineCss)({
           position: 'relative',
           userSelect: 'auto',
           boxSizing: 'border-box',
-          '--ak-editor-table-gutter-padding': "".concat(gutterPadding, "px"),
+          '--ak-editor-table-gutter-padding': "".concat(gutterPadding()),
           '--ak-editor-table-max-width': "".concat(_consts.TABLE_MAX_WIDTH, "px"),
           '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',

package/dist/cjs/pm-plugins/table-resizing/utils/misc.js

@@ -11,6 +11,7 @@ var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _colgroup = require("./colgroup");
 var _consts = require("./consts");
 // Translates named layouts in number values.
@@ -19,7 +20,11 @@ function getLayoutSize(tableLayout) {
   var options = arguments.length > 2 ? arguments[2] : undefined;
   var isFullWidthModeEnabled = options.isFullWidthModeEnabled;
   if (isFullWidthModeEnabled) {
-    return containerWidth ? Math.min(containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+    var padding = (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
+    if (containerWidth <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+      padding = _editorSharedStyles.akEditorGutterPaddingReduced;
+    }
+    return containerWidth ? Math.min(containerWidth - padding * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
   }
   var calculatedTableWidth = (0, _styles.calcTableWidth)(tableLayout, containerWidth, true);
   if (calculatedTableWidth !== 'inherit') {

package/dist/cjs/pm-plugins/utils/snapping.js

@@ -8,6 +8,7 @@ exports.findClosestSnap = exports.defaultTablePreserveSnappingWidths = exports.d
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var numberOfLanesInDefaultLayoutWidth = 12;
 var calculateSubSnappingWidths = function calculateSubSnappingWidths(totalLanes, totalWidth) {
   return new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map(function (v, i) {
@@ -18,6 +19,10 @@ var calculateDefaultSnappings = exports.calculateDefaultSnappings = function cal
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   return [].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, _editorSharedStyles.akEditorFullWidthLayoutWidth + lengthOffset]);
 };
+var getPadding = function getPadding(editorContainerWith) {
+  return editorContainerWith <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
+};
+
 // FF TablePreserve for calculateDefaultSnappings
 var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -26,7 +31,8 @@ var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreser
     innerGuidelines: false,
     breakoutPoints: false
   };
-  var dynamicFullWidthLine = editorContainerWith - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
+  var padding = getPadding(editorContainerWith);
+  var dynamicFullWidthLine = editorContainerWith - padding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - padding * 2;
   var guides = [dynamicFullWidthLine - lengthOffset];
   if (!exclude.breakoutPoints) {
     guides.unshift(_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset);
@@ -44,7 +50,8 @@ var defaultTablePreserveSnappingWidths = exports.defaultTablePreserveSnappingWid
     innerGuidelines: false,
     breakoutPoints: false
   };
-  return editorContainerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
+  var padding = getPadding(editorContainerWidth);
+  return editorContainerWidth - padding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 };
 
 /**

package/dist/es2019/nodeviews/TableContainer.js

@@ -4,8 +4,9 @@ import classNames from 'classnames';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -156,6 +157,9 @@ const useSharedState = sharedPluginStateHookMigratorFactory(api => {
     editorViewModeState
   };
 });
+const getPadding = containerWidth => {
+  return containerWidth <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+};
 export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   children,
   className,
@@ -239,6 +243,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   const tableWidth = getTableContainerWidth(node);
   let responsiveContainerWidth = 0;
   const resizeHandleSpacing = 12;
+  const padding = getPadding(containerWidth);
   // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
   // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
   // issues when viwport width is less than full width Editor's width. To detect avoid them
@@ -248,7 +253,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
     // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
     // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
-    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - padding * 2 - resizeHandleSpacing;
 
     // platform_editor_table_fw_numcol_overflow_fix:
     // lineLength is undefined on first paint → width: NaN → wrapper expands to page
@@ -262,7 +267,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     // 2) TODO: widen lineLength to `number|undefined` and remove this block.
     if (fg('platform_editor_table_fw_numcol_overflow_fix')) {
       if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
-        responsiveContainerWidth = containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+        responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
       }
     }
   } else if (isCommentEditor) {
@@ -272,7 +277,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
     // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
     // padding left = padding right = akEditorGutterPadding = 32
-    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - padding * 2 : containerWidth - padding * 2 - resizeHandleSpacing;
   }
   const width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {

package/dist/es2019/nodeviews/TableResizer.js

@@ -11,9 +11,10 @@ import { logException } from '@atlaskit/editor-common/monitoring';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
-import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { updateWidthToWidest } from '../pm-plugins/commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -63,6 +64,9 @@ const getResizerMinWidth = node => {
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;
 };
+const getPadding = containerWidth => {
+  return containerWidth <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+};
 
 /**
  * When guidelines are outside the viewport, filter them out, do not show
@@ -83,8 +87,9 @@ const getVisibleGuidelines = (guidelines, containerWidth, lineLength, isTableSca
     // For PTW we need to ensure that dynamic guideline never gets excluded: 1181 should be > width + guidelineVisibleAdjustment
     // guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
     const preserve_table_widths_adjustment = -1 * PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET + 1;
+    const padding = getPadding(containerWidth);
     guidelineVisibleAdjustment = isFullWidthModeEnabled ? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
-    : -2 * akEditorGutterPaddingDynamic() + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
+    : -2 * padding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
   }
   const width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
   return guidelines.filter(guideline => {
@@ -198,14 +203,14 @@ export const TableResizer = ({
   }) => {
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
+      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
   }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, lineLength, isFullWidthModeEnabled]);
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
     x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
     // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
-    isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
+    isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
   } : undefined, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
   const switchToCenterAlignment = useCallback((pos, node, newWidth, state, dispatch) => {
     if (shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, node, lineLength, newWidth) && isResizing.current) {
@@ -261,7 +266,7 @@ export const TableResizer = ({
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
+    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
@@ -283,7 +288,7 @@ export const TableResizer = ({
     if (typeof pos !== 'number') {
       return;
     }
-    const editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth;
+    const editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth;
     const closestSnap = !isCommentEditor && findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
     closestSnap && updateActiveGuidelines(closestSnap);
 

package/dist/es2019/nodeviews/toDOM.js

@@ -2,6 +2,7 @@ import kebabCase from 'lodash/kebabCase';
 import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 import { getAlignmentStyle } from './table-container-styles';
@@ -10,7 +11,13 @@ export const tableNodeSpecWithFixedToDOM = config => {
   return {
     ...tableNode,
     toDOM: node => {
-      const gutterPadding = akEditorGutterPaddingDynamic() * 2;
+      const gutterPadding = () => {
+        if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+          return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
+        } else {
+          return `${akEditorGutterPaddingDynamic() * 2}px`;
+        }
+      };
       const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`).join(';');
       const tableMinWidth = getResizerMinWidth(node);
       const attrs = {
@@ -62,14 +69,14 @@ export const tableNodeSpecWithFixedToDOM = config => {
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: `width: min(calc(100cqw - ${gutterPadding}px), ${tableWidthAttribute});`
+        style: `width: min(calc(100cqw - ${gutterPadding()}), ${tableWidthAttribute});`
       }, ['div', {
         class: 'resizer-item display-handle',
         style: convertToInlineCss({
           position: 'relative',
           userSelect: 'auto',
           boxSizing: 'border-box',
-          '--ak-editor-table-gutter-padding': `${gutterPadding}px`,
+          '--ak-editor-table-gutter-padding': `${gutterPadding()}`,
           '--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
           '--ak-editor-table-min-width': `${tableMinWidth}px`,
           minWidth: 'var(--ak-editor-table-min-width)',

package/dist/es2019/pm-plugins/table-resizing/utils/misc.js

@@ -1,7 +1,8 @@
 import { getParentNodeWidth, getTableContainerWidth, layoutToWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
-import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { hasTableBeenResized, hasTableColumnBeenResized } from './colgroup';
 import { MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
 
@@ -11,7 +12,11 @@ export function getLayoutSize(tableLayout, containerWidth = 0, options) {
     isFullWidthModeEnabled
   } = options;
   if (isFullWidthModeEnabled) {
-    return containerWidth ? Math.min(containerWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
+    let padding = akEditorGutterPaddingDynamic();
+    if (containerWidth <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+      padding = akEditorGutterPaddingReduced;
+    }
+    return containerWidth ? Math.min(containerWidth - padding * 2, akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
   }
   const calculatedTableWidth = calcTableWidth(tableLayout, containerWidth, true);
   if (calculatedTableWidth !== 'inherit') {

package/dist/es2019/pm-plugins/utils/snapping.js

@@ -1,14 +1,20 @@
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const numberOfLanesInDefaultLayoutWidth = 12;
 const calculateSubSnappingWidths = (totalLanes, totalWidth) => new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map((v, i) => v * (i + 1) * 2);
 export const calculateDefaultSnappings = (lengthOffset = 0) => [...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, akEditorFullWidthLayoutWidth + lengthOffset];
+const getPadding = editorContainerWith => {
+  return editorContainerWith <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+};
+
 // FF TablePreserve for calculateDefaultSnappings
 export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorContainerWith = akEditorFullWidthLayoutWidth, exclude = {
   innerGuidelines: false,
   breakoutPoints: false
 }) => {
-  const dynamicFullWidthLine = editorContainerWith - akEditorGutterPaddingDynamic() * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPaddingDynamic() * 2;
+  const padding = getPadding(editorContainerWith);
+  const dynamicFullWidthLine = editorContainerWith - padding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - padding * 2;
   const guides = [dynamicFullWidthLine - lengthOffset];
   if (!exclude.breakoutPoints) {
     guides.unshift(akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset);
@@ -25,7 +31,8 @@ export const defaultTablePreserveSnappingWidths = (lengthOffset, editorContainer
   innerGuidelines: false,
   breakoutPoints: false
 }) => {
-  return editorContainerWidth - akEditorGutterPaddingDynamic() * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
+  const padding = getPadding(editorContainerWidth);
+  return editorContainerWidth - padding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 };
 
 /**

package/dist/esm/nodeviews/TableContainer.js

@@ -5,8 +5,9 @@ import classNames from 'classnames';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -149,6 +150,9 @@ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
     editorViewModeState: editorViewModeState
   };
 });
+var getPadding = function getPadding(containerWidth) {
+  return containerWidth <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+};
 export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
   var children = _ref4.children,
     className = _ref4.className,
@@ -233,6 +237,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
   var tableWidth = getTableContainerWidth(node);
   var responsiveContainerWidth = 0;
   var resizeHandleSpacing = 12;
+  var padding = getPadding(containerWidth);
   // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
   // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
   // issues when viwport width is less than full width Editor's width. To detect avoid them
@@ -242,7 +247,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
     // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
     // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
-    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - padding * 2 - resizeHandleSpacing;
 
     // platform_editor_table_fw_numcol_overflow_fix:
     // lineLength is undefined on first paint → width: NaN → wrapper expands to page
@@ -256,7 +261,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     // 2) TODO: widen lineLength to `number|undefined` and remove this block.
     if (fg('platform_editor_table_fw_numcol_overflow_fix')) {
       if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
-        responsiveContainerWidth = containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+        responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
       }
     }
   } else if (isCommentEditor) {
@@ -266,7 +271,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
     // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
     // padding left = padding right = akEditorGutterPadding = 32
-    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - padding * 2 : containerWidth - padding * 2 - resizeHandleSpacing;
   }
   var width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {

package/dist/esm/nodeviews/TableResizer.js

@@ -15,9 +15,10 @@ import { logException } from '@atlaskit/editor-common/monitoring';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
-import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { updateWidthToWidest } from '../pm-plugins/commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -67,6 +68,9 @@ var getResizerMinWidth = function getResizerMinWidth(node) {
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;
 };
+var getPadding = function getPadding(containerWidth) {
+  return containerWidth <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+};
 
 /**
  * When guidelines are outside the viewport, filter them out, do not show
@@ -87,8 +91,9 @@ var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWi
     // For PTW we need to ensure that dynamic guideline never gets excluded: 1181 should be > width + guidelineVisibleAdjustment
     // guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
     var preserve_table_widths_adjustment = -1 * PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET + 1;
+    var padding = getPadding(containerWidth);
     guidelineVisibleAdjustment = isFullWidthModeEnabled ? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
-    : -2 * akEditorGutterPaddingDynamic() + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
+    : -2 * padding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
   }
   var width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
   return guidelines.filter(function (guideline) {
@@ -200,7 +205,7 @@ export var TableResizer = function TableResizer(_ref) {
       keys = _ref2.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
+      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
   }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, lineLength, isFullWidthModeEnabled]);
@@ -208,7 +213,7 @@ export var TableResizer = function TableResizer(_ref) {
     return snappingEnabled ? {
       x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
       // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
-      isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
+      isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
     } : undefined;
   }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
   var switchToCenterAlignment = useCallback(function (pos, node, newWidth, state, dispatch) {
@@ -257,7 +262,7 @@ export var TableResizer = function TableResizer(_ref) {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
+    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
@@ -279,7 +284,7 @@ export var TableResizer = function TableResizer(_ref) {
     if (typeof pos !== 'number') {
       return;
     }
-    var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth;
+    var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth;
     var closestSnap = !isCommentEditor && findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
     closestSnap && updateActiveGuidelines(closestSnap);
 

package/dist/esm/nodeviews/toDOM.js

@@ -7,6 +7,7 @@ import kebabCase from 'lodash/kebabCase';
 import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 import { getAlignmentStyle } from './table-container-styles';
@@ -14,7 +15,13 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
   var tableNode = config.isNestingSupported ? tableWithNestedTable : table;
   return _objectSpread(_objectSpread({}, tableNode), {}, {
     toDOM: function toDOM(node) {
-      var gutterPadding = akEditorGutterPaddingDynamic() * 2;
+      var gutterPadding = function gutterPadding() {
+        if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+          return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
+        } else {
+          return "".concat(akEditorGutterPaddingDynamic() * 2, "px");
+        }
+      };
       var alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(function (_ref) {
         var _ref2 = _slicedToArray(_ref, 2),
           k = _ref2[0],
@@ -71,14 +78,14 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: "width: min(calc(100cqw - ".concat(gutterPadding, "px), ").concat(tableWidthAttribute, ");")
+        style: "width: min(calc(100cqw - ".concat(gutterPadding(), "), ").concat(tableWidthAttribute, ");")
       }, ['div', {
         class: 'resizer-item display-handle',
         style: convertToInlineCss({
           position: 'relative',
           userSelect: 'auto',
           boxSizing: 'border-box',
-          '--ak-editor-table-gutter-padding': "".concat(gutterPadding, "px"),
+          '--ak-editor-table-gutter-padding': "".concat(gutterPadding()),
           '--ak-editor-table-max-width': "".concat(TABLE_MAX_WIDTH, "px"),
           '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',

package/dist/esm/pm-plugins/table-resizing/utils/misc.js

@@ -1,7 +1,8 @@
 import { getParentNodeWidth, getTableContainerWidth, layoutToWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
-import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { hasTableBeenResized, hasTableColumnBeenResized } from './colgroup';
 import { MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
 
@@ -11,7 +12,11 @@ export function getLayoutSize(tableLayout) {
   var options = arguments.length > 2 ? arguments[2] : undefined;
   var isFullWidthModeEnabled = options.isFullWidthModeEnabled;
   if (isFullWidthModeEnabled) {
-    return containerWidth ? Math.min(containerWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
+    var padding = akEditorGutterPaddingDynamic();
+    if (containerWidth <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+      padding = akEditorGutterPaddingReduced;
+    }
+    return containerWidth ? Math.min(containerWidth - padding * 2, akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
   }
   var calculatedTableWidth = calcTableWidth(tableLayout, containerWidth, true);
   if (calculatedTableWidth !== 'inherit') {

package/dist/esm/pm-plugins/utils/snapping.js

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var numberOfLanesInDefaultLayoutWidth = 12;
 var calculateSubSnappingWidths = function calculateSubSnappingWidths(totalLanes, totalWidth) {
   return new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map(function (v, i) {
@@ -11,6 +12,10 @@ export var calculateDefaultSnappings = function calculateDefaultSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   return [].concat(_toConsumableArray(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset)), [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, akEditorFullWidthLayoutWidth + lengthOffset]);
 };
+var getPadding = function getPadding(editorContainerWith) {
+  return editorContainerWith <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+};
+
 // FF TablePreserve for calculateDefaultSnappings
 export var calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -19,7 +24,8 @@ export var calculateDefaultTablePreserveSnappings = function calculateDefaultTab
     innerGuidelines: false,
     breakoutPoints: false
   };
-  var dynamicFullWidthLine = editorContainerWith - akEditorGutterPaddingDynamic() * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPaddingDynamic() * 2;
+  var padding = getPadding(editorContainerWith);
+  var dynamicFullWidthLine = editorContainerWith - padding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - padding * 2;
   var guides = [dynamicFullWidthLine - lengthOffset];
   if (!exclude.breakoutPoints) {
     guides.unshift(akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset);
@@ -37,7 +43,8 @@ export var defaultTablePreserveSnappingWidths = function defaultTablePreserveSna
     innerGuidelines: false,
     breakoutPoints: false
   };
-  return editorContainerWidth - akEditorGutterPaddingDynamic() * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
+  var padding = getPadding(editorContainerWidth);
+  return editorContainerWidth - padding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "11.1.3",
+	"version": "11.1.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
 		"@atlaskit/editor-plugin-selection": "^3.0.0",
 		"@atlaskit/editor-plugin-width": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.4.0",
+		"@atlaskit/editor-shared-styles": "^3.5.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/icon": "^27.3.0",
 		"@atlaskit/menu": "^8.0.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/react-ufo": "^4.0.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.7.0",
+		"@atlaskit/tmp-editor-statsig": "^9.8.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^5.5.0",
 		"@atlaskit/tooltip": "^20.3.0",

package/src/nodeviews/TableContainer.tsx

@@ -22,9 +22,12 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
 	akEditorDefaultLayoutWidth,
 	akEditorGutterPaddingDynamic,
+	akEditorGutterPaddingReduced,
+	akEditorFullPageNarrowBreakout,
 	akEditorMobileBreakoutPoint,
 } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
@@ -252,6 +255,13 @@ const useSharedState = sharedPluginStateHookMigratorFactory(
 	},
 );
 
+const getPadding = (containerWidth: number) => {
+	return containerWidth <= akEditorFullPageNarrowBreakout &&
+		expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)
+		? akEditorGutterPaddingReduced
+		: akEditorGutterPaddingDynamic();
+};
+
 export const ResizableTableContainer = React.memo(
 	({
 		children,
@@ -355,6 +365,7 @@ export const ResizableTableContainer = React.memo(
 
 		let responsiveContainerWidth = 0;
 		const resizeHandleSpacing = 12;
+		const padding = getPadding(containerWidth);
 		// When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
 		// updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
 		// issues when viwport width is less than full width Editor's width. To detect avoid them
@@ -366,7 +377,7 @@ export const ResizableTableContainer = React.memo(
 			// scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
 			responsiveContainerWidth = isTableScalingEnabled
 				? lineLength
-				: containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+				: containerWidth - padding * 2 - resizeHandleSpacing;
 
 			// platform_editor_table_fw_numcol_overflow_fix:
 			// lineLength is undefined on first paint → width: NaN → wrapper expands to page
@@ -380,8 +391,7 @@ export const ResizableTableContainer = React.memo(
 			// 2) TODO: widen lineLength to `number|undefined` and remove this block.
 			if (fg('platform_editor_table_fw_numcol_overflow_fix')) {
 				if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
-					responsiveContainerWidth =
-						containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+					responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
 				}
 			}
 		} else if (isCommentEditor) {
@@ -392,8 +402,8 @@ export const ResizableTableContainer = React.memo(
 			// a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
 			// padding left = padding right = akEditorGutterPadding = 32
 			responsiveContainerWidth = isTableScalingEnabled
-				? containerWidth - akEditorGutterPaddingDynamic() * 2
-				: containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+				? containerWidth - padding * 2
+				: containerWidth - padding * 2 - resizeHandleSpacing;
 		}
 		const width =
 			!node.attrs.width && isCommentEditor

package/src/nodeviews/TableResizer.tsx

@@ -28,9 +28,14 @@ import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import {
+	akEditorGutterPaddingDynamic,
+	akEditorGutterPaddingReduced,
+	akEditorFullPageNarrowBreakout,
+} from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { token } from '@atlaskit/tokens';
 
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
@@ -143,6 +148,13 @@ const getResizerMinWidth = (node: PMNode) => {
 	return minColumnWidth + 1;
 };
 
+const getPadding = (containerWidth: number) => {
+	return containerWidth <= akEditorFullPageNarrowBreakout &&
+		expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)
+		? akEditorGutterPaddingReduced
+		: akEditorGutterPaddingDynamic();
+};
+
 /**
  * When guidelines are outside the viewport, filter them out, do not show
  * So the guideline container won't make the fabric-editor-popup-scroll-parent overflow
@@ -168,10 +180,10 @@ const getVisibleGuidelines = (
 		// For PTW we need to ensure that dynamic guideline never gets excluded: 1181 should be > width + guidelineVisibleAdjustment
 		// guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
 		const preserve_table_widths_adjustment = -1 * PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET + 1;
-
+		const padding = getPadding(containerWidth);
 		guidelineVisibleAdjustment = isFullWidthModeEnabled
 			? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
-			: -2 * akEditorGutterPaddingDynamic() + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
+			: -2 * padding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
 	}
 	const width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
 
@@ -296,12 +308,13 @@ export const TableResizer = ({
 		({ gap, keys }: { gap: number; keys: string[] }) => {
 			if (gap !== currentGap.current) {
 				currentGap.current = gap;
+
 				const visibleGuidelines = getVisibleGuidelines(
 					isTableScalingEnabled
 						? defaultGuidelinesForPreserveTable(
 								PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET,
 								isFullWidthModeEnabled
-									? lineLength + 2 * akEditorGutterPaddingDynamic()
+									? lineLength + 2 * getPadding(containerWidth)
 									: containerWidth,
 								excludeGuidelineConfig,
 							)
@@ -332,7 +345,7 @@ export const TableResizer = ({
 							? defaultTablePreserveSnappingWidths(
 									PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 									isFullWidthModeEnabled
-										? lineLength + 2 * akEditorGutterPaddingDynamic()
+										? lineLength + 2 * getPadding(containerWidth)
 										: containerWidth,
 									excludeGuidelineConfig,
 								)
@@ -428,9 +441,7 @@ export const TableResizer = ({
 			isTableScalingEnabled
 				? defaultGuidelinesForPreserveTable(
 						PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET,
-						isFullWidthModeEnabled
-							? lineLength + 2 * akEditorGutterPaddingDynamic()
-							: containerWidth,
+						isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth,
 						excludeGuidelineConfig,
 					)
 				: defaultGuidelines,
@@ -476,7 +487,7 @@ export const TableResizer = ({
 			}
 
 			const editorContainerWidth = isFullWidthModeEnabled
-				? lineLength + 2 * akEditorGutterPaddingDynamic()
+				? lineLength + 2 * getPadding(containerWidth)
 				: containerWidth;
 
 			const closestSnap =

package/src/nodeviews/toDOM.ts

@@ -5,6 +5,7 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { DOMOutputSpec, NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
@@ -25,7 +26,13 @@ export const tableNodeSpecWithFixedToDOM = (
 	return {
 		...tableNode,
 		toDOM: (node: PMNode): DOMOutputSpec => {
-			const gutterPadding = akEditorGutterPaddingDynamic() * 2;
+			const gutterPadding = () => {
+				if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+					return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
+				} else {
+					return `${akEditorGutterPaddingDynamic() * 2}px`;
+				}
+			};
 
 			const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout))
 				.map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`)
@@ -129,7 +136,7 @@ export const tableNodeSpecWithFixedToDOM = (
 					'div',
 					{
 						class: 'pm-table-resizer-container',
-						style: `width: min(calc(100cqw - ${gutterPadding}px), ${tableWidthAttribute});`,
+						style: `width: min(calc(100cqw - ${gutterPadding()}), ${tableWidthAttribute});`,
 					},
 					[
 						'div',
@@ -139,7 +146,7 @@ export const tableNodeSpecWithFixedToDOM = (
 								position: 'relative',
 								userSelect: 'auto',
 								boxSizing: 'border-box',
-								'--ak-editor-table-gutter-padding': `${gutterPadding}px`,
+								'--ak-editor-table-gutter-padding': `${gutterPadding()}`,
 								'--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
 								'--ak-editor-table-min-width': `${tableMinWidth}px`,
 								minWidth: 'var(--ak-editor-table-min-width)',

package/src/pm-plugins/table-resizing/utils/misc.ts

@@ -14,7 +14,10 @@ import {
 	akEditorFullWidthLayoutWidth,
 	akEditorGutterPaddingDynamic,
 	akEditorTableNumberColumnWidth,
+	akEditorGutterPaddingReduced,
+	akEditorFullPageNarrowBreakout,
 } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 import type { TableOptions } from '../../../nodeviews/types';
 
@@ -33,8 +36,16 @@ export function getLayoutSize(
 	const { isFullWidthModeEnabled } = options;
 
 	if (isFullWidthModeEnabled) {
+		let padding: number = akEditorGutterPaddingDynamic();
+		if (
+			containerWidth <= akEditorFullPageNarrowBreakout &&
+			expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)
+		) {
+			padding = akEditorGutterPaddingReduced;
+		}
+
 		return containerWidth
-			? Math.min(containerWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth)
+			? Math.min(containerWidth - padding * 2, akEditorFullWidthLayoutWidth)
 			: akEditorFullWidthLayoutWidth;
 	}
 

package/src/pm-plugins/utils/snapping.ts

@@ -5,7 +5,10 @@ import {
 	akEditorDefaultLayoutWidth,
 	akEditorFullWidthLayoutWidth,
 	akEditorGutterPaddingDynamic,
+	akEditorGutterPaddingReduced,
+	akEditorFullPageNarrowBreakout,
 } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 const numberOfLanesInDefaultLayoutWidth = 12;
 
@@ -29,6 +32,13 @@ export type GuidelineExcludeConfig = {
 	breakoutPoints: boolean;
 };
 
+const getPadding = (editorContainerWith: number) => {
+	return editorContainerWith <= akEditorFullPageNarrowBreakout &&
+		expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)
+		? akEditorGutterPaddingReduced
+		: akEditorGutterPaddingDynamic();
+};
+
 // FF TablePreserve for calculateDefaultSnappings
 export const calculateDefaultTablePreserveSnappings = (
 	lengthOffset = 0,
@@ -38,10 +48,11 @@ export const calculateDefaultTablePreserveSnappings = (
 		breakoutPoints: false,
 	},
 ) => {
+	const padding = getPadding(editorContainerWith);
 	const dynamicFullWidthLine =
-		editorContainerWith - akEditorGutterPaddingDynamic() * 2 >= akEditorFullWidthLayoutWidth
+		editorContainerWith - padding * 2 >= akEditorFullWidthLayoutWidth
 			? akEditorFullWidthLayoutWidth
-			: editorContainerWith - akEditorGutterPaddingDynamic() * 2;
+			: editorContainerWith - padding * 2;
 
 	const guides = [dynamicFullWidthLine - lengthOffset];
 
@@ -77,7 +88,8 @@ export const defaultTablePreserveSnappingWidths = (
 		breakoutPoints: false,
 	},
 ) => {
-	return editorContainerWidth - akEditorGutterPaddingDynamic() * 2 > akEditorFullWidthLayoutWidth
+	const padding = getPadding(editorContainerWidth);
+	return editorContainerWidth - padding * 2 > akEditorFullWidthLayoutWidth
 		? calculateDefaultSnappings()
 		: calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 };