fix: spectra table columns width (#2210)

* fix: spectra table columns width * refactor: change show/hide spectra column max width
cheminfo · Mar 2, 2023 · 40a9f5b · 40a9f5b
1 parent e31630f
commit 40a9f5b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/src/component/elements/ReactTable/ReactTable.tsx b/src/component/elements/ReactTable/ReactTable.tsx
@@ -99,7 +99,7 @@ const styles = {
     enableVirtualScroll: boolean,
     enableColumnsVirtualScroll,
   ): CSSProperties => {
-    const style: CSSProperties = {};
+    const style: CSSProperties = { tableLayout: 'auto' };
 
     if (enableVirtualScroll) {
       style.position = 'sticky';

diff --git a/src/component/panels/SpectrumsPanel/SpectraTable.tsx b/src/component/panels/SpectrumsPanel/SpectraTable.tsx
@@ -55,11 +55,8 @@ export const SpectraTableButtonStyle: CSSProperties = {
 };
 
 const jPathColumnStyle: CSSProperties = {
-  width: '10%',
+  minWidth: '80px',
   maxWidth: 0,
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
 };
 
 interface SpectraTableProps extends OnChangeVisibilityEvent {
@@ -107,7 +104,8 @@ export function SpectraTable(props: SpectraTableProps) {
         id: 'hide-show-spectrum',
         Header: '',
         style: {
-          width: '20px',
+          width: '35px',
+          maxWidth: '55px',
           ...columnStyle,
         },
         Cell: ({ row }) => {
@@ -121,15 +119,15 @@ export function SpectraTable(props: SpectraTableProps) {
       },
       name: {
         Header: '',
-        style: { width: '50%', maxWidth: 0, ...columnStyle },
+        style: { maxWidth: 0, minWidth: '200px', ...columnStyle },
         accessor: (row) => row.info.name,
         Cell: ({ row }) => {
           return <SpectrumName data={row.original} />;
         },
       },
       solvent: {
         Header: '',
-        style: columnStyle,
+        style: { ...columnStyle, ...jPathColumnStyle },
         accessor: (row) => row.info.solvent,
         Cell: ({ row }) => {
           const info: any = row.original.info;
@@ -150,6 +148,7 @@ export function SpectraTable(props: SpectraTableProps) {
         id: 'spectrum-actions',
         style: {
           width: '30px',
+          maxWidth: '30px',
           ...columnStyle,
         },
         Cell: ({ row }) => {
@@ -287,7 +286,15 @@ const ColumnHeader = ({
       options={options}
       onSelect={selectHandler}
     >
-      <div>{label}</div>
+      <div
+        style={{
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        }}
+      >
+        {label}
+      </div>
     </DropdownMenu>
   );
 };