fixed width and height of error and logs overlay (#34)

* fixed width and height of error and logs overlay

Author: AlexGalichenko

.nvmrc

@@ -0,0 +1 @@
+v16.16.0

CHANGELOG.MD

@@ -1,3 +1,6 @@
+# 0.14.2
+- fixed width and height of error and logs overlay
+
 # 0.14.1
 - fixed stacktrace overlay
 - fixed multiline and data table displaying

README.md

@@ -31,7 +31,7 @@ or pass `--format @qavajs/html-formatter:report.html` in cli
 
 Kudos to https://github.com/epam/UUI for providing components
 
-## Development
+## Development (use nodejs 16)
 
 `npm install`
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@qavajs/html-formatter",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "main": "formatter/formatter.js",
   "scripts": {
     "report:compile": "node test/compile_report.js",

package.json

@@ -5,23 +5,20 @@ import {
     ModalHeader,
     ModalWindow,
     FlexRow,
-    Panel,
-    ScrollBars
+    Panel
 } from '@epam/promo';
 
 export const ErrorModal = (modalProps: any) => {
     return <>
         <ModalBlocker blockerShadow='dark' {...modalProps}>
-            <ModalWindow style={{width: '100%', margin: 'auto'}}>
+            <ModalWindow style={{width: '90vw', margin: 'auto', height: '60vh'}}>
                 <Panel background="white">
                     <ModalHeader title="Error" onClose={() => modalProps.success('close')}/>
-                    <ScrollBars hasTopShadow hasBottomShadow>
                         <FlexRow padding='24'>
-                            <pre style={{width: '100%'}}>
+                            <pre style={{width: '100%', overflow: 'auto'}}>
                                 {modalProps.error}
                             </pre>
                         </FlexRow>
-                    </ScrollBars>
                     <ModalFooter/>
                 </Panel>
             </ModalWindow>

src/components/ErrorModal.tsx

@@ -5,23 +5,20 @@ import {
     ModalHeader,
     ModalWindow,
     FlexRow,
-    Panel,
-    ScrollBars
+    Panel
 } from '@epam/promo';
 
 export const LogsModal = (modalProps: any) => {
     return <>
         <ModalBlocker blockerShadow='dark' {...modalProps}>
-            <ModalWindow style={{width: '100%', margin: 'auto'}}>
+            <ModalWindow style={{width: '90vw', margin: 'auto', height: '60vh'}}>
                 <Panel background="white">
                     <ModalHeader title="Logs" onClose={() => modalProps.success('close')}/>
-                    <ScrollBars hasTopShadow hasBottomShadow>
                         <FlexRow padding='24'>
-                            <pre style={{width: '100%'}}>
+                            <pre style={{width: '100%', overflow: 'auto'}}>
                                 {modalProps.logs.map((log: any, index: number) => <div key={index}>{log.data}</div>)}
                             </pre>
                         </FlexRow>
-                    </ScrollBars>
                     <ModalFooter/>
                 </Panel>
             </ModalWindow>