fix: table style when panel flip

src/component/elements/ToggleButton.tsx

@@ -27,6 +27,7 @@ interface ToggleButtonProps {
   onClick: (element: boolean) => void;
   disabled?: boolean;
   children: ReactNode;
+  className?: string;
 }
 
 function ToggleButton({
@@ -37,6 +38,7 @@ function ToggleButton({
   popupPlacement = 'right',
   defaultValue = false,
   disabled = false,
+  className = '',
 }: ToggleButtonProps) {
   const [flag, Toggle] = useState<boolean>(defaultValue);
 
@@ -51,7 +53,7 @@ function ToggleButton({
         disabled={disabled}
         css={styles}
         style={style}
-        className={flag ? 'toogle toggle-active' : 'toggle'}
+        className={(flag ? 'toggle toggle-active ' : 'toggle ') + className}
         type="button"
         onClick={toggleHandler}
       >

src/component/panels/IntegralsPanel/IntegralPanel.tsx

@@ -21,17 +21,14 @@ import {
   CHANGE_INTEGRAL_SUM,
   CHANGE_INTEGRALS_SUM_FLAG,
 } from '../../reducer/types/Types';
+import { tablePanelStyle } from '../extra/basicPanelStyle';
 import DefaultPanelHeader from '../header/DefaultPanelHeader';
 import PreferencesHeader from '../header/PreferencesHeader';
 
 import IntegralTable from './IntegralTable';
 import IntegralsPreferences from './IntegralsPreferences';
 
-const styles = css`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
+const style = css`
   .sum-button {
     width: 22px;
     height: 22px;
@@ -167,7 +164,18 @@ function IntegralPanelInner({
 
   return (
     <Fragment>
-      <div css={styles}>
+      <div
+        css={[
+          tablePanelStyle,
+          style,
+          isFlipped &&
+            css`
+              th {
+                position: relative;
+              }
+            `,
+        ]}
+      >
         {!isFlipped && (
           <DefaultPanelHeader
             counter={integrals?.values?.length}
@@ -215,13 +223,13 @@ function IntegralPanelInner({
             onClose={settingsPanelHandler}
           />
         )}
-        <div style={{ height: '100%', overflow: 'hidden' }}>
+        <div className="inner-container">
           <ReactCardFlip
             isFlipped={isFlipped}
             infinite
             containerStyle={{ overflow: 'hidden', height: '100%' }}
           >
-            <div style={{ overflow: 'auto', height: '100%', display: 'block' }}>
+            <div className="table-container">
               <IntegralTable
                 data={filteredData}
                 activeTab={activeTab}

src/component/panels/MultipleSpectraAnalysisPanel/MultipleSpectraAnalysisPanel.tsx

@@ -1,16 +1,11 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
 import {
   SvgNmrOverlay,
   SvgNmrAddFilter,
   SvgNmrExportAsMatrix,
 } from 'cheminfo-font';
-import {
-  useCallback,
-  useState,
-  useRef,
-  memo,
-  useMemo,
-  CSSProperties,
-} from 'react';
+import { useCallback, useState, useRef, memo, useMemo } from 'react';
 import ReactCardFlip from 'react-card-flip';
 import { FaFileExport } from 'react-icons/fa';
 import { IoPulseOutline } from 'react-icons/io5';
@@ -31,25 +26,13 @@ import MultipleSpectraFiltersModal from '../../modal/MultipleSpectraFiltersModal
 import { RESET_SELECTED_TOOL } from '../../reducer/types/Types';
 import Events from '../../utility/Events';
 import { copyTextToClipboard } from '../../utility/Export';
+import { tablePanelStyle } from '../extra/basicPanelStyle';
 import DefaultPanelHeader from '../header/DefaultPanelHeader';
 import PreferencesHeader from '../header/PreferencesHeader';
 
 import MultipleSpectraAnalysisPreferences from './MultipleSpectraAnalysisPreferences';
 import MultipleSpectraAnalysisTable from './MultipleSpectraAnalysisTable';
 
-const styles: Record<'container' | 'button', CSSProperties> = {
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    width: '100%',
-  },
-  button: {
-    backgroundColor: 'transparent',
-    border: 'none',
-  },
-};
-
 interface MultipleSpectraAnalysisPanelInnerProps {
   activeTab: string;
   spectraAnalysis: SpectraAnalysis;
@@ -128,7 +111,17 @@ function MultipleSpectraAnalysisPanelInner({
   }, [modal, dispatch]);
 
   return (
-    <div style={styles.container}>
+    <div
+      css={[
+        tablePanelStyle,
+        isFlipped &&
+          css`
+            .table-container th {
+              position: relative;
+            }
+          `,
+      ]}
+    >
       {!isFlipped && (
         <DefaultPanelHeader
           deleteToolTip="Delete All Peaks"
@@ -138,14 +131,14 @@ function MultipleSpectraAnalysisPanelInner({
         >
           <Button
             popupTitle="Copy To Clipboard"
-            style={styles.button}
+            // style={styles.button}
             onClick={copyToClipboardHandler}
           >
             <FaFileExport />
           </Button>
           <Button
             popupTitle="Spectra calibration"
-            style={styles.button}
+            // style={styles.button}
             onClick={openAlignSpectra}
           >
             <SvgNmrOverlay style={{ fontSize: '18px' }} />
@@ -160,7 +153,7 @@ function MultipleSpectraAnalysisPanelInner({
 
           <Button
             popupTitle="Add Filter"
-            style={styles.button}
+            // style={styles.button}
             onClick={openFiltersModal}
           >
             <SvgNmrAddFilter style={{ fontSize: '18px' }} />
@@ -179,13 +172,15 @@ function MultipleSpectraAnalysisPanelInner({
           onClose={settingsPanelHandler}
         />
       )}
-      <div style={{ height: '100%', overflow: 'auto' }}>
+      <div className="inner-container">
         <ReactCardFlip
           isFlipped={isFlipped}
           infinite
           containerStyle={{ overflow: 'hidden' }}
         >
-          <MultipleSpectraAnalysisTable data={data} activeTab={activeTab} />
+          <div className="table-container">
+            <MultipleSpectraAnalysisTable data={data} activeTab={activeTab} />
+          </div>
           <MultipleSpectraAnalysisPreferences
             data={data}
             onAfterSave={afterSaveHandler}

src/component/panels/PeaksPanel/PeaksPanel.tsx

@@ -1,11 +1,6 @@
-import {
-  useCallback,
-  useMemo,
-  useState,
-  useRef,
-  memo,
-  CSSProperties,
-} from 'react';
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { useCallback, useMemo, useState, useRef, memo } from 'react';
 import ReactCardFlip from 'react-card-flip';
 
 import { Datum1D, Info, Peaks } from '../../../data/data1d/Spectrum1D';
@@ -16,21 +11,13 @@ import { useModal } from '../../elements/popup/Modal';
 import useSpectrum from '../../hooks/useSpectrum';
 import { DELETE_PEAK_NOTATION } from '../../reducer/types/Types';
 import { useFormatNumberByNucleus } from '../../utility/FormatNumber';
+import { tablePanelStyle } from '../extra/basicPanelStyle';
 import DefaultPanelHeader from '../header/DefaultPanelHeader';
 import PreferencesHeader from '../header/PreferencesHeader';
 
 import PeaksPreferences from './PeaksPreferences';
 import PeaksTable from './PeaksTable';
 
-const styles: Record<'container', CSSProperties> = {
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    width: '100%',
-  },
-};
-
 interface PeaksPanelInnerProps {
   peaks: Peaks;
   xDomain: number[];
@@ -116,7 +103,17 @@ function PeaksPanelInner({
   }, [filterIsActive, format, info, peaks, xDomain]);
 
   return (
-    <div style={styles.container}>
+    <div
+      css={[
+        tablePanelStyle,
+        isFlipped &&
+          css`
+            th {
+              position: relative;
+            }
+          `,
+      ]}
+    >
       {!isFlipped && (
         <DefaultPanelHeader
           counter={peaks?.values?.length}
@@ -138,13 +135,13 @@ function PeaksPanelInner({
           onClose={settingsPanelHandler}
         />
       )}
-      <div style={{ height: '100%', overflow: 'hidden' }}>
+      <div className="inner-container">
         <ReactCardFlip
           isFlipped={isFlipped}
           infinite
           containerStyle={{ overflow: 'hidden', height: '100%' }}
         >
-          <div style={{ overflow: 'auto', height: '100%', display: 'block' }}>
+          <div className="table-container">
             <PeaksTable
               data={filteredPeaks}
               activeTab={activeTab}

src/component/panels/RangesPanel/RangesPanel.tsx

@@ -1,13 +1,8 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
 import lodashGet from 'lodash/get';
 import { xGetFromToIndex } from 'ml-spectra-processing';
-import {
-  useCallback,
-  useMemo,
-  memo,
-  useState,
-  useRef,
-  CSSProperties,
-} from 'react';
+import { useCallback, useMemo, memo, useState, useRef } from 'react';
 import ReactCardFlip from 'react-card-flip';
 
 import { Data1D, Datum1D, Info, Ranges } from '../../../data/data1d/Spectrum1D';
@@ -20,6 +15,7 @@ import { useAlert } from '../../elements/popup/Alert';
 import useSpectrum from '../../hooks/useSpectrum';
 import { UNLINK_RANGE } from '../../reducer/types/Types';
 import { copyTextToClipboard } from '../../utility/Export';
+import { tablePanelStyle } from '../extra/basicPanelStyle';
 import NoTableData from '../extra/placeholder/NoTableData';
 import { rangeDefaultValues } from '../extra/preferences/defaultValues';
 import PreferencesHeader from '../header/PreferencesHeader';
@@ -28,65 +24,6 @@ import RangesHeader from './RangesHeader';
 import RangesPreferences from './RangesPreferences';
 import RangesTable from './RangesTable';
 
-const styles: Record<
-  | 'toolbar'
-  | 'container'
-  | 'sumButton'
-  | 'removeAssignmentsButton'
-  | 'setShowMultiplicityTreesButton'
-  | 'button',
-  CSSProperties
-> = {
-  toolbar: {
-    display: 'flex',
-    flexDirection: 'row',
-    borderBottom: '0.55px solid rgb(240, 240, 240)',
-  },
-  container: {
-    flexDirection: 'column',
-    height: '100%',
-    display: 'flex',
-    width: '100%',
-  },
-  sumButton: {
-    borderRadius: '5px',
-    marginTop: '3px',
-    color: 'white',
-    backgroundColor: '#6d6d6d',
-    border: 'none',
-    height: '16px',
-    width: '18px',
-    fontSize: '12px',
-    padding: 0,
-  },
-  removeAssignmentsButton: {
-    borderRadius: '5px',
-    marginTop: '3px',
-    marginLeft: '2px',
-    border: 'none',
-    height: '16px',
-    width: '18px',
-    fontSize: '12px',
-    padding: 0,
-  },
-  setShowMultiplicityTreesButton: {
-    borderRadius: '5px',
-    marginTop: '3px',
-    marginLeft: '5px',
-    color: 'black',
-    backgroundColor: 'transparent',
-    border: 'none',
-    height: '16px',
-    width: '18px',
-    fontSize: '12px',
-    padding: 0,
-  },
-  button: {
-    backgroundColor: 'transparent',
-    border: 'none',
-  },
-};
-
 interface RangesTablePanelInnerProps {
   ranges: Ranges;
   data: Data1D;
@@ -231,7 +168,17 @@ function RangesTablePanelInner({
 
   return (
     <>
-      <div style={styles.container}>
+      <div
+        css={[
+          tablePanelStyle,
+          isFlipped &&
+            css`
+              th {
+                position: relative;
+              }
+            `,
+        ]}
+      >
         {!isFlipped && (
           <RangesHeader
             {...{
@@ -255,13 +202,13 @@ function RangesTablePanelInner({
             onClose={settingsPanelHandler}
           />
         )}
-        <div style={{ height: '100%', overflow: 'hidden' }}>
+        <div className="inner-container">
           <ReactCardFlip
             isFlipped={isFlipped}
             infinite
             containerStyle={{ overflow: 'hidden', height: '100%' }}
           >
-            <div style={{ overflow: 'auto', height: '100%', display: 'block' }}>
+            <div className="table-container">
               {rangesData && rangesData.length > 0 ? (
                 <RangesTable
                   activeTab={activeTab}