fix tooltip styles

client/src/components/Logs/Logs.css

@@ -1,7 +1,26 @@
-.rt-tr-group .red {
+.logs__row {
-    background-color: #fff4f2;
+    display: flex;
+    align-items: center;
 }
 
-.ReactTable .rt-th, .ReactTable .rt-td {
+.logs__row--overflow {
-    overflow: visible;
+    overflow: hidden;
+}
+
+.logs__row .list-unstyled {
+    margin-bottom: 0;
+    overflow: hidden;
+}
+
+.logs__text,
+.logs__row .list-unstyled li {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.logs__row .tooltip-custom {
+    top: 0;
+    margin-left: 0;
+    margin-right: 5px;
 }

client/src/components/Logs/index.js

@@ -5,9 +5,8 @@ import { saveAs } from 'file-saver/FileSaver';
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
 import Loading from '../ui/Loading';
-import './Logs.css';
 import Tooltip from '../ui/Tooltip';
-
+import './Logs.css';
 
 const DOWNLOAD_LOG_FILENAME = 'dns-logs.txt';
 
@@ -37,14 +36,25 @@ class Logs extends Component {
         const columns = [{
             Header: 'Time',
             accessor: 'time',
-            maxWidth: 150,
+            maxWidth: 110,
         }, {
             Header: 'Domain name',
             accessor: 'domain',
+            Cell: (row) => {
+                const response = row.value;
+
+                return (
+                    <div className="logs__row logs__row--overflow" title={response}>
+                        <div className="logs__text">
+                            {response}
+                        </div>
+                    </div>
+                );
+            },
         }, {
             Header: 'Type',
             accessor: 'type',
-            maxWidth: 100,
+            maxWidth: 60,
         }, {
             Header: 'Response',
             accessor: 'response',
@@ -54,20 +64,25 @@ class Logs extends Component {
                 const rule = row && row.original && row.original.rule;
                 if (responses.length > 0) {
                     const liNodes = responses.map((response, index) =>
-                        (<li key={index}>{response}</li>));
+                        (<li key={index} title={response}>{response}</li>));
-                    return (<React.Fragment>
+                    return (
+                        <div className="logs__row">
                             { this.renderTooltip(isFiltered, rule)}
                             <ul className="list-unstyled">{liNodes}</ul>
-                        </React.Fragment>);
+                        </div>
+                    );
                 }
-                return (<React.Fragment>
+                return (
-                    { this.renderTooltip(isFiltered, rule) }
+                    <div className="logs__row">
-                    <span>Empty</span>
+                        { this.renderTooltip(isFiltered, rule) }
-                </React.Fragment>);
+                        <span>Empty</span>
+                    </div>
+                );
             },
         }, {
             Header: 'Client',
             accessor: 'client',
+            maxWidth: 250,
         },
         ];
 

client/src/components/ui/ReactTable.css

@@ -1,4 +1,9 @@
 .ReactTable .rt-th,
 .ReactTable .rt-td {
     padding: 10px 15px;
+    overflow: visible;
+}
+
+.rt-tr-group .red {
+    background-color: #fff4f2;
 }

client/src/components/ui/Tooltip.css

@@ -5,6 +5,7 @@
     vertical-align: middle;
     width: 18px;
     height: 18px;
+    flex-shrink: 0;
     margin-left: 5px;
     background-image: url("./svg/help-circle.svg");
     background-size: 100%;