Merge pull request #14690 from overleaf/mj-table-gen-toolbar-wrap

[visual] Wrap table generator toolbar on overflow

GitOrigin-RevId: ef4d5b7f8fe79eefb6d2ad2f89c8ae198e2c701d

services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar.tsx

@@ -63,77 +63,79 @@ export const Toolbar = memo(function Toolbar() {
 
   return (
     <div className="table-generator-floating-toolbar">
-      <ToolbarDropdown
-        id="table-generator-caption-dropdown"
-        label={captionLabel}
-        disabled={!tableEnvironment}
-      >
-        <ToolbarDropdownItem
-          id="table-generator-caption-none"
-          command={() => {
-            removeCaption(view, tableEnvironment)
-          }}
-        >
-          No caption
-        </ToolbarDropdownItem>
-        <ToolbarDropdownItem
-          id="table-generator-caption-above"
-          command={() => {
-            moveCaption(view, positions, 'above', tableEnvironment)
-          }}
-        >
-          Caption above
-        </ToolbarDropdownItem>
-        <ToolbarDropdownItem
-          id="table-generator-caption-below"
-          command={() => {
-            moveCaption(view, positions, 'below', tableEnvironment)
-          }}
-        >
-          Caption below
-        </ToolbarDropdownItem>
-      </ToolbarDropdown>
-      <ToolbarDropdown
-        id="table-generator-borders-dropdown"
-        label={borderDropdownLabel}
-      >
-        <ToolbarDropdownItem
-          id="table-generator-borders-fully-bordered"
-          command={() => {
-            setBorders(
-              view,
-              BorderTheme.FULLY_BORDERED,
-              positions,
-              rowSeparators,
-              table
-            )
-          }}
+      <div className="table-generator-button-group">
+        <ToolbarDropdown
+          id="table-generator-caption-dropdown"
+          label={captionLabel}
+          disabled={!tableEnvironment}
         >
-          <MaterialIcon type="border_all" />
-          <span className="table-generator-button-label">All borders</span>
-        </ToolbarDropdownItem>
-        <ToolbarDropdownItem
-          id="table-generator-borders-no-borders"
-          command={() => {
-            setBorders(
-              view,
-              BorderTheme.NO_BORDERS,
-              positions,
-              rowSeparators,
-              table
-            )
-          }}
+          <ToolbarDropdownItem
+            id="table-generator-caption-none"
+            command={() => {
+              removeCaption(view, tableEnvironment)
+            }}
+          >
+            No caption
+          </ToolbarDropdownItem>
+          <ToolbarDropdownItem
+            id="table-generator-caption-above"
+            command={() => {
+              moveCaption(view, positions, 'above', tableEnvironment)
+            }}
+          >
+            Caption above
+          </ToolbarDropdownItem>
+          <ToolbarDropdownItem
+            id="table-generator-caption-below"
+            command={() => {
+              moveCaption(view, positions, 'below', tableEnvironment)
+            }}
+          >
+            Caption below
+          </ToolbarDropdownItem>
+        </ToolbarDropdown>
+        <ToolbarDropdown
+          id="table-generator-borders-dropdown"
+          label={borderDropdownLabel}
         >
-          <MaterialIcon type="border_clear" />
-          <span className="table-generator-button-label">No borders</span>
-        </ToolbarDropdownItem>
-        <div className="table-generator-border-options-coming-soon">
-          <div className="info-icon">
-            <MaterialIcon type="info" />
+          <ToolbarDropdownItem
+            id="table-generator-borders-fully-bordered"
+            command={() => {
+              setBorders(
+                view,
+                BorderTheme.FULLY_BORDERED,
+                positions,
+                rowSeparators,
+                table
+              )
+            }}
+          >
+            <MaterialIcon type="border_all" />
+            <span className="table-generator-button-label">All borders</span>
+          </ToolbarDropdownItem>
+          <ToolbarDropdownItem
+            id="table-generator-borders-no-borders"
+            command={() => {
+              setBorders(
+                view,
+                BorderTheme.NO_BORDERS,
+                positions,
+                rowSeparators,
+                table
+              )
+            }}
+          >
+            <MaterialIcon type="border_clear" />
+            <span className="table-generator-button-label">No borders</span>
+          </ToolbarDropdownItem>
+          <div className="table-generator-border-options-coming-soon">
+            <div className="info-icon">
+              <MaterialIcon type="info" />
+            </div>
+            More options for border settings coming soon.
           </div>
-          More options for border settings coming soon.
-        </div>
-      </ToolbarDropdown>
+        </ToolbarDropdown>
+      </div>
       <div className="table-generator-button-group">
         <ToolbarButtonMenu
           label="Alignment"

services/web/frontend/js/features/source-editor/extensions/visual/table-generator.ts

@@ -191,18 +191,22 @@ export const tableGeneratorTheme = EditorView.baseTheme({
 
   '.table-generator-floating-toolbar': {
     position: 'absolute',
-    top: '-36px',
+    top: '0',
+    transform: 'translateY(-100%)',
     left: '0',
     right: '0',
     margin: '0 auto',
     'z-index': '1',
     'border-radius': '4px',
     width: 'max-content',
+    'justify-content': 'start',
+    maxWidth: '100%',
     'background-color': 'var(--table-generator-toolbar-background)',
     'box-shadow': '0px 2px 4px 0px var(--table-generator-toolbar-shadow-color)',
     padding: '4px',
-    height: '40px',
     display: 'flex',
+    flexWrap: 'wrap',
+    rowGap: '8px',
   },
 
   '.table-generator-toolbar-button': {
@@ -262,10 +266,10 @@ export const tableGeneratorTheme = EditorView.baseTheme({
     'justify-content': 'center',
     'line-height': '1',
     overflow: 'hidden',
-    '&:not(:first-child)': {
-      'border-left': '1px solid var(--table-generator-divider-color)',
-      'padding-left': '8px',
-      'margin-left': '8px',
+    '&:not(:last-child)': {
+      'border-right': '1px solid var(--table-generator-divider-color)',
+      'padding-right': '8px',
+      'margin-right': '8px',
     },
   },
 
@@ -332,6 +336,7 @@ export const tableGeneratorTheme = EditorView.baseTheme({
     'align-items': 'center',
     'justify-content': 'space-between',
     'font-family': 'Lato',
+    height: '36px',
 
     '&:not(:first-child)': {
       'margin-left': '8px',