refac: styling

src/lib/components/channel/MessageInput.svelte

@@ -554,7 +554,7 @@
 						</div>
 
 						<div class=" flex justify-between mb-2.5 mt-1.5 mx-0.5">
-							<div class="ml-1 self-end flex space-x-1">
+							<div class="ml-1 self-end flex space-x-1 flex-1">
 								<slot name="menu">
 									{#if acceptFiles}
 										<InputMenu

src/lib/components/notes/NoteEditor/Chat/Message.svelte

@@ -85,6 +85,7 @@
 			</div>
 		{:else if message?.edit === true}
 			<Textarea
+				className="w-full bg-transparent outline-hidden text-sm resize-none overflow-hidden"
 				placeholder={$i18n.t(`Enter {{role}} message here`, {
 					role: message.role === 'user' ? $i18n.t('a user') : $i18n.t('an assistant')
 				})}

src/lib/components/notes/NotePanel.svelte

@@ -8,7 +8,7 @@
 	export let show = false;
 	export let pane = null;
 
-	export let containerId = 'note-editor';
+	export let containerId = 'note-container';
 
 	let mediaQuery;
 	let largeScreen = false;
@@ -25,11 +25,37 @@
 	};
 
 	onMount(() => {
-		// listen to resize 1024px
+		// listen to resize 1000px
-		mediaQuery = window.matchMedia('(min-width: 1024px)');
+		mediaQuery = window.matchMedia('(min-width: 1000px)');
 
 		mediaQuery.addEventListener('change', handleMediaQuery);
 		handleMediaQuery(mediaQuery);
+
+		// Select the container element you want to observe
+		const container = document.getElementById(containerId);
+
+		// initialize the minSize based on the container width
+		minSize = Math.floor((400 / container.clientWidth) * 100);
+
+		// Create a new ResizeObserver instance
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (let entry of entries) {
+				const width = entry.contentRect.width;
+				// calculate the percentage of 200px
+				const percentage = (400 / width) * 100;
+				// set the minSize to the percentage, must be an integer
+				minSize = Math.floor(percentage);
+
+				// if ($showControls) {
+				// 	if (pane && pane.isExpanded() && pane.getSize() < minSize) {
+				// 		pane.resize(minSize);
+				// 	}
+				// }
+			}
+		});
+
+		// Start observing the container's size changes
+		resizeObserver.observe(container);
 	});
 
 	onDestroy(() => {
@@ -61,8 +87,8 @@
 
 	<Pane
 		bind:pane
-		defaultSize={35}
+		defaultSize={20}
-		minSize={35}
+		{minSize}
 		onCollapse={() => {
 			show = false;
 		}}

src/routes/(app)/notes/[id]/+page.svelte

@@ -3,4 +3,6 @@
 	import NoteEditor from '$lib/components/notes/NoteEditor.svelte';
 </script>
 
+<div id="note-container" class="w-full h-full">
 	<NoteEditor id={$page.params.id} />
+</div>