закрепы (нет еще unpin, пофиксил поле ввода)

src/routes/chat/+page.svelte

@@ -32,6 +32,9 @@
 	let scrollableDiv;
 	let answerMessageTextShow = false
 	let answerMessageImgShow = false
+	let imageFile = undefined
+  	let imageShow = false;
+  	$: console.log(imageFile, "картинка")
 	
 	let answerMessage = ""
 	let answerMessageImg = ""
@@ -134,6 +137,7 @@
 
 	function adjustTextareaHeight() {
   const textarea = document.getElementById("msg");
+  //console.log(textarea.scrollHeight)
   if (textarea) {
     textarea.style.height = '1em'; //??
     textarea.style.height = (textarea.scrollHeight > maxRows * 18) ? `${maxRows * 18}px` : `${textarea.scrollHeight}px`; // Limit height based on maxRows and font size
@@ -223,13 +227,9 @@ function helperDivShow(event, id, text, img, username) {
 								"user_id": userId,
   								"id": pickedId
 								}));
-	
+  pinnedMsg = pinnedMsg.filter(pinnedMsg => pinnedMsg.id !== pickedId)
   }
 
-  let imageFile = undefined
-  let imageShow = false;
-  $: console.log(imageFile, "картинка")
-
   function triggerFileInput() {
     imageFile.click();
   }
@@ -409,8 +409,10 @@ function helperDivShow(event, id, text, img, username) {
 						 			  on:input={onInput} name="msg" id="msg"></textarea>
 						
 						 	<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<div class="logoForImageDiv">
 						 		<img class="logoForImage"  src="logoForImage.svg" alt=""
 						      		 on:click={() => document.getElementById('fileInput').click()}>
+							</div>
 
 						</div>
 
@@ -551,20 +553,24 @@ function helperDivShow(event, id, text, img, username) {
 .pinnedMsg{
 	display: flex;
 	width: 90%;
+	margin-bottom: 10px;
 }
 
 .pinDiv{
 	display: flex;
-	width: 100%;
+	//background-color: red;
 }
 
 .pinnedMain{
 	display: flex;
 	flex-direction: column;
-	margin: 10px;
 	width: 100%;
 	height: 100%;
-	margin-bottom: 10px;
+	margin: 0 10px;
+	overflow: auto;
+	scroll-behavior: smooth;
+	
+	//background-color: red;
 }
 
 .nameAnswerDiv > p,img{
@@ -689,18 +695,23 @@ function helperDivShow(event, id, text, img, username) {
 }
 
 .logoForImage{
-	display: flex;
-	justify-self: center;
-	align-self: flex-start;
 	width: 2rem;
 	height: 2rem;
-	padding: 5px;
+}
+
+.logoForImageDiv{
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+	margin-top: -7px;
+	width:  50px;
+	height: 100%;
 	//background-color: red;
 }
 
 .messageImage{
 	padding-bottom: 0px;
-	border-radius: 0 0 10px 10px;
+	border-radius: 10px;
 	max-width: 500px;
 	max-height: 500px;
 }
@@ -738,9 +749,7 @@ padding-bottom: 10px;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	margin-bottom: 10px;
 	overflow: auto;
-	//background-color: red;
 	scroll-behavior: smooth;
 }
 
@@ -752,12 +761,14 @@ padding-bottom: 10px;
 		background:
 			linear-gradient(#101010, #101010) padding-box,
 			var(--gradient) border-box;
+	margin-top: 5px;
 	//padding: 5px;
 	//background-color: red;
 }
 
 #msg{
 	width: 100%;
+	height: 34px;
 	background-color: transparent;
 	border: 0;
 	line-height: 1em;
@@ -769,8 +780,9 @@ padding-bottom: 10px;
 
 .chatDiv{
 	//background-color: red;
-	width: 98%;
-	height: 98%;
+	width: 100%;
+	height: 99%;
+	margin: 0 10px 5px 10px;
 	display: flex;
 	flex-direction: column;
 	align-self: center;