Merge pull request #21477 from overleaf/ii-bs5-table-generator

[web] BS5 table generator GitOrigin-RevId: 3fe10c05fa36f026c47ff4f54b15f5d76f7c509e
2024-11-14 20:40:17 -05:00 · 2024-11-01 14:10:50 +02:00 · 2024-11-01 14:10:50 +02:00 · 1033e73844
commit 1033e73844
parent ba7d11d854
12 changed files with 238 additions and 224 deletions
--- a/services/web/frontend/js/features/source-editor/components/table-generator/column-size-indicator.tsx
+++ b/services/web/frontend/js/features/source-editor/components/table-generator/column-size-indicator.tsx
@ -1,9 +1,8 @@
 import MaterialIcon from '@/shared/components/material-icon'
 import { WidthSelection } from './toolbar/column-width-modal/column-width'
 import { useMemo } from 'react'
-import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import Tooltip from '@/shared/components/tooltip'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import { useSelectionContext } from './contexts/selection-context'

 function roundIfNeeded(width: number) {
@ -32,7 +31,7 @@ export const ColumnSizeIndicator = ({
  }

  return (
-    <Tooltip
+    <OLTooltip
      id="tooltip-column-width-button"
      description={
        unit === 'custom'
@ -43,9 +42,8 @@ export const ColumnSizeIndicator = ({
      }
      overlayProps={{ delay: 0, placement: 'bottom' }}
    >
-      <Button
-        bsStyle={null}
-        className="table-generator-column-indicator-button"
+      <button
+        className="btn table-generator-column-indicator-button"
        onClick={onClick}
      >
        <MaterialIcon
@ -55,7 +53,7 @@ export const ColumnSizeIndicator = ({
        <span className="table-generator-column-indicator-label">
          {formattedWidth}
        </span>
-      </Button>
-    </Tooltip>
+      </button>
+    </OLTooltip>
  )
 }
--- a/services/web/frontend/js/features/source-editor/components/table-generator/help-modal.tsx
+++ b/services/web/frontend/js/features/source-editor/components/table-generator/help-modal.tsx
@ -1,5 +1,10 @@
-import { Button, Modal } from 'react-bootstrap'
-import AccessibleModal from '../../../../shared/components/accessible-modal'
+import OLModal, {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
+import OLButton from '@/features/ui/components/ol/ol-button'
 import { useTabularContext } from './contexts/tabular-context'
 import { Trans, useTranslation } from 'react-i18next'

@ -9,15 +14,15 @@ export const TableGeneratorHelpModal = () => {
  if (!helpShown) return null

  return (
-    <AccessibleModal
+    <OLModal
      show={helpShown}
      onHide={hideHelp}
      className="table-generator-help-modal"
    >
-      <Modal.Header closeButton>
-        <Modal.Title>{t('help')}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
+      <OLModalHeader closeButton>
+        <OLModalTitle>{t('help')}</OLModalTitle>
+      </OLModalHeader>
+      <OLModalBody>
        <p>
          <Trans
            i18nKey="this_tool_helps_you_insert_simple_tables_into_your_project_without_writing_latex_code_give_feedback"
@ -83,10 +88,12 @@ export const TableGeneratorHelpModal = () => {
            ]}
          />
        </p>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button onClick={hideHelp}>{t('close')}</Button>
-      </Modal.Footer>
-    </AccessibleModal>
+      </OLModalBody>
+      <OLModalFooter>
+        <OLButton variant="secondary" onClick={hideHelp}>
+          {t('close')}
+        </OLButton>
+      </OLModalFooter>
+    </OLModal>
  )
 }
--- a/services/web/frontend/js/features/source-editor/components/table-generator/tabular.tsx
+++ b/services/web/frontend/js/features/source-editor/components/table-generator/tabular.tsx
@ -14,7 +14,6 @@ import {
 } from './contexts/editing-context'
 import { EditorView } from '@codemirror/view'
 import { ErrorBoundary } from 'react-error-boundary'
-import { Alert, Button } from 'react-bootstrap'
 import { EditorSelection } from '@codemirror/state'
 import {
  CodeMirrorViewContext,
@ -22,13 +21,14 @@ import {
 } from '../codemirror-context'
 import { TableProvider } from './contexts/table-context'
 import { TabularProvider, useTabularContext } from './contexts/tabular-context'
-import Icon from '../../../../shared/components/icon'
 import { BorderTheme } from './toolbar/commands'
 import { TableGeneratorHelpModal } from './help-modal'
 import { SplitTestProvider } from '../../../../shared/context/split-test-context'
 import { useTranslation } from 'react-i18next'
 import { ColumnWidthModal } from './toolbar/column-width-modal/modal'
 import { WidthSelection } from './toolbar/column-width-modal/column-width'
+import Notification from '@/shared/components/notification'
+import OLButton from '@/features/ui/components/ol/ol-button'

 export type ColumnDefinition = {
  alignment: 'left' | 'center' | 'right' | 'paragraph'
@ -198,35 +198,40 @@ export const TableRenderingError: FC<{
  codePosition?: number
 }> = ({ view, codePosition }) => {
  const { t } = useTranslation()
+
  return (
-    <Alert className="table-generator-error">
-      <span className="table-generator-error-icon">
-        <Icon type="exclamation-circle" />
-      </span>
-      <div className="table-generator-error-message">
-        <p className="table-generator-error-message-header">
-          {t('sorry_your_table_cant_be_displayed_at_the_moment')}
-        </p>
-        <p>
-          {t(
-            'this_could_be_because_we_cant_support_some_elements_of_the_table'
-          )}
-        </p>
-      </div>
-      {codePosition !== undefined && (
-        <Button
-          bsStyle={null}
-          className="btn-secondary table-generator-error-show-code-button"
-          onClick={() =>
-            view.dispatch({
-              selection: EditorSelection.cursor(codePosition),
-            })
-          }
-        >
-          {t('view_code')}
-        </Button>
-      )}
-    </Alert>
+    <Notification
+      type="info"
+      content={
+        <>
+          <p>
+            <strong>
+              {t('sorry_your_table_cant_be_displayed_at_the_moment')}
+            </strong>
+          </p>
+          <p>
+            {t(
+              'this_could_be_because_we_cant_support_some_elements_of_the_table'
+            )}
+          </p>
+        </>
+      }
+      action={
+        codePosition !== undefined ? (
+          <OLButton
+            variant="secondary"
+            onClick={() =>
+              view.dispatch({
+                selection: EditorSelection.cursor(codePosition),
+              })
+            }
+            size="sm"
+          >
+            {t('view_code')}
+          </OLButton>
+        ) : undefined
+      }
+    />
  )
 }

--- a/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/column-width-modal/modal.tsx
+++ b/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/column-width-modal/modal.tsx
@ -1,5 +1,3 @@
-import AccessibleModal from '@/shared/components/accessible-modal'
-import { Button, Modal, Form, FormGroup } from 'react-bootstrap'
 import { useTabularContext } from '../../contexts/tabular-context'
 import { Select } from '@/shared/components/select'
 import { Trans, useTranslation } from 'react-i18next'
@ -18,8 +16,24 @@ import { setColumnWidth } from '../commands'
 import { UNITS, WidthSelection, WidthUnit } from './column-width'
 import { useCodeMirrorViewContext } from '../../../codemirror-context'
 import { CopyToClipboard } from '@/shared/components/copy-to-clipboard'
-import Tooltip from '@/shared/components/tooltip'
 import Icon from '@/shared/components/icon'
+import OLModal, {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
+import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
+import OLFormControl from '@/features/ui/components/ol/ol-form-control'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import OLForm from '@/features/ui/components/ol/ol-form'
+import { bsVersion } from '@/features/utils/bootstrap-5'
+import MaterialIcon from '@/shared/components/material-icon'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'

 type UnitDescription = { label: string; tooltip?: string } | undefined

@ -93,7 +107,7 @@ const ColumnWidthModalBody = () => {
    }
  }, [columnWidthModalShown, selection, table])

-  const onSubmit: FormEventHandler<Form> = useCallback(
+  const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
    e => {
      e.preventDefault()
      if (selection && currentUnit) {
@ -121,60 +135,67 @@ const ColumnWidthModalBody = () => {
  )

  return (
-    <AccessibleModal
+    <OLModal
      show={columnWidthModalShown}
      onHide={closeColumnWidthModal}
      className="table-generator-width-modal"
    >
-      <Form onSubmit={onSubmit}>
-        <Modal.Header closeButton>
-          <Modal.Title>{t('set_column_width')}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <div className="clearfix">
-            <FormGroup className="col-md-8 p-0 mb-0">
-              <label
-                className="table-generator-width-label"
-                htmlFor="column-width-modal-width"
+      <OLModalHeader closeButton>
+        <OLModalTitle>{t('set_column_width')}</OLModalTitle>
+      </OLModalHeader>
+      <OLModalBody>
+        <OLForm id="table-generator-width-form" onSubmit={onSubmit}>
+          <OLRow className={bsVersion({ bs5: 'g-3' })}>
+            <OLCol lg={8}>
+              <OLFormGroup
+                controlId="column-width-modal-width"
+                className="mb-0"
              >
-                {t('column_width')}
-              </label>
-              <input
-                id="column-width-modal-width"
-                value={currentWidth}
-                required
-                onChange={e => setCurrentWidth(e.target.value)}
-                type={currentUnit === 'custom' ? 'text' : 'number'}
-                className="form-control"
-                ref={inputRef}
-              />
-            </FormGroup>
-            <FormGroup className="col-md-4 mb-0">
-              <Select
-                label={
-                  <>
-                    &nbsp;<span className="sr-only">{t('length_unit')}</span>
-                  </>
-                }
-                items={UNITS}
-                itemToKey={x => x ?? ''}
-                itemToString={x => (x === 'custom' ? t('custom') : (x ?? ''))}
-                onSelectedItemChanged={item => setCurrentUnit(item)}
-                defaultItem={currentUnit}
-              />
-            </FormGroup>
-          </div>
+                <OLFormLabel>{t('column_width')}</OLFormLabel>
+                <OLFormControl
+                  value={currentWidth}
+                  required
+                  onChange={e => setCurrentWidth(e.target.value)}
+                  type={currentUnit === 'custom' ? 'text' : 'number'}
+                  ref={inputRef}
+                />
+              </OLFormGroup>
+            </OLCol>
+            <OLCol lg={4}>
+              <OLFormGroup className="mb-0">
+                <Select
+                  label={
+                    <>
+                      &nbsp;<span className="sr-only">{t('length_unit')}</span>
+                    </>
+                  }
+                  items={UNITS}
+                  itemToKey={x => x ?? ''}
+                  itemToString={x => (x === 'custom' ? t('custom') : (x ?? ''))}
+                  onSelectedItemChanged={item => setCurrentUnit(item)}
+                  defaultItem={currentUnit}
+                />
+              </OLFormGroup>
+            </OLCol>
+          </OLRow>
          {unitHelp && (
            <p className="my-1">
              {unitHelp.label}{' '}
              {unitHelp.tooltip && (
-                <Tooltip
+                <OLTooltip
                  id="table-generator-unit-tooltip"
                  description={unitHelp.tooltip}
                  overlayProps={{ delay: 0, placement: 'top' }}
                >
-                  <Icon type="question-circle" fw />
-                </Tooltip>
+                  <span>
+                    <BootstrapVersionSwitcher
+                      bs3={<Icon type="question-circle" />}
+                      bs5={
+                        <MaterialIcon type="help" className="align-middle" />
+                      }
+                    />
+                  </span>
+                </OLTooltip>
              )}
            </p>
          )}
@ -196,22 +217,25 @@ const ColumnWidthModalBody = () => {
              tooltipId="table-generator-array-copy"
            />
          </div>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button
-            bsStyle={null}
-            className="btn-secondary"
-            onClick={() => {
-              closeColumnWidthModal()
-            }}
-          >
-            {t('cancel')}
-          </Button>
-          <Button bsStyle={null} className="btn-primary" type="submit">
-            {t('ok')}
-          </Button>
-        </Modal.Footer>
-      </Form>
-    </AccessibleModal>
+        </OLForm>
+      </OLModalBody>
+      <OLModalFooter>
+        <OLButton
+          variant="secondary"
+          onClick={() => {
+            closeColumnWidthModal()
+          }}
+        >
+          {t('cancel')}
+        </OLButton>
+        <OLButton
+          variant="primary"
+          form="table-generator-width-form"
+          type="submit"
+        >
+          {t('ok')}
+        </OLButton>
+      </OLModalFooter>
+    </OLModal>
  )
 }
--- a/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar-button-menu.tsx
+++ b/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar-button-menu.tsx
@ -1,9 +1,12 @@
 import { FC, memo, useRef } from 'react'
 import useDropdown from '../../../../../shared/hooks/use-dropdown'
-import { ListGroup, Overlay, Popover } from 'react-bootstrap'
-import Tooltip from '../../../../../shared/components/tooltip'
+import OLListGroup from '@/features/ui/components/ol/ol-list-group'
+import OLOverlay from '@/features/ui/components/ol/ol-overlay'
+import OLPopover from '@/features/ui/components/ol/ol-popover'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import MaterialIcon from '../../../../../shared/components/material-icon'
 import { useTabularContext } from '../contexts/tabular-context'
+import { bsVersion } from '@/features/utils/bootstrap-5'

 export const ToolbarButtonMenu: FC<{
  id: string
@ -45,36 +48,37 @@ export const ToolbarButtonMenu: FC<{
  )

  const overlay = tableContainerRef.current && (
-    <Overlay
+    <OLOverlay
      show={open}
      target={target.current}
      placement="bottom"
      container={tableContainerRef.current}
      containerPadding={0}
-      animation
+      transition
      rootClose
      onHide={() => onToggle(false)}
    >
-      <Popover
+      <OLPopover
        id={`${id}-menu`}
        ref={ref}
        className="table-generator-button-menu-popover"
      >
-        <ListGroup
+        <OLListGroup
          role="menu"
          onClick={() => {
            onToggle(false)
          }}
+          className={bsVersion({ bs5: 'd-block' })}
        >
          {children}
-        </ListGroup>
-      </Popover>
-    </Overlay>
+        </OLListGroup>
+      </OLPopover>
+    </OLOverlay>
  )

  return (
    <>
-      <Tooltip
+      <OLTooltip
        hidden={open}
        id={id}
        description={
@ -83,7 +87,7 @@ export const ToolbarButtonMenu: FC<{
        overlayProps={{ placement: 'bottom' }}
      >
        {button}
-      </Tooltip>
+      </OLTooltip>
      {overlay}
    </>
  )
--- a/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar-button.tsx
+++ b/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar-button.tsx
@ -1,7 +1,7 @@
 import { EditorView } from '@codemirror/view'
 import classNames from 'classnames'
 import { memo, useCallback } from 'react'
-import Tooltip from '../../../../../shared/components/tooltip'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import MaterialIcon from '../../../../../shared/components/material-icon'
 import { useCodeMirrorViewContext } from '../../codemirror-context'
 import { emitTableGeneratorEvent } from '../analytics'
@ -64,12 +64,12 @@ export const ToolbarButton = memo<{
    disabled && disabledLabel ? <div>{disabledLabel}</div> : <div>{label}</div>

  return (
-    <Tooltip
+    <OLTooltip
      id={id}
      description={description}
      overlayProps={{ placement: 'bottom' }}
    >
      {button}
-    </Tooltip>
+    </OLTooltip>
  )
 })
--- a/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar-dropdown.tsx
+++ b/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar-dropdown.tsx
@ -1,8 +1,9 @@
 import { ButtonHTMLAttributes, FC, useCallback, useRef } from 'react'
 import useDropdown from '../../../../../shared/hooks/use-dropdown'
-import { Overlay, Popover } from 'react-bootstrap'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import OLOverlay from '@/features/ui/components/ol/ol-overlay'
+import OLPopover from '@/features/ui/components/ol/ol-popover'
 import MaterialIcon from '../../../../../shared/components/material-icon'
-import Tooltip from '../../../../../shared/components/tooltip'
 import { useTabularContext } from '../contexts/tabular-context'
 import { emitTableGeneratorEvent } from '../analytics'
 import { useCodeMirrorViewContext } from '../../codemirror-context'
@ -55,17 +56,17 @@ export const ToolbarDropdown: FC<{
    </button>
  )
  const overlay = tabularRef.current && (
-    <Overlay
+    <OLOverlay
      show={open}
-      target={toggleButtonRef.current ?? undefined}
+      target={toggleButtonRef.current}
      placement="bottom"
      container={tabularRef.current}
-      animation
+      transition
      rootClose
      containerPadding={0}
      onHide={() => onToggle(false)}
    >
-      <Popover
+      <OLPopover
        id={`${id}-popover`}
        ref={ref}
        className="table-generator-toolbar-dropdown-popover"
@ -82,21 +83,21 @@ export const ToolbarDropdown: FC<{
        >
          {children}
        </div>
-      </Popover>
-    </Overlay>
+      </OLPopover>
+    </OLOverlay>
  )

  if (tooltip || (disabled && disabledTooltip)) {
    return (
      <>
-        <Tooltip
+        <OLTooltip
          hidden={open}
          id={id}
          description={disabled && disabledTooltip ? disabledTooltip : tooltip}
          overlayProps={{ placement: 'bottom' }}
        >
          {button}
-        </Tooltip>
+        </OLTooltip>
        {overlay}
      </>
    )
--- a/services/web/frontend/js/features/source-editor/extensions/visual/table-generator.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/visual/table-generator.ts
@ -1,4 +1,5 @@
 import { EditorView } from '@codemirror/view'
+import { isBootstrap5 } from '@/features/utils/bootstrap-5'

 export const tableGeneratorTheme = EditorView.baseTheme({
  '&dark .table-generator': {
@ -309,14 +310,14 @@ export const tableGeneratorTheme = EditorView.baseTheme({

  '.table-generator-button-menu-popover': {
    'background-color': 'var(--table-generator-toolbar-background) !important',
-    '& .popover-content': {
+    '& .popover-content, & .popover-body': {
      padding: '4px',
    },
    '& .list-group': {
      margin: '0',
      padding: '0',
    },
-    '& > .arrow': {
+    '& > .arrow, & > .popover-arrow': {
      display: 'none',
    },
  },
@ -348,7 +349,7 @@ export const tableGeneratorTheme = EditorView.baseTheme({
    gap: '6px',
    'align-items': 'flex-start',
    'max-width': '240px',
-    'font-family': 'Lato',
+    'font-family': isBootstrap5() ? 'var(--bs-body-font-family)' : 'Lato',

    '& .info-icon': {
      flex: ' 0 0 24px',
@ -369,7 +370,7 @@ export const tableGeneratorTheme = EditorView.baseTheme({
    display: 'flex',
    'align-items': 'center',
    'justify-content': 'space-between',
-    'font-family': 'Lato',
+    'font-family': isBootstrap5() ? 'var(--bs-body-font-family)' : 'Lato',
    height: '36px',

    '&:not(:first-child)': {
@ -387,11 +388,11 @@ export const tableGeneratorTheme = EditorView.baseTheme({
    'max-width': '300px',
    background: 'var(--table-generator-toolbar-background) !important',

-    '& .popover-content': {
+    '& .popover-content, & .popover-body': {
      padding: '0',
    },

-    '& > .arrow': {
+    '& > .arrow, & > .popover-arrow': {
      display: 'none',
    },
  },
@ -416,7 +417,7 @@ export const tableGeneratorTheme = EditorView.baseTheme({
      'column-gap': '8px',
      'align-self': 'stretch',
      padding: '12px 8px',
-      'font-family': 'Lato',
+      'font-family': isBootstrap5() ? 'var(--bs-body-font-family)' : 'Lato',

      '& .table-generator-button-label': {
        'align-self': 'stretch',
@ -482,32 +483,9 @@ export const tableGeneratorTheme = EditorView.baseTheme({
  '.ol-cm-environment-table.table-generator-error-container, .ol-cm-environment-table.ol-cm-tabular':
    {
      background: 'rgba(125, 125, 125, 0.05)',
+      'font-family': isBootstrap5() ? 'var(--bs-body-font-family)' : 'Lato',
    },

-  '.table-generator-error': {
-    background: 'var(--table-generator-error-background)',
-    display: 'flex',
-    'justify-content': 'space-between',
-    color: 'var(--table-generator-error-color)',
-    border: '1px solid var(--table-generator-error-border-color)',
-    'font-family': 'Lato',
-    margin: '0 16px 0 16px',
-    '& .table-generator-error-message': {
-      flex: '1 1 auto',
-    },
-    '& .table-generator-error-message-header': {
-      fontWeight: 'bold',
-      marginBottom: '2px',
-    },
-    '& .table-generator-error-show-code-button': {
-      alignSelf: 'baseline',
-    },
-    '& .table-generator-error-icon': {
-      color: '#3265B2',
-      'margin-right': '12px',
-    },
-  },
-
  '.table-generator-filler-row': {
    border: 'none !important',
    '& td': {
--- a/services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/table-rendering-error.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/table-rendering-error.ts
@ -10,28 +10,34 @@ export class TableRenderingErrorWidget extends WidgetType {

  toDOM(view: EditorView): HTMLElement {
    const warning = document.createElement('div')
-    warning.classList.add('table-generator-error', 'alert')
+    warning.classList.add('notification', 'notification-type-info')
    warning.role = 'alert'
-    const icon = document.createElement('span')
-    icon.classList.add('table-generator-error-icon')
-    const iconType = document.createElement('i')
-    iconType.classList.add('fa', 'fa-info-circle')
+    const icon = document.createElement('div')
+    icon.classList.add('notification-icon')
+    const iconType = document.createElement('span')
+    iconType.classList.add('material-symbols')
+    iconType.setAttribute('aria-hidden', 'true')
+    iconType.textContent = 'info'
    icon.appendChild(iconType)
    warning.appendChild(icon)
+    const messageWrapper = document.createElement('div')
+    messageWrapper.classList.add('notification-content-and-cta')
    const message = document.createElement('div')
-    message.classList.add('table-generator-error-message')
+    message.classList.add('notification-content')
    const messageHeader = document.createElement('p')
-    messageHeader.classList.add('table-generator-error-message-header')
-    messageHeader.textContent = view.state.phrase(
+    const messageHeaderInner = document.createElement('strong')
+    messageHeaderInner.textContent = view.state.phrase(
      'sorry_your_table_cant_be_displayed_at_the_moment'
    )
+    messageHeader.appendChild(messageHeaderInner)
    const messageBody = document.createElement('p')
    messageBody.textContent = view.state.phrase(
      'this_could_be_because_we_cant_support_some_elements_of_the_table'
    )
    message.appendChild(messageHeader)
    message.appendChild(messageBody)
-    warning.appendChild(message)
+    messageWrapper.appendChild(message)
+    warning.appendChild(messageWrapper)
    const element = document.createElement('div')
    element.classList.add('table-generator', 'table-generator-error-container')
    element.appendChild(warning)
--- a/services/web/frontend/js/shared/components/copy-to-clipboard.tsx
+++ b/services/web/frontend/js/shared/components/copy-to-clipboard.tsx
@ -1,4 +1,4 @@
-import { FC, memo, MouseEventHandler, useCallback, useState } from 'react'
+import { memo, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import OLButton from '@/features/ui/components/ol/ol-button'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
@ -33,54 +33,31 @@ export const CopyToClipboard = memo<{
      description={copied ? `${t('copied')}!` : t('copy')}
      overlayProps={{ delay: copied ? 1000 : 250 }}
    >
-      <span>
-        {kind === 'text' ? (
-          <TextButton handleClick={handleClick} />
-        ) : (
-          <IconButton handleClick={handleClick} copied={copied} />
-        )}
-      </span>
+      {kind === 'text' ? (
+        <OLButton
+          onClick={handleClick}
+          size="sm"
+          variant="secondary"
+          className="copy-button"
+          bs3Props={{ bsSize: 'xsmall' }}
+        >
+          {t('copy')}
+        </OLButton>
+      ) : (
+        <OLIconButton
+          onClick={handleClick}
+          variant="link"
+          size="sm"
+          accessibilityLabel={t('copy')}
+          className="copy-button"
+          bs3Props={{ bsSize: 'xsmall' }}
+          icon={bsVersion({
+            bs5: copied ? 'check' : 'content_copy',
+            bs3: copied ? 'check' : 'clipboard',
+          })}
+        />
+      )}
    </OLTooltip>
  )
 })
 CopyToClipboard.displayName = 'CopyToClipboard'
-
-const TextButton: FC<{
-  handleClick: MouseEventHandler<HTMLButtonElement>
-}> = ({ handleClick }) => {
-  const { t } = useTranslation()
-
-  return (
-    <OLButton
-      onClick={handleClick}
-      size="sm"
-      variant="secondary"
-      className="copy-button"
-      bs3Props={{ bsSize: 'xsmall' }}
-    >
-      {t('copy')}
-    </OLButton>
-  )
-}
-
-const IconButton: FC<{
-  handleClick: MouseEventHandler<HTMLButtonElement>
-  copied: boolean
-}> = ({ handleClick, copied }) => {
-  const { t } = useTranslation()
-
-  return (
-    <OLIconButton
-      onClick={handleClick}
-      variant="link"
-      size="sm"
-      accessibilityLabel={t('copy')}
-      className="copy-button"
-      bs3Props={{ bsSize: 'xsmall' }}
-      icon={bsVersion({
-        bs5: copied ? 'check' : 'content_copy',
-        bs3: copied ? 'check' : 'clipboard',
-      })}
-    />
-  )
-}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
@ -24,6 +24,7 @@
@import 'editor/share';
@import 'editor/tags-input';
@import 'editor/review-panel-new';
+@import 'editor/table-generator-column-width-modal';
@import 'website-redesign';
@import 'group-settings';
@import 'templates-v2';
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/table-generator-column-width-modal.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/table-generator-column-width-modal.scss
@ -0,0 +1,13 @@
+.table-generator-width-modal {
+  .table-generator-width-label {
+    width: 100%;
+  }
+
+  .table-generator-usepackage-copy {
+    display: flex;
+    justify-content: space-between;
+    padding: var(--spacing-03) var(--spacing-05);
+    background: var(--bg-light-secondary);
+    border: 1px solid var(--border-primary-dark);
+  }
+}