Fix Messages layout

src/components/Layout/Layout.module.scss

@@ -95,14 +95,14 @@
 
   >div {
     position: fixed;
-    width: var(--left-col-w);
+    width: var(--right-col-w);
     display: grid;
     grid-template-rows: var(--header-height) 1fr 82px;
     height: 100%;
     border-left: 1px solid var(--devider);
   }
 
-  &.messagesHeader {
+  &.messagesColumn {
     >div {
       border-left: none;
     }
@@ -110,6 +110,7 @@
 }
 
 .messagesSearch {
+  width: calc(var(--right-col-w) + 8px);
   border-right: 1px solid var(--devider);
 }
 
@@ -135,6 +136,14 @@
       height: 52px;
     }
   }
+
+  &.messagesHeader {
+    width: calc(var(--right-col-w) + 8px);
+
+    >div {
+      width: calc(var(--right-col-w) + 8px);
+    }
+  }
 }
 
 .rightContent {

src/components/Layout/Layout.tsx

@@ -136,9 +136,9 @@ const Layout: Component = () => {
         </div>
 
 
-        <div class={`${styles.rightColumn} ${location.pathname.startsWith('/messages') ? styles.messagesHeader : ''}`}>
+        <div class={`${styles.rightColumn} ${location.pathname.startsWith('/messages') ? styles.messagesColumn : ''}`}>
           <div>
-            <div class={styles.rightHeader}>
+            <div class={`${styles.rightHeader} ${location.pathname.startsWith('/messages') ? styles.messagesHeader : ''}`}>
               <div id="search_section" class={location.pathname.startsWith('/messages') ? styles.messagesSearch : ''}>
               </div>
             </div>

src/pages/Messages.module.scss

@@ -57,9 +57,15 @@
 .messagesContent {
   position: relative;
 
+  display: flex;
+  width: calc(var(--left-col-w) + var(--right-col-w) + 424px);
+
+  .senders {
+    width: 334px;
+
     .sendersHeader {
       height: 48px;
-    width: 334px;
+      width: 100%;
       background: none;
       border-radius: 0;
       border: 1px solid var(--devider);
@@ -152,9 +158,11 @@
       display: flex;
       flex-direction: column;
       overflow-y: scroll;
-    width: 334px;
+      overflow-y: overlay;
+      overflow-x: hidden;
+      width: 100%;
       height: calc(100vh - 176px);
-    padding-right: 8px;
+      // padding-right: 8px;
       border-radius: 0;
       border-left: 1px solid var(--devider);
 
@@ -170,6 +178,7 @@
         border-bottom: 1px solid var(--devider);
         margin-bottom: 0px;
         align-items: center;
+        width: 334px;
 
         &:hover, &.selected, &.focus {
           background-color: var(--background-input);
@@ -226,15 +235,12 @@
         }
       }
     }
+  }
+
 
   .conversation {
-    position: absolute;
-    top: 0;
-    left: 320px;
     background-color: var(--background-card );
-    width: 628px;
     height: calc(100vh - var(--header-height));
-    overflow: hidden;
     display: flex;
     flex-direction: column-reverse;
 
@@ -290,7 +296,7 @@
     .newMessage {
       width: 100%;
       position: relative;
-      vertical-align: bottom;
+      align-items: flex-end;
       display: flex;
       border-radius: 0;
       border: 1px solid var(--devider);
@@ -302,7 +308,7 @@
         padding: 1px;
         border-radius: 8px;
         width: 538px;
-        height: 34px;
+        height: 40px;
         box-sizing: border-box;
 
         textarea {

src/pages/Messages.tsx

@@ -323,37 +323,37 @@ const Messages: Component = () => {
   const onExpandableTextareaInput = () => {
     const maxHeight = 800;
 
-    const elm = newMessageInput as AutoSizedTextArea;
+    const input = newMessageInput as AutoSizedTextArea;
 
-    if(!elm || elm.nodeName !== 'TEXTAREA') {
+    if(!input || input.nodeName !== 'TEXTAREA') {
       return;
     }
 
-    const minRows = parseInt(elm.getAttribute('data-min-rows') || '0');
+    const minRows = parseInt(input.getAttribute('data-min-rows') || '0');
 
-    !elm._baseScrollHeight && getScrollHeight(elm);
+    !input._baseScrollHeight && getScrollHeight(input);
 
 
-    if (elm.scrollHeight >= (maxHeight / 3)) {
+    if (input.scrollHeight >= (maxHeight / 3)) {
       return;
     }
 
-    elm.rows = minRows;
+    input.rows = minRows;
-    const rows = elm.value === '' ? 0 : Math.ceil((elm.scrollHeight - elm._baseScrollHeight) / 20);
+    const rows = input.value === '' ? 0 : Math.ceil((input.scrollHeight - input._baseScrollHeight) / 20);
 
-    elm.rows = minRows + rows;
+    input.rows = minRows + rows;
-    elm.style.height = `${40 + (20 * rows)}px`;
+    input.style.height = `${40 + (20 * rows)}px`;
 
     if (newMessageWrapper) {
       newMessageWrapper.style.height = `${80 + (20 * rows)}px`;
     }
 
     if (newMessageInputBorder) {
-      newMessageInputBorder.style.height = `${82 + (20 * rows)}px`;
+      newMessageInputBorder.style.height = `${42 + (20 * rows)}px`;
     }
 
     // debounce(() => {
-      setMessage(elm.value)
+      setMessage(input.value)
     // }, 300);
 
   }
@@ -909,6 +909,7 @@ const Messages: Component = () => {
 
       <div class={styles.messagesContent}>
 
+        <div class={styles.senders}>
           <div class={styles.sendersHeader}>
             <div class={styles.senderCategorySelector}>
               <button
@@ -981,6 +982,7 @@ const Messages: Component = () => {
               }
             </For>
           </div>
+        </div>
 
         <div class={styles.conversation}>
           <div class={styles.newMessage} ref={newMessageWrapper} >