Printing out array on newline instead of using <br/>

frontend/src/components/ScanBlocks.js

@@ -12,7 +12,7 @@ import FiltersBlock from './FiltersBlock';
 const ScanBlocks = () => (
   <>
     <ScreenBlock />
-    <NavigatorBlock />
+    {/* <NavigatorBlock /> */}
     {/* <LocationBlock />
     <ConnectionBlock /> */}
     {/* <FingerprintBlock />

frontend/src/components/TableRow.js

@@ -29,7 +29,9 @@ const TableRow = ({ item }) => {
       <td>{item.title}</td>
       <td>{item.value}</td>
       <td>
-        {parse(item.issues || '')}
+        {item.issues.map((ele) => (
+          <div className="newline">{ele}</div>
+        ))}
         {parse(workerData)}
       </td>
     </tr>

frontend/src/components/main.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 /* eslint-disable dot-notation */
 export {
   getNavigator,
@@ -109,7 +110,12 @@ const getWidth = () => ({
   key: 'width',
   title: 'Width',
   value: window.screen.width,
-  issues: checkScreenProperties('width') + checkWidth(),
+  issues: [
+    checkScreenProperties('width'),
+    checkScreenValue('width'),
+    checkScreenPrototype('width'),
+    checkWidth(),
+  ],
 });
 
 const getOuterWidth = () => ({
@@ -182,13 +188,13 @@ const getNavigator = () => [
 
 const getScreen = () => [
   getWidth(),
-  getAvailWidth(),
-  getOuterWidth(),
-  getHeight(),
-  getAvailHeight(),
-  getOuterHeight(),
-  getPixelDepth(),
-  getColorDepth(),
+  // getAvailWidth(),
+  // getOuterWidth(),
+  // getHeight(),
+  // getAvailHeight(),
+  // getOuterHeight(),
+  // getPixelDepth(),
+  // getColorDepth(),
 ];
 
 // sorts plugins object into comma separated list
@@ -225,26 +231,54 @@ const checkNavigatorProperties = (key) => {
   return list.toString().split(',').join('<br />');
 };
 
+// const checkScreenProperties = (key) => {
+//   const list = [];
+//   if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
+//     list.push('Failed undefined properties');
+//   }
+//   if (
+//     Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
+//   ) {
+//     list.push('Failed descriptor.value undefined');
+//   }
+//   try {
+//     // eslint-disable-next-line no-unused-vars
+//     const check = Screen.prototype[key];
+//     list.push('Failed Navigator.prototype');
+//   } catch (err) {
+//     // eslint-disable-next-line no-unused-vars
+//     const check = '';
+//   }
+
+//   return list.toString().split(',').join('<br />');
+// };
+
 const checkScreenProperties = (key) => {
-  const list = [];
   if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
-    list.push('Failed undefined properties');
+    return 'Failed undefined properties';
   }
+  return null;
+};
+
+const checkScreenValue = (key) => {
   if (
     Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
   ) {
-    list.push('Failed descriptor.value undefined');
+    return 'Failed descriptor.value undefined';
   }
+  return null;
+};
+
+const checkScreenPrototype = (key) => {
   try {
     // eslint-disable-next-line no-unused-vars
     const check = Screen.prototype[key];
-    list.push('Failed Navigator.prototype');
+    return 'Failed Navigator.prototype';
   } catch (err) {
     // eslint-disable-next-line no-unused-vars
     const check = '';
   }
-
-  return list.toString().split(',').join('<br />');
+  return null;
 };
 
 // const checkWindowProperties = (key) => {
@@ -268,7 +302,7 @@ const checkScreenProperties = (key) => {
 
 const checkWidth = () => {
   if (window.screen.availWidth > window.screen.width) {
-    return '<br />Avail width is wider then width';
+    return 'Avail width is wider then width';
   }
   return '';
 };

frontend/src/styles/App.css

@@ -213,6 +213,10 @@ input[type='text'] {
   border: 1px solid var(--issueBorder);
 }
 
+.newline {
+  display: block;
+}
+
 @media screen and (max-width: 500px) {
   .github {
     width: 24px;