feat: collapse toolbar when panel header overflows

Author: hamed-musallam

package-lock.json

@@ -113,7 +113,7 @@
     "react-ocl-nmr": "^4.1.1",
     "react-plot": "^3.1.2",
     "react-rnd": "^10.5.2",
-    "react-science": "^19.4.0",
+    "react-science": "^19.5.1",
     "react-table": "^7.8.0",
     "smart-array-filter": "^5.0.0",
     "yup": "^1.7.1",

package.json

@@ -384,7 +384,7 @@ export default function MoleculePanelHeader(props: MoleculePanelHeaderProps) {
       {dialog.autoLabelDatabaseDialog && (
         <MoleculeAutoLabelsDatabaseModal onClose={closeDialog} />
       )}
-      <Toolbar>
+      <Toolbar overflow="collapse">
         {renderSource === 'predictionPanel' && <AboutPredictionModal />}
         {renderSource === 'moleculePanel' && (
           <ToolbarPopoverItem

src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx

@@ -9,6 +9,7 @@ const styles: Record<'leftContainer', CSSProperties> = {
     display: 'flex',
     flexDirection: 'row',
     flex: 1,
+    width: '100%',
   },
 };
 
@@ -74,7 +75,7 @@ function DefaultPanelHeader(props: DefaultPanelHeaderProps) {
       total={hideCounter ? undefined : total}
     >
       <div style={styles.leftContainer}>
-        <Toolbar>
+        <Toolbar overflow="collapse">
           {onDelete && (
             <Toolbar.Item
               id="delete-button"