diff --git a/src/components/ArtifactsPreview/ArtifactsPreview.js b/src/components/ArtifactsPreview/ArtifactsPreview.js
index a7d81b23bd..fb43f498dd 100644
--- a/src/components/ArtifactsPreview/ArtifactsPreview.js
+++ b/src/components/ArtifactsPreview/ArtifactsPreview.js
@@ -21,10 +21,13 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
+import Accordion from '../../common/Accordion/Accordion'
 import ArtifactsPreviewView from './ArtifactsPreviewView'
 import Loader from '../../common/Loader/Loader'
 import NoData from '../../common/NoData/NoData'
 
+import { ReactComponent as Arrow } from 'igz-controls/images/arrow.svg'
+
 const ArtifactsPreview = ({ className, extraData, noData, preview, showExtraDataLoader }) => {
   const [showErrorBody, setShowErrorBody] = useState(false)
   const artifactsPreviewClasses = classnames('artifact-preview', className)
@@ -50,14 +53,20 @@ const ArtifactsPreview = ({ className, extraData, noData, preview, showExtraData
         <div className="artifact-extra-data">
           <h1 className="artifact-extra-data__header">Extra Data</h1>
           {extraData.map((extraDataItem, index) => (
-            <ArtifactsPreviewView
-              className={artifactsPreviewClasses}
-              key={index}
-              preview={extraDataItem}
-              setShowErrorBody={setShowErrorBody}
-              showAccordion
-              showErrorBody={showErrorBody}
-            />
+            <Accordion
+              icon={<Arrow />}
+              iconClassName="expand-icon"
+              alwaysOpened={false}
+              openByDefault={false}
+            >
+              <ArtifactsPreviewView
+                className={artifactsPreviewClasses}
+                key={index}
+                preview={extraDataItem}
+                setShowErrorBody={setShowErrorBody}
+                showErrorBody={showErrorBody}
+              />
+            </Accordion>
           ))}
         </div>
       )}
diff --git a/src/components/ArtifactsPreview/ArtifactsPreviewView.js b/src/components/ArtifactsPreview/ArtifactsPreviewView.js
index f93b9bebf4..07762a9575 100644
--- a/src/components/ArtifactsPreview/ArtifactsPreviewView.js
+++ b/src/components/ArtifactsPreview/ArtifactsPreviewView.js
@@ -21,24 +21,15 @@ import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import Prism from 'prismjs'
 
-import Accordion from '../../common/Accordion/Accordion'
 import DetailsResults from '../DetailsResults/DetailsResults'
 import PreviewError from './PreviewError/PreviewError'
 import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'
 
-import { ReactComponent as Arrow } from 'igz-controls/images/arrow.svg'
-
 import { ARTIFACT_PREVIEW_TABLE_ROW_LIMIT } from '../../constants'
 
 import './artifactsPreview.scss'
 
-const ArtifactsPreviewView = ({
-  className,
-  preview,
-  setShowErrorBody,
-  showAccordion,
-  showErrorBody
-}) => {
+const ArtifactsPreviewView = ({ className, preview, setShowErrorBody, showErrorBody }) => {
   const content = useMemo(
     () =>
       preview.data && preview.data.content
@@ -49,127 +40,109 @@ const ArtifactsPreviewView = ({
 
   return (
     !preview?.hidden && (
-      <Accordion
-        icon={showAccordion ? <Arrow /> : null}
-        iconClassName="expand-icon"
-        alwaysOpened={!showAccordion}
-        openByDefault={!showAccordion}
-      >
-        <div className="artifact-preview__wrapper">
-          {preview.header && (
-            <div className="artifact-preview__header">
-              <h5 className="artifact-preview__header-title">{preview.header}</h5>
-            </div>
-          )}
-          <div className={className}>
-            {preview?.type === 'error' ? (
-              <PreviewError
-                error={preview.error}
-                setShowErrorBody={setShowErrorBody}
-                showErrorBody={showErrorBody}
-              />
-            ) : (
-              <>
-                {preview?.type === 'table-results' && (
-                  <div className="artifact-preview__table">
-                    <DetailsResults job={preview} excludeSortBy="state" defaultDirection="desc" />
+      <div className="artifact-preview__wrapper">
+        {preview.header && (
+          <div className="artifact-preview__header">
+            <h5 className="artifact-preview__header-title">{preview.header}</h5>
+          </div>
+        )}
+        <div className={className}>
+          {preview?.type === 'error' ? (
+            <PreviewError
+              error={preview.error}
+              setShowErrorBody={setShowErrorBody}
+              showErrorBody={showErrorBody}
+            />
+          ) : (
+            <>
+              {preview?.type === 'table-results' && (
+                <div className="artifact-preview__table">
+                  <DetailsResults job={preview} excludeSortBy="state" defaultDirection="desc" />
+                </div>
+              )}
+              {preview?.type === 'table' && (
+                <div className="artifact-preview__table">
+                  <div className="artifact-preview__table-row artifact-preview__table-header">
+                    {preview.data.headers.map((header, index) => {
+                      return (
+                        <div key={`${header}${index}`} className="artifact-preview__table-content">
+                          <Tooltip template={<TextTooltipTemplate text={header} />}>
+                            {header}
+                          </Tooltip>
+                        </div>
+                      )
+                    })}
                   </div>
-                )}
-                {preview?.type === 'table' && (
-                  <div className="artifact-preview__table">
-                    <div className="artifact-preview__table-row artifact-preview__table-header">
-                      {preview.data.headers.map((header, index) => {
-                        return (
-                          <div
-                            key={`${header}${index}`}
-                            className="artifact-preview__table-content"
-                          >
-                            <Tooltip template={<TextTooltipTemplate text={header} />}>
-                              {header}
-                            </Tooltip>
-                          </div>
-                        )
-                      })}
-                    </div>
-                    <div className="artifact-preview__table-body">
-                      {content.map((contentItem, index) => (
-                        <div key={index} className="artifact-preview__table-row">
-                          {Array.isArray(contentItem) ? (
-                            contentItem.map(value => (
-                              <Tooltip
-                                className="artifact-preview__table-content"
-                                key={`${value}${Math.random()}`}
-                                template={<TextTooltipTemplate text={`${value}`} />}
-                              >
-                                {typeof value === 'object' && value !== null
-                                  ? JSON.stringify(value)
-                                  : String(value)}
-                              </Tooltip>
-                            ))
-                          ) : (
+                  <div className="artifact-preview__table-body">
+                    {content.map((contentItem, index) => (
+                      <div key={index} className="artifact-preview__table-row">
+                        {Array.isArray(contentItem) ? (
+                          contentItem.map(value => (
                             <Tooltip
                               className="artifact-preview__table-content"
-                              template={<TextTooltipTemplate text={contentItem} />}
+                              key={`${value}${Math.random()}`}
+                              template={<TextTooltipTemplate text={`${value}`} />}
                             >
-                              {contentItem}
+                              {typeof value === 'object' && value !== null
+                                ? JSON.stringify(value)
+                                : String(value)}
                             </Tooltip>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-                {preview?.type === 'text' && <div>{preview?.data.content}</div>}
-                {preview?.type === 'html' && (
-                  <iframe srcDoc={preview?.data.content} frameBorder="0" title="Preview" />
-                )}
-                {preview?.type === 'json' && (
-                  <div className="json">
-                    <pre className="json-content">
-                      <code
-                        dangerouslySetInnerHTML={{
-                          __html: Prism.highlight(
-                            preview?.data.content,
-                            Prism.languages.json,
-                            'json'
-                          )
-                        }}
-                      />
-                    </pre>
-                  </div>
-                )}
-                {preview?.type === 'yaml' && (
-                  <div className="json">
-                    <pre className="json-content">
-                      <code
-                        dangerouslySetInnerHTML={{
-                          __html: Prism.highlight(
-                            preview?.data.content,
-                            Prism.languages.yaml,
-                            'yaml'
-                          )
-                        }}
-                      />
-                    </pre>
-                  </div>
-                )}
-                {preview?.type === 'image' && (
-                  <img
-                    className="artifact-preview__image"
-                    src={preview?.data?.content}
-                    alt="preview"
-                  />
-                )}
-                {preview?.type === 'unknown' && (
-                  <div className="artifact-preview__no-data">
-                    {preview?.data?.content ? preview?.data.content : 'No preview'}
+                          ))
+                        ) : (
+                          <Tooltip
+                            className="artifact-preview__table-content"
+                            template={<TextTooltipTemplate text={contentItem} />}
+                          >
+                            {contentItem}
+                          </Tooltip>
+                        )}
+                      </div>
+                    ))}
                   </div>
-                )}
-              </>
-            )}
-          </div>
+                </div>
+              )}
+              {preview?.type === 'text' && <div>{preview?.data.content}</div>}
+              {preview?.type === 'html' && (
+                <iframe srcDoc={preview?.data.content} frameBorder="0" title="Preview" />
+              )}
+              {preview?.type === 'json' && (
+                <div className="json">
+                  <pre className="json-content">
+                    <code
+                      dangerouslySetInnerHTML={{
+                        __html: Prism.highlight(preview?.data.content, Prism.languages.json, 'json')
+                      }}
+                    />
+                  </pre>
+                </div>
+              )}
+              {preview?.type === 'yaml' && (
+                <div className="json">
+                  <pre className="json-content">
+                    <code
+                      dangerouslySetInnerHTML={{
+                        __html: Prism.highlight(preview?.data.content, Prism.languages.yaml, 'yaml')
+                      }}
+                    />
+                  </pre>
+                </div>
+              )}
+              {preview?.type === 'image' && (
+                <img
+                  className="artifact-preview__image"
+                  src={preview?.data?.content}
+                  alt="preview"
+                />
+              )}
+              {preview?.type === 'unknown' && (
+                <div className="artifact-preview__no-data">
+                  {preview?.data?.content ? preview?.data.content : 'No preview'}
+                </div>
+              )}
+            </>
+          )}
         </div>
-      </Accordion>
+      </div>
     )
   )
 }
diff --git a/src/components/DetailsPreview/DetailsPreview.js b/src/components/DetailsPreview/DetailsPreview.js
index bffd622732..1b487668fa 100644
--- a/src/components/DetailsPreview/DetailsPreview.js
+++ b/src/components/DetailsPreview/DetailsPreview.js
@@ -98,7 +98,9 @@ const DetailsPreview = ({ artifact, handlePreview }) => {
           extraData={extraData}
           noData={noData}
           preview={preview}
-          showExtraDataLoader={artifact.extra_data && extraData.length !== artifact.extra_data.length}
+          showExtraDataLoader={
+            artifact.extra_data && extraData.length !== artifact.extra_data.length
+          }
         />
       </div>
     </div>
diff --git a/src/components/DetailsResults/DetailsResults.js b/src/components/DetailsResults/DetailsResults.js
index 9d726e1082..4d13ab9fbb 100644
--- a/src/components/DetailsResults/DetailsResults.js
+++ b/src/components/DetailsResults/DetailsResults.js
@@ -63,128 +63,120 @@ const DetailsResults = ({ allowSortBy, defaultSortBy, defaultDirection, excludeS
     <NoData />
   ) : (
     <div className="table__item-results">
-      <div className="table__content">
-        <div className="table__wrapper">
-          <table className="table results-table" cellPadding="0" cellSpacing="0">
-            {job.iterationStats && job.iterationStats.length !== 0 && !job.error ? (
-              <>
-                <thead className="table-header">
-                  <tr className="table-row">
-                    {sortedTableHeaders.map(
-                      ({ headerLabel, headerId, isSortable, ...tableItem }) => {
-                        return (
-                          <th
-                            className={getHeaderCellClasses(headerId, isSortable)}
-                            key={`${headerId}`}
-                            onClick={isSortable ? () => sortTable(headerId) : null}
-                          >
-                            <Tooltip template={<TextTooltipTemplate text={headerLabel} />}>
-                              <label className="sortable-header-label">
-                                <span className="data-ellipsis">{headerLabel}</span>
-                                {isSortable && getSortingIcon(headerId)}
-                              </label>
-                            </Tooltip>
-                            {tableItem.tip && <Tip text={tableItem.tip} />}
-                          </th>
-                        )
-                      }
-                    )}
-                  </tr>
-                </thead>
-                <tbody className="table-body">
-                  {sortedTableContent.map((tableContentItem, index) => (
-                    <tr className="table-row parent-row" key={index}>
-                      {tableContentItem.map((contentItemValue, idx) => {
-                        if (
-                          typeof value === 'string' &&
-                          contentItemValue.match(/completed|running|error/gi)
-                        ) {
-                          return (
-                            <td className="table-body-cell" key={`${contentItemValue}-${idx}`}>
-                              <Tooltip
-                                template={
-                                  <TextTooltipTemplate
-                                    text={`${contentItemValue[0].toUpperCase()}${contentItemValue.slice(
-                                      1
-                                    )}`}
-                                  />
-                                }
-                              >
-                                <i className={contentItemValue} />
-                              </Tooltip>
-                            </td>
-                          )
-                        } else if (
-                          job.results &&
-                          contentItemValue === job.results.best_iteration &&
-                          idx === 0
-                        ) {
-                          return (
-                            <td
-                              key={`${contentItemValue}-${idx}`}
-                              className="results-table__medal table-body-cell"
-                            >
-                              <span>{contentItemValue}</span>
-                              <Tooltip
-                                template={<TextTooltipTemplate text={'Best iteration'} />}
-                                className="best-iteration"
-                              >
-                                <BestIteration />
-                              </Tooltip>
-                            </td>
-                          )
-                        } else {
-                          return (
-                            <td className="table-body-cell" key={`${contentItemValue}-${idx}`}>
-                              <Tooltip
-                                className="data-ellipsis"
-                                template={
-                                  <TextTooltipTemplate text={contentItemValue.toString()} />
-                                }
-                              >
-                                {roundFloats(contentItemValue, 4)}
-                              </Tooltip>
-                            </td>
-                          )
-                        }
-                      })}
-                    </tr>
-                  ))}
-                </tbody>
-              </>
-            ) : job.iterations?.length === 0 && Object.keys(job.results ?? {}).length !== 0 ? (
-              <tbody className="table-body">
-                {Object.keys(job.results).map(key => {
-                  const resultValue = isObjectLike(job.results[key])
-                    ? JSON.stringify(job.results[key])
-                    : job.results[key]
-
+      <table className="table results-table" cellPadding="0" cellSpacing="0">
+        {job.iterationStats && job.iterationStats.length !== 0 && !job.error ? (
+          <>
+            <thead className="table-header">
+              <tr className="table-row">
+                {sortedTableHeaders.map(({ headerLabel, headerId, isSortable, ...tableItem }) => {
                   return (
-                    <tr key={key} className="table-row">
-                      <td className="table-body-cell table-cell-wide">
-                        <Tooltip
-                          className="data-ellipsis"
-                          template={<TextTooltipTemplate text={key} />}
-                        >
-                          {key}
-                        </Tooltip>
-                      </td>
-                      <td className="table-body-cell table-cell-full">
-                        <Tooltip
-                          className="data-ellipsis"
-                          template={<TextTooltipTemplate text={resultValue} />}
-                        >
-                          {resultValue}
-                        </Tooltip>
-                      </td>
-                    </tr>
+                    <th
+                      className={getHeaderCellClasses(headerId, isSortable)}
+                      key={`${headerId}`}
+                      onClick={isSortable ? () => sortTable(headerId) : null}
+                    >
+                      <Tooltip template={<TextTooltipTemplate text={headerLabel} />}>
+                        <label className="sortable-header-label">
+                          <span className="data-ellipsis">{headerLabel}</span>
+                          {isSortable && getSortingIcon(headerId)}
+                        </label>
+                      </Tooltip>
+                      {tableItem.tip && <Tip text={tableItem.tip} />}
+                    </th>
                   )
                 })}
-              </tbody>
-            ) : null}
-          </table>
-        </div>
-      </div>
+              </tr>
+            </thead>
+            <tbody className="table-body">
+              {sortedTableContent.map((tableContentItem, index) => (
+                <tr className="table-row parent-row" key={index}>
+                  {tableContentItem.map((contentItemValue, idx) => {
+                    if (
+                      typeof value === 'string' &&
+                      contentItemValue.match(/completed|running|error/gi)
+                    ) {
+                      return (
+                        <td className="table-body-cell" key={`${contentItemValue}-${idx}`}>
+                          <Tooltip
+                            template={
+                              <TextTooltipTemplate
+                                text={`${contentItemValue[0].toUpperCase()}${contentItemValue.slice(
+                                  1
+                                )}`}
+                              />
+                            }
+                          >
+                            <i className={contentItemValue} />
+                          </Tooltip>
+                        </td>
+                      )
+                    } else if (
+                      job.results &&
+                      contentItemValue === job.results.best_iteration &&
+                      idx === 0
+                    ) {
+                      return (
+                        <td
+                          key={`${contentItemValue}-${idx}`}
+                          className="results-table__medal table-body-cell"
+                        >
+                          <span>{contentItemValue}</span>
+                          <Tooltip
+                            template={<TextTooltipTemplate text={'Best iteration'} />}
+                            className="best-iteration"
+                          >
+                            <BestIteration />
+                          </Tooltip>
+                        </td>
+                      )
+                    } else {
+                      return (
+                        <td className="table-body-cell" key={`${contentItemValue}-${idx}`}>
+                          <Tooltip
+                            className="data-ellipsis"
+                            template={<TextTooltipTemplate text={contentItemValue.toString()} />}
+                          >
+                            {roundFloats(contentItemValue, 4)}
+                          </Tooltip>
+                        </td>
+                      )
+                    }
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </>
+        ) : job.iterations?.length === 0 && Object.keys(job.results ?? {}).length !== 0 ? (
+          <tbody className="table-body">
+            {Object.keys(job.results).map(key => {
+              const resultValue = isObjectLike(job.results[key])
+                ? JSON.stringify(job.results[key])
+                : job.results[key]
+
+              return (
+                <tr key={key} className="table-row">
+                  <td className="table-body-cell table-cell-wide">
+                    <Tooltip
+                      className="data-ellipsis"
+                      template={<TextTooltipTemplate text={key} />}
+                    >
+                      {key}
+                    </Tooltip>
+                  </td>
+                  <td className="table-body-cell table-cell-full">
+                    <Tooltip
+                      className="data-ellipsis"
+                      template={<TextTooltipTemplate text={resultValue} />}
+                    >
+                      {resultValue}
+                    </Tooltip>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        ) : null}
+      </table>
     </div>
   )
 }
diff --git a/src/scss/main.scss b/src/scss/main.scss
index db11410368..66c30a9557 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -213,7 +213,6 @@ main {
   flex: 1;
   position: relative;
   text-align: left;
-  width: 100%;
 
   .table {
     &-row {
diff --git a/src/utils/createArtifactPreviewContent.js b/src/utils/createArtifactPreviewContent.js
index da9dcbcb8a..199f5c52c3 100644
--- a/src/utils/createArtifactPreviewContent.js
+++ b/src/utils/createArtifactPreviewContent.js
@@ -19,6 +19,10 @@ such restriction.
 */
 import { has, isString } from 'lodash'
 
+const splitStringToArray = str => {
+  return str.split(/,(?! )/g)
+}
+
 export const createArtifactPreviewContent = (res, fileFormat, path, artifactName) => {
   const artifact = {}
 
@@ -30,13 +34,13 @@ export const createArtifactPreviewContent = (res, fileFormat, path, artifactName
       let content = data.slice(1)
 
       content.pop()
-      content = content.map(item => item.split(','))
+      content = content.map(item => splitStringToArray(item))
       artifact.type = 'table-results'
       artifact.iterationStats = [headers].concat(content)
     } else {
       let content = data.slice(1)
 
-      content = content.map(item => item.split(','))
+      content = content.map(item => splitStringToArray(item))
       content.pop()
       artifact.type = 'table'
       artifact.data = {