fix: Fix table picker overlay

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker-button.tsx

@@ -15,6 +15,7 @@ import type { OverlayInjectedProps } from 'react-bootstrap/Overlay'
 import { replaceSelection } from '../formatters/replace-selection'
 import { useChangeEditorContentCallback } from '../../../change-content-context/use-change-editor-content-callback'
 import { createMarkdownTable } from './create-markdown-table'
+import './table-picker.module.scss'
 
 enum PickerMode {
   INVISIBLE,
@@ -58,11 +59,10 @@ export const TablePickerButton: React.FC = () => {
   }, [])
 
   const createPopoverElement = useCallback<(props: OverlayInjectedProps) => React.ReactElement>(
-    ({ ref, ...popoverProps }) => (
+    (popoverProps) => (
       <TableSizePickerPopover
         onTableSizeSelected={onSizeSelect}
         onShowCustomSizeModal={onShowModal}
-        onRefUpdate={ref}
         {...popoverProps}
       />
     ),
@@ -84,7 +84,9 @@ export const TablePickerButton: React.FC = () => {
         target={button.current}
         onHide={onOverlayHide}
         show={pickerMode === PickerMode.GRID}
-        placement={'bottom'}
+        placement={'auto'}
+        flip={true}
+        offset={[0, 0]}
         rootClose={pickerMode === PickerMode.GRID}>
         {createPopoverElement}
       </Overlay>

src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.module.scss

@@ -4,19 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-
-.table-picker-container {
-  z-index: 1111;
-
-  .table-cell {
+.table-cell {
   margin: 1px;
   border-radius: 2px;
-  }
+  border: solid 1px var(--bs-dark);
+}
 
-  .table-container {
+.table-container {
   display: grid;
   grid-template-columns: repeat(10, 15px [col-start]);
   grid-template-rows: repeat(8, 15px [row-start]);
-  }
 }
-

src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { createNumberRangeArray } from '../../../../common/number-range/number-range'
 import { Button, Popover } from 'react-bootstrap'
 import { TableSizeText } from './table-size-text'
@@ -12,13 +12,11 @@ import { Trans, useTranslation } from 'react-i18next'
 import { cypressAttribute, cypressId } from '../../../../../utils/cypress-attribute'
 import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
 import type { PopoverProps } from 'react-bootstrap/Popover'
-import { useOnRefChange } from '../../../../markdown-renderer/hooks/use-on-ref-change'
 import styles from './table-picker.module.scss'
 
-export interface TableSizePickerPopoverProps extends Omit<PopoverProps, 'id'> {
+export interface TableSizePickerPopoverProps extends PopoverProps {
   onShowCustomSizeModal: () => void
   onTableSizeSelected: (rows: number, cols: number) => void
-  onRefUpdate: (newRef: HTMLDivElement | null) => void
 }
 
 export interface TableSize {
@@ -34,12 +32,8 @@ export interface TableSize {
  * @param onRefUpdate The callback, that will be called if ref was updated.
  * @param props Additional props given directly to the modal
  */
-export const TableSizePickerPopover: React.FC<TableSizePickerPopoverProps> = ({
-  onShowCustomSizeModal,
-  onTableSizeSelected,
-  onRefUpdate,
-  ...props
-}) => {
+export const TableSizePickerPopover = React.forwardRef<HTMLDivElement, TableSizePickerPopoverProps>(
+  ({ onShowCustomSizeModal, onTableSizeSelected, ...props }, ref) => {
     const { t } = useTranslation()
     const [tableSize, setTableSize] = useState<TableSize>()
 
@@ -75,16 +69,8 @@ export const TableSizePickerPopover: React.FC<TableSizePickerPopoverProps> = ({
       [onTableSizeSelected, onSizeHover, t, tableSize]
     )
 
-  const popoverRef = useRef<HTMLDivElement | null>(null)
-  useOnRefChange(popoverRef, (newRef) => onRefUpdate(newRef))
-
     return (
-    <Popover
-      {...props}
-      ref={popoverRef}
-      id={'table-picker'}
-      {...cypressId('table-size-picker-popover')}
-      className={`${styles['table-picker-container']} bg-light`}>
+      <Popover ref={ref} {...cypressId('table-size-picker-popover')} className={`bg-light`} {...props}>
         <Popover.Header>
           <TableSizeText tableSize={tableSize} />
         </Popover.Header>
@@ -102,4 +88,7 @@ export const TableSizePickerPopover: React.FC<TableSizePickerPopoverProps> = ({
         </Popover.Body>
       </Popover>
     )
-}
+  }
+)
+
+TableSizePickerPopover.displayName = 'TableSizePickerPopover'