There's no way to access table properties when table longer than the viewport

[oleq]

📝 Provide detailed reproduction steps (if any)

A follow-up of #6049 and #6112.

1. Create a table longer than the viewport.
2. Try to open the table (not cell) properties form.

✔️ Expected result

It should be visible somewhere and accessible.

❌ Actual result

It is pinned either to the top or to the bottom, way beyond the visible viewport and user's reach.

📃 Other details

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[oleq]

I managed to implement the following UX

using this short code:

diff --git a/packages/ckeditor5-table/src/ui/utils.js b/packages/ckeditor5-table/src/ui/utils.js
index 5e2a4e3bfb..32263b5093 100644
--- a/packages/ckeditor5-table/src/ui/utils.js
+++ b/packages/ckeditor5-table/src/ui/utils.js
@@ -16,6 +16,7 @@ import { isColor, isLength, isPercentage } from '@ckeditor/ckeditor5-engine/src/
 import { getTableWidgetAncestor } from '../utils';
 import { findAncestor } from '../commands/utils';
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';

 const DEFAULT_BALLOON_POSITIONS = BalloonPanelView.defaultPositions;
 const BALLOON_POSITIONS = [
@@ -26,6 +27,29 @@ const BALLOON_POSITIONS = [
          DEFAULT_BALLOON_POSITIONS.southArrowNorthWest,
          DEFAULT_BALLOON_POSITIONS.southArrowNorthEast
 ];
+const TABLE_PROPERTRIES_BALLOON_POSITIONS = [
+         ...BALLOON_POSITIONS,
+         ( tableRect, balloonRect ) => {
+                  const viewportRect = new Rect( global.window );
+                  const isUpperTableEdgeBeyondViewport = tableRect.top < viewportRect.top;
+                  const isLowerTableEdgeBeyondViewport = tableRect.bottom > viewportRect.bottom;
+                  let top, name;
+
+                  if ( isUpperTableEdgeBeyondViewport && !isLowerTableEdgeBeyondViewport ) {
+                           top = Math.min( tableRect.bottom, viewportRect.bottom ) - balloonRect.height - BalloonPanelView.arrowVerticalOffset;
+                           name = 'arrow_s';
+                  } else {
+                           top = BalloonPanelView.arrowVerticalOffset + Math.max( tableRect.top, 0 );
+                           name = 'arrow_n';
+                  }
+
+                  return {
+                           top,
+                           left: tableRect.left + tableRect.width / 2 - balloonRect.width / 2,
@@ -16,6 +16,7 @@ import { isColor, isLength, isPercentage } from '@ckeditor/ckeditor5-engine/src/
 import { getTableWidgetAncestor } from '../utils';
 import { findAncestor } from '../commands/utils';
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';

 const DEFAULT_BALLOON_POSITIONS = BalloonPanelView.defaultPositions;
 const BALLOON_POSITIONS = [
@@ -26,6 +27,29 @@ const BALLOON_POSITIONS = [
          DEFAULT_BALLOON_POSITIONS.southArrowNorthWest,
          DEFAULT_BALLOON_POSITIONS.southArrowNorthEast
 ];
+const TABLE_PROPERTRIES_BALLOON_POSITIONS = [
+         ...BALLOON_POSITIONS,
+         ( tableRect, balloonRect ) => {
+                  const viewportRect = new Rect( global.window );
+                  const isUpperTableEdgeBeyondViewport = tableRect.top < viewportRect.top;
+                  const isLowerTableEdgeBeyondViewport = tableRect.bottom > viewportRect.bottom;
+                  let top, name;
+
+                  if ( isUpperTableEdgeBeyondViewport && !isLowerTableEdgeBeyondViewport ) {
+                           top = Math.min( tableRect.bottom, viewportRect.bottom ) - balloonRect.height - BalloonPanelView.arrowVerticalOffset;
+                           name = 'arrow_s';
+                  } else {
+                           top = BalloonPanelView.arrowVerticalOffset + Math.max( tableRect.top, 0 );
+                           name = 'arrow_n';
+                  }
+
+                  return {
+                           top,
+                           left: tableRect.left + tableRect.width / 2 - balloonRect.width / 2,
+                           name
+                  };
+         }
+];

 const isEmpty = val => val === '';

@@ -69,7 +93,7 @@ export function getBalloonTablePositionData( editor ) {

          return {
                   target: editor.editing.view.domConverter.viewToDom( viewTable ),
-                  positions: BALLOON_POSITIONS
+                  positions: TABLE_PROPERTRIES_BALLOON_POSITIONS
          };
 }

Just to make things clear: using the current API, table tools have no way of knowing where the global editor toolbar is and how it behaves so without a massive refactoring there is no way to avoid the overlapping UIs. 

If you like this approach, I'd also adopt it for the table toolbar which UX suffers the same issue.