fix: UI bug for user message to take available screen space

src/components/UserMessage.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import user from '../img/user-img.png';
 import { UserResponseList } from './UserResponseList';
 import urlToJSON from './utils/urlToJSON';
@@ -7,14 +7,29 @@ import BackIcon from '../img/back.png';
 
 export default function UserMessage({ setjsonPathMap, jsonPathMap, pathId }) {
   const [userName, setuserName] = useState('Test-User >');
+  const userMessageSection = useRef(null);
+
   useEffect(() => {
     setjsonPathMap(urlToJSON(pathId));
     urlToJSON(pathId);
     setuserName('You');
+    if(userMessageSection.current)
+      applyAvailableHeight()
   }, [pathId, setjsonPathMap]);
 
+  //This function finds the available space and set the user-message parent wrapper height accordingly
+  function applyAvailableHeight(){
+    const windowWidth = window.innerHeight;
+    const userMessageSectionOffset = userMessageSection.current.getBoundingClientRect().top;
+    const userMessageSectionStyle = window.getComputedStyle(userMessageSection.current);
+    let marginOffset = Number.parseInt(userMessageSectionStyle.getPropertyValue('margin-top'));
+    let availableSpace = windowWidth - ( userMessageSectionOffset + 2*marginOffset );
+
+    userMessageSection.current.style.height = `${availableSpace}px`
+  }
+
   return (
-    <div className='user-message-section scroll'>
+    <div className='user-message-section scroll' ref={userMessageSection}>
       {/* Back button link */}
       {/* when pathId===undefined (i.e. First Message) --> Don't render back buttom.  */}
       {pathId !== undefined ? (

src/styles/index.scss

@@ -103,19 +103,18 @@ body {
   display: flex;
   justify-content: flex-end;
   flex-direction: row;
-  height: 50%;
 }
 .user-message {
+  box-sizing: border-box;
   overflow: auto;
   border: solid 0.2em;
   border-color: $greenUtility;
   width: fit-content;
   position: relative;
   border-radius: 10px;
-  max-height: 10em;
-  min-height: 35%;
+  height: fit-content;
+  max-height: 100%;
   padding: 1em;
-  padding-bottom: 0;
   background: $blackPrimary;
   font-size: 1.5em;
   opacity: 0.85;