fix(ui) - headers two line, fetch body parse, live session msg two lines

frontend/app/components/Session_/Fetch/FetchDetails.js

@@ -26,12 +26,14 @@ export default class FetchDetails extends React.PureComponent {
     try {
       jsonPayload = typeof payload === 'string' ? JSON.parse(payload) : payload
       requestHeaders = jsonPayload.headers
+      jsonPayload.body = typeof jsonPayload.body === 'string' ? JSON.parse(jsonPayload.body) : jsonPayload.body
       delete jsonPayload.headers
     } catch (e) {}
 
     try {
       jsonResponse = typeof response === 'string' ? JSON.parse(response) : response;
       responseHeaders = jsonResponse.headers
+      jsonResponse.body = typeof jsonResponse.body === 'string' ? JSON.parse(jsonResponse.body) : jsonResponse.body
       delete jsonResponse.headers
     } catch (e) {}
     

frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { NoContent } from 'UI'
+import { NoContent, TextEllipsis } from 'UI'
 import stl from './headers.css'
 
 function Headers(props) {
@@ -19,7 +19,9 @@ function Headers(props) {
                 Object.keys(props.requestHeaders).map(h => (
                   <div className={stl.row}>
                     <div className="mr-2 font-medium">{h}:</div>
-                    <div>{props.requestHeaders[h]}</div>
+                    <div className="flex-1">
+                      <TextEllipsis text={props.requestHeaders[h]} />
+                    </div>
                   </div>
                 ))
               }

frontend/app/components/Session_/Fetch/components/Headers/headers.css

@@ -6,4 +6,8 @@
   &:hover {
     background-color: $active-blue;
   }
+
+  & div:last-child  {
+    max-width: 80%;
+  }
 }

frontend/app/components/Session_/Player/Overlay/LiveStatusText.css

@@ -1,4 +1,7 @@
 .text {
   color: $gray-light;
   font-size: 40px;
+  max-width: 680px;
+  line-height: 48px;
+  text-align: center;
 }

frontend/app/components/Session_/Player/Overlay/LiveStatusText.tsx

@@ -7,5 +7,5 @@ interface Props {
 }
 
 export default function LiveStatusText({ text }: Props) {
-  return <div className={ovStl.overlay}><span className={stl.text}>{text}</span></div>
+  return <div className={ovStl.overlay}><div className={stl.text}>{text}</div></div>
 }