Fixed: Toolbar button collapsing includes separator

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/Components/Page/Toolbar/PageToolbarSection.js

@@ -15,7 +15,6 @@ import styles from './PageToolbarSection.css';
 const BUTTON_WIDTH = parseInt(dimensions.toolbarButtonWidth);
 const SEPARATOR_MARGIN = parseInt(dimensions.toolbarSeparatorMargin);
 const SEPARATOR_WIDTH = 2 * SEPARATOR_MARGIN + 1;
-const SEPARATOR_NAME = 'PageToolbarSeparator';
 
 function calculateOverflowItems(children, isMeasured, width, collapseButtons) {
   let buttonCount = 0;
@@ -23,9 +22,7 @@ function calculateOverflowItems(children, isMeasured, width, collapseButtons) {
   const validChildren = [];
 
   forEach(children, (child) => {
-    const name = child.type.name;
-
-    if (name === SEPARATOR_NAME) {
+    if (Object.keys(child.props).length === 0) {
       separatorCount++;
     } else {
       buttonCount++;
@@ -68,12 +65,14 @@ function calculateOverflowItems(children, isMeasured, width, collapseButtons) {
   }
 
   validChildren.forEach((child, index) => {
+    const isSeparator = Object.keys(child.props).length === 0;
+
     if (actualButtons < maxButtons) {
-      if (child.type.name !== SEPARATOR_NAME) {
+      if (!isSeparator) {
         buttons.push(child);
         actualButtons++;
       }
-    } else if (child.type.name !== SEPARATOR_NAME) {
+    } else if (!isSeparator) {
       overflowItems.push(child.props);
     }
   });