From 987063422da920ecf21f0d1aaa15b4a1ce84f1fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Sun, 27 Oct 2024 10:13:59 +0100
Subject: [PATCH] use storage instead of state to correctly save position while
 resizing

---
 shared/naturalcrit/splitPane/splitPane.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx
index 95269aebc..4def5b9fc 100644
--- a/shared/naturalcrit/splitPane/splitPane.jsx
+++ b/shared/naturalcrit/splitPane/splitPane.jsx
@@ -11,7 +11,7 @@ const SplitPane = (props)=>{
 	} = props;
 
 	const [isDragging, setIsDragging] = useState(false);
-	const [dividerPos, setDividerPos] = useState(null); // Initial divider position is set to `null`
+	const [dividerPos, setDividerPos] = useState(null);
 	const [moveSource, setMoveSource] = useState(false);
 	const [moveBrew, setMoveBrew] = useState(false);
 	const [showMoveArrows, setShowMoveArrows] = useState(true);
@@ -20,7 +20,7 @@ const SplitPane = (props)=>{
 	// Set initial divider position and liveScroll only after mounting
 	useEffect(()=>{
 		const savedPos = window.localStorage.getItem(storageKey);
-		setDividerPos(savedPos ? parseInt(savedPos, 10) : window.innerWidth / 2);
+		setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
 		setLiveScroll(window.localStorage.getItem('liveScroll') === 'true');
 
 		window.addEventListener('resize', handleResize);
@@ -29,8 +29,8 @@ const SplitPane = (props)=>{
 
 	const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
 
-	const handleResize = ()=>setDividerPos((pos)=>limitPosition(pos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
-
+	const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
+	
 	const handleUp =(e)=>{
 		e.preventDefault();
 		if(isDragging) {
@@ -84,7 +84,7 @@ const SplitPane = (props)=>{
 			</div>
 		</div>
 	);
-
+	
 	return (
 		<div className='splitPane' onPointerMove={handleMove} onPointerUp={handleUp}>
 			<Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}>