Merged PR 203: Improve responsive design and refactor layout

src/Components/Symbols/Symbols.tsx

@@ -4,7 +4,6 @@ import { TruncateString } from '../../utils/stringtools';
 
 interface ISymbolsProps {
   componentOptions: IAvailableSymbol[]
-  isOpen: boolean
   buttonOnClick: (type: string) => void
 }
 
@@ -51,16 +50,10 @@ export function Symbols(props: ISymbolsProps): JSX.Element {
     </button>);
   });
 
-  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
-      overflow-y-auto ${isOpenClasses}`}>
-      <div className='bg-slate-100 sidebar-title'>
-          Symbols
-      </div>
+    <div className='h-full overflow-y-auto'>
       <div className='grid grid-cols-1 md:grid-cols-3 gap-2
-         m-2 md:text-xs font-bold'>
+         overflow-auto m-2 md:text-xs font-bold'>
         {listElements}
       </div>
     </div>