diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte
index 96160a7e13..cfd1fdc1c1 100644
--- a/src/lib/components/chat/ChatControls.svelte
+++ b/src/lib/components/chat/ChatControls.svelte
@@ -39,7 +39,11 @@
 
 	export const openPane = () => {
 		if (parseInt(localStorage?.chatControlsSize)) {
-			pane.resize(parseInt(localStorage?.chatControlsSize));
+			const container = document.getElementById('chat-container');
+			let size = Math.floor(
+				(parseInt(localStorage?.chatControlsSize) / container.clientWidth) * 100
+			);
+			pane.resize(size);
 		} else {
 			pane.resize(minSize);
 		}
@@ -91,7 +95,7 @@
 		const resizeObserver = new ResizeObserver((entries) => {
 			for (let entry of entries) {
 				const width = entry.contentRect.width;
-				// calculate the percentage of 200px
+				// calculate the percentage of 350px
 				const percentage = (350 / width) * 100;
 				// set the minSize to the percentage, must be an integer
 				minSize = Math.floor(percentage);
@@ -99,6 +103,13 @@
 				if ($showControls) {
 					if (pane && pane.isExpanded() && pane.getSize() < minSize) {
 						pane.resize(minSize);
+					} else {
+						let size = Math.floor(
+							(parseInt(localStorage?.chatControlsSize) / container.clientWidth) * 100
+						);
+						if (size < minSize) {
+							pane.resize(minSize);
+						}
 					}
 				}
 			}
@@ -217,7 +228,11 @@
 					if (size < minSize) {
 						localStorage.chatControlsSize = 0;
 					} else {
-						localStorage.chatControlsSize = size;
+						// save the size in  pixels to localStorage
+						const container = document.getElementById('chat-container');
+						localStorage.chatControlsSize = Math.floor((size / 100) * container.clientWidth);
+
+						console.log('saved size', localStorage.chatControlsSize);
 					}
 				}
 			}}