fix: prediction panel structure editor scrolls on overflow

src/component/elements/NextPrev.tsx

@@ -76,7 +76,7 @@ const TransformController = styled.div<{
 
 const Content = styled.div<{ width: number }>`
   width: ${(props) => props.width}px;
-  height: 100%;
+  flex: 1;
 `;
 
 const transition = 0.45;

src/component/panels/predictionPanel/PredictionPanel.tsx

@@ -1,18 +1,17 @@
 import styled from '@emotion/styled';
 import { Molecule } from 'openchemlib';
-import { useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { ResponsiveChart } from 'react-d3-utils';
 import type { CanvasEditorOnChangeMolecule } from 'react-ocl';
 import { CanvasMoleculeEditor } from 'react-ocl';
-import { useAccordionControls } from 'react-science/ui';
+import { Button, useAccordionControls } from 'react-science/ui';
 
 import { predictSpectra } from '../../../data/PredictionManager.js';
 import type { StateMoleculeExtended } from '../../../data/molecules/Molecule.js';
 import { useChartData } from '../../context/ChartContext.js';
 import { useDispatch } from '../../context/DispatchContext.js';
 import { useLogger } from '../../context/LoggerContext.js';
 import { useToaster } from '../../context/ToasterContext.js';
-import Button from '../../elements/Button.js';
 import { NextPrev } from '../../elements/NextPrev.js';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 import { useMoleculeEditor } from '../../modal/MoleculeStructureEditorModal.js';
@@ -26,16 +25,26 @@ import PredictionPreferences from './PredictionPreferences.js';
 import PredictionSimpleOptions from './PredictionSimpleOptions.js';
 
 const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
+  position: relative;
+  height: 100%;
 `;
 
 const Overflow = styled.div<{ height: number }>`
   overflow: hidden auto;
   height: ${({ height }) => height}px;
 `;
 
+const StickyFooter = styled.div`
+  flex-shrink: 0;
+  padding: 5px;
+  display: flex;
+  justify-content: flex-end;
+  z-index: 2;
+  position: absolute;
+  bottom: 0;
+  right: 10px;
+`;
+
 export default function PredictionPanel() {
   const {
     molecules,
@@ -168,7 +177,7 @@ export default function PredictionPanel() {
           </MoleculePanelHeader>
 
           <Container>
-            <ResponsiveChart minHeight={400}>
+            <ResponsiveChart>
               {({ height, width }) => {
                 return (
                   <NextPrev
@@ -186,24 +195,25 @@ export default function PredictionPanel() {
                   >
                     {molecules && molecules.length > 0 ? (
                       molecules.map((mol: StateMoleculeExtended, molIndex) => (
-                        <div key={mol.id}>
+                        <Fragment key={mol.id}>
                           <MoleculeHeader
                             currentMolecule={mol}
                             molecules={molecules}
                           />
-                          <Overflow height={height}>
-                            {molIndex === currentIndex && (
+
+                          {molIndex === currentIndex && (
+                            <Overflow height={height}>
                               <CanvasMoleculeEditor
                                 width={width}
                                 inputFormat="molfile"
                                 inputValue={mol.molfile}
                                 fragment={false}
                                 onChange={changeHandler}
-                                height="80%"
+                                height={400}
                               />
-                            )}
-                          </Overflow>
-                        </div>
+                            </Overflow>
+                          )}
+                        </Fragment>
                       ))
                     ) : (
                       <Overflow height={height}>
@@ -213,35 +223,32 @@ export default function PredictionPanel() {
                           width={width}
                           fragment={false}
                           onChange={changeHandler}
+                          height={400}
                         />
                       </Overflow>
                     )}
                   </NextPrev>
                 );
               }}
             </ResponsiveChart>
-            <div
-              style={{
-                display: 'flex',
-                padding: '5px',
-                justifyContent: 'flex-end',
-              }}
-            >
-              <Button.Done
+            <StickyFooter>
+              <Button
                 onClick={() => predictHandler('save')}
                 disabled={!molfile}
+                intent="success"
+                style={{ marginLeft: '5px' }}
               >
                 {isPredictedBefore ? 'Replace prediction' : 'Predict spectra'}
-              </Button.Done>
+              </Button>
               {isPredictedBefore && (
-                <Button.Action
-                  style={{ marginLeft: '5px' }}
+                <Button
+                  style={{ marginLeft: '5px', opacity: '0.8' }}
                   onClick={() => predictHandler('add')}
                 >
                   Add prediction
-                </Button.Action>
+                </Button>
               )}
-            </div>
+            </StickyFooter>
           </Container>
         </>
       )}