fix: improve wrapping of small prediction panel toolbar (#2954)

cheminfo · Mar 8, 2024 · 31be6ba · 31be6ba
1 parent f269492
commit 31be6ba
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/component/modal/AboutPredictionModal.tsx b/src/component/modal/AboutPredictionModal.tsx
@@ -43,13 +43,11 @@ function AboutPredictionModal() {
   const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
   return (
     <>
-      <Toolbar>
-        <Toolbar.Item
-          icon={<FaInfo />}
-          onClick={openDialog}
-          title="About Prediction"
-        />
-      </Toolbar>
+      <Toolbar.Item
+        icon={<FaInfo />}
+        onClick={openDialog}
+        title="About Prediction"
+      />
       <Dialog
         isOpen={isOpenDialog}
         onClose={closeDialog}

diff --git a/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx b/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx
@@ -217,8 +217,8 @@ export default function MoleculePanelHeader({
 
   return (
     <PanelHeader>
-      {renderSource === 'predictionPanel' && <AboutPredictionModal />}
       <Toolbar>
+        {renderSource === 'predictionPanel' && <AboutPredictionModal />}
         {renderSource === 'moleculePanel' && (
           <>
             <ToolbarPopoverItem
@@ -239,11 +239,6 @@ export default function MoleculePanelHeader({
               icon={<FaPlus />}
               onClick={onOpenMoleculeEditor}
             />
-          </>
-        )}
-
-        {renderSource === 'moleculePanel' && (
-          <>
             <Toolbar.Item
               title="Delete molecule"
               icon={<FaRegTrashAlt />}
@@ -255,7 +250,6 @@ export default function MoleculePanelHeader({
             )}
           </>
         )}
-
         <Toolbar.Item
           title="Float molecule"
           icon={<IoOpenOutline />}

diff --git a/src/component/panels/predictionPanel/PredictionSimpleOptions.tsx b/src/component/panels/predictionPanel/PredictionSimpleOptions.tsx
@@ -54,6 +54,7 @@ function PredictionSimpleOptions() {
       <div
         style={{
           display: 'flex',
+          flexWrap: 'wrap',
           justifyContent: 'flex-end',
           flex: '1',
           height: '100%',