refactor: make footer float above editor content

Author: hamed-musallam

src/component/panels/predictionPanel/PredictionPanel.tsx

@@ -4,15 +4,14 @@ 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,10 +25,8 @@ import PredictionPreferences from './PredictionPreferences.js';
 import PredictionSimpleOptions from './PredictionSimpleOptions.js';
 
 const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
+  position: relative;
+  height: 100%;
 `;
 
 const Overflow = styled.div<{ height: number }>`
@@ -42,12 +39,10 @@ const StickyFooter = styled.div`
   padding: 5px;
   display: flex;
   justify-content: flex-end;
-  background-color: #fff;
-  border-top: 1px solid #ccc;
   z-index: 2;
-`;
-const Content = styled.div`
-  flex: 1;
+  position: absolute;
+  bottom: 0;
+  right: 10px;
 `;
 
 export default function PredictionPanel() {
@@ -182,79 +177,76 @@ export default function PredictionPanel() {
           </MoleculePanelHeader>
 
           <Container>
-            <Content>
-              <ResponsiveChart>
-                {({ height, width }) => {
-                  return (
-                    <NextPrev
-                      onChange={(slideIndex) => {
-                        setCurrentIndex(slideIndex);
-                        setMolfile(molecules[slideIndex].molfile);
-                      }}
-                      index={currentIndex}
-                      style={{
-                        arrowContainer: {
-                          top: '40px',
-                          padding: '0 10px 0 55px',
-                        },
-                      }}
-                    >
-                      {molecules && molecules.length > 0 ? (
-                        molecules.map(
-                          (mol: StateMoleculeExtended, molIndex) => (
-                            <Fragment key={mol.id}>
-                              <MoleculeHeader
-                                currentMolecule={mol}
-                                molecules={molecules}
-                              />
-
-                              {molIndex === currentIndex && (
-                                <Overflow height={height}>
-                                  <CanvasMoleculeEditor
-                                    width={width}
-                                    inputFormat="molfile"
-                                    inputValue={mol.molfile}
-                                    fragment={false}
-                                    onChange={changeHandler}
-                                    height={400}
-                                  />
-                                </Overflow>
-                              )}
-                            </Fragment>
-                          ),
-                        )
-                      ) : (
-                        <Overflow height={height}>
-                          <CanvasMoleculeEditor
-                            inputFormat="molfile"
-                            inputValue={initialMolfile}
-                            width={width}
-                            fragment={false}
-                            onChange={changeHandler}
-                            height={400}
+            <ResponsiveChart>
+              {({ height, width }) => {
+                return (
+                  <NextPrev
+                    onChange={(slideIndex) => {
+                      setCurrentIndex(slideIndex);
+                      setMolfile(molecules[slideIndex].molfile);
+                    }}
+                    index={currentIndex}
+                    style={{
+                      arrowContainer: {
+                        top: '40px',
+                        padding: '0 10px 0 55px',
+                      },
+                    }}
+                  >
+                    {molecules && molecules.length > 0 ? (
+                      molecules.map((mol: StateMoleculeExtended, molIndex) => (
+                        <Fragment key={mol.id}>
+                          <MoleculeHeader
+                            currentMolecule={mol}
+                            molecules={molecules}
                           />
-                        </Overflow>
-                      )}
-                    </NextPrev>
-                  );
-                }}
-              </ResponsiveChart>
-            </Content>
 
+                          {molIndex === currentIndex && (
+                            <Overflow height={height}>
+                              <CanvasMoleculeEditor
+                                width={width}
+                                inputFormat="molfile"
+                                inputValue={mol.molfile}
+                                fragment={false}
+                                onChange={changeHandler}
+                                height={400}
+                              />
+                            </Overflow>
+                          )}
+                        </Fragment>
+                      ))
+                    ) : (
+                      <Overflow height={height}>
+                        <CanvasMoleculeEditor
+                          inputFormat="molfile"
+                          inputValue={initialMolfile}
+                          width={width}
+                          fragment={false}
+                          onChange={changeHandler}
+                          height={400}
+                        />
+                      </Overflow>
+                    )}
+                  </NextPrev>
+                );
+              }}
+            </ResponsiveChart>
             <StickyFooter>
-              <Button.Done
+              <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>
               )}
             </StickyFooter>
           </Container>