fix: resolve NextPrev slider width measurement in modals

Replace react-d3-utils ResizeObserver with manual implementation
using useLayoutEffect to fix incorrect `width` calculation when
component is rendered inside modals.

The previous implementation measured `width` before the modal was
fully rendered

Author: hamed-musallam

src/component/elements/NextPrev.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import type { CSSProperties, ReactElement } from 'react';
-import { Children } from 'react';
-import { useResizeObserver } from 'react-d3-utils';
+import { Children, useLayoutEffect, useRef, useState } from 'react';
 import { FaAngleLeft } from 'react-icons/fa';
 
 type Direction = 'right' | 'left';
@@ -90,10 +89,35 @@ interface NextPrevProps {
 
 export function NextPrev(props: NextPrevProps) {
   const { children, index = 0, onChange = () => null, style = {} } = props;
-  const [ref, { width } = { width: 0 }] = useResizeObserver();
   const slidersCount = Children.count(children);
   const lastIndex = slidersCount > 0 ? slidersCount - 1 : 0;
   const activeIndex = Math.min(index, lastIndex);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [width, setWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = entry.contentRect.width;
+        if (newWidth > 0) {
+          setWidth(newWidth);
+        }
+      }
+    });
+
+    observer.observe(container);
+
+    const rect = container.getBoundingClientRect();
+    if (rect.width > 0) {
+      setWidth(rect.width);
+    }
+
+    return () => observer.disconnect();
+  }, []);
 
   function nextHandler() {
     if (index < lastIndex) {
@@ -113,7 +137,7 @@ export function NextPrev(props: NextPrevProps) {
   const slidersWidth = width * slidersCount;
 
   return (
-    <Container ref={ref}>
+    <Container ref={containerRef}>
       <TransformController
         translation={translation}
         slidersWidth={slidersWidth}

src/component/modal/changeSum/ChangeSumModal.tsx

@@ -35,7 +35,7 @@ export default function ChangeSumModal(props: ChangeSumModalProps) {
         <Dialog
           isOpen
           onClose={closeDialog}
-          style={{ width: 500 }}
+          style={{ width: 500, minHeight: 450 }}
           title={
             currentSum
               ? `Set new ${sumType} sum (Current: ${currentSum.toFixed(2)})`

src/component/modal/changeSum/SelectMolecule.tsx

@@ -87,29 +87,29 @@ export default function SelectMolecule<
     [setValue],
   );
 
-  return (
-    <div>
-      {element && molecules && molecules.length > 0 ? (
-        <Container>
-          <Title>Select a molecule as reference!</Title>
+  if (element && molecules && molecules.length > 0) {
+    return (
+      <Container>
+        <Title>Select a molecule as reference!</Title>
+
+        <SelectionContainer>
+          <MoleculeSelection
+            index={currentIndex}
+            molecules={molecules}
+            onChange={onChangeMoleculeSelectionHandler}
+          />
+          <SumValue>
+            New sum for {element} will be {newSum}!
+          </SumValue>
+        </SelectionContainer>
+      </Container>
+    );
+  }
 
-          <SelectionContainer>
-            <MoleculeSelection
-              index={currentIndex}
-              molecules={molecules}
-              onChange={onChangeMoleculeSelectionHandler}
-            />
-            <SumValue>
-              New sum for {element} will be {newSum}!
-            </SumValue>
-          </SelectionContainer>
-        </Container>
-      ) : (
-        <EmptyText color={invalid ? 'red' : 'black'}>
-          You have to Select a spectrum and Add a molecule from the Structure
-          panel to select as a reference!
-        </EmptyText>
-      )}
-    </div>
+  return (
+    <EmptyText color={invalid ? 'red' : 'black'}>
+      You have to Select a spectrum and Add a molecule from the Structure panel
+      to select as a reference!
+    </EmptyText>
   );
 }