Merged PR 203: Improve responsive design and refactor layout

src/Components/MessagesSidebar/Messages.tsx

@@ -8,10 +8,10 @@ import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { IMessage } from '../../Interfaces/IMessage';
 import { DISABLE_API } from '../../utils/default';
 import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload';
+import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
 
 interface IMessagesSidebarProps {
   historyState: IHistoryState
-  isOpen: boolean
 }
 
 // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
@@ -45,6 +45,7 @@ function UseAsync(
 ): void {
   React.useEffect(() => {
     const request: IGetFeedbackRequest = {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       ApplicationState: state
     };
     const dataParsed = JSON.stringify(request, GetCircularReplacerKeepDataStructure());
@@ -107,31 +108,24 @@ export function MessagesSidebar(props: IMessagesSidebarProps): JSX.Element {
     </p>);
   }
 
-  const isOpenClasses = props.isOpen ? 'left-16' : '-left-64';
   return (
-    <div className={`fixed z-10 bg-slate-200
-      text-gray-700 transition-all h-full w-64
-      ${isOpenClasses}`}>
-      <div className='bg-slate-100 sidebar-title flex place-content-between'>
-        Messages
-        <button
-          onClick={() => { setMessages([]); }}
-          className='h-6'
-          aria-label='Clear all messages'
-          title='Clear all messages'
-        >
-          <TrashIcon className='heroicon'></TrashIcon>
-        </button>
-      </div>
-      <List
-        className='List md:text-xs font-bold'
-        itemCount={messages.length}
-        itemSize={65}
-        height={window.innerHeight}
-        width={256}
-      >
-        {Row}
-      </List>
-    </div>
+  //       <button
+  //         onClick={() => { setMessages([]); }}
+  //         className='h-6'
+  //         aria-label='Clear all messages'
+  //         title='Clear all messages'
+  //       >
+  //         <TrashIcon className='heroicon'></TrashIcon>
+  //       </button>
+  //     </div>
+    <List
+      className='List md:text-xs font-bold'
+      itemCount={messages.length}
+      itemSize={65}
+      height={window.innerHeight - TITLE_BAR_HEIGHT}
+      width={'100%'}
+    >
+      {Row}
+    </List>
   );
 };