fix(ui) - header rows multiline

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

@@ -2,7 +2,7 @@
 //import cn from 'classnames';
 import { getRE } from 'App/utils';
 import { Label, NoContent, Input, SlideModal, CloseButton } from 'UI';
-import { connectPlayer } from 'Player';
+import { connectPlayer, pause } from 'Player';
 import Autoscroll from '../Autoscroll';
 import BottomBlock from '../BottomBlock';
 import TimeTable from '../TimeTable';
@@ -20,6 +20,7 @@ export default class Fetch extends React.PureComponent {
   onFilterChange = (e, { value }) => this.setState({ filter: value })
 
   setCurrent = (item, index) => {
+    pause()
     this.setState({ current: item, currentIndex: index });
   }
 
@@ -53,7 +54,6 @@ export default class Fetch extends React.PureComponent {
     return (
       <React.Fragment>
         <SlideModal
-          overlay={false}
           right 
           size="middle"
           title={

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

@@ -18,10 +18,8 @@ function Headers(props) {
               {
                 Object.keys(props.requestHeaders).map(h => (
                   <div className={stl.row}>
-                    <div className="mr-2 font-medium">{h}:</div>
-                    <div className="flex-1">
-                      <TextEllipsis text={props.requestHeaders[h]} />
-                    </div>
+                    <span className="mr-2 font-medium">{h}:</span>
+                    <span>{props.requestHeaders[h]}</span>
                   </div>
                 ))
               }
@@ -36,8 +34,8 @@ function Headers(props) {
             {
               Object.keys(props.responseHeaders).map(h => (
                 <div className={stl.row}>
-                  <div className="mr-2 font-medium">{h}:</div>
-                  <div>{props.responseHeaders[h]}</div>
+                  <span className="mr-2 font-medium">{h}:</span>
+                  <span>{props.responseHeaders[h]}</span>
                 </div>
               ))
             }

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

@@ -1,7 +1,8 @@
 .row {
-  display: flex;
+  /* display: flex; */
   padding: 5px 0px;
   font-size: 13px;
+  word-break: break-all;
   /* padding-left: 20px; */
   &:hover {
     background-color: $active-blue;