Merge: - client: fix font size of whois info

Closes #1059

* commit '271ff4fe8358eed5de3bbeb76ab9ec7a6a369b89':
  - client: fix popover in the dashboard tables
  - client: fix font size of whois info

client/src/components/Dashboard/Dashboard.css

@@ -1,10 +1,11 @@
 .stats__table .popover__body {
-    left: 0;
+    left: -10px;
+    min-width: 270px;
     transform: none;
 }
 
 .stats__table .popover__body:after {
-    left: 13px;
+    left: 23px;
 }
 
 .stats__table .rt-tr-group:first-child .popover__body,

client/src/components/Dashboard/DomainCell.js

@@ -9,7 +9,7 @@ const DomainCell = ({ value }) => {
 
     return (
         <div className="logs__row">
-            <div className="logs__text" title={value}>
+            <div className="logs__text logs__text--domain" title={value}>
                 {value}
             </div>
             {trackerData && <Popover data={trackerData} />}

client/src/components/Logs/Logs.css

@@ -41,11 +41,20 @@
     width: 100%;
 }
 
-.logs__text--wrap {
+.logs__text--domain {
+    max-width: 285px;
+}
+
+.logs__text--wrap,
+.logs__text--whois {
     line-height: 1.4;
     white-space: normal;
 }
 
+.logs__text--whois {
+    line-height: 1.2;
+}
+
 .logs__row .tooltip-custom {
     top: 0;
     margin-left: 0;
@@ -152,11 +161,13 @@
 
 .logs__whois {
     display: inline;
+    font-size: 12px;
 }
 
 .logs__whois::after {
     content: "|";
     padding: 0 5px;
+    opacity: 0.3;
 }
 
 .logs__whois:last-child::after {
@@ -166,8 +177,8 @@
 .logs__whois-icon.icons {
     position: relative;
     top: -2px;
-    width: 16px;
+    width: 12px;
-    height: 16px;
+    height: 12px;
-    margin-right: 2px;
+    margin-right: 1px;
-    opacity: 0.6;
+    opacity: 0.5;
 }

client/src/helpers/formatClientCell.js

@@ -38,7 +38,7 @@ export const formatClientCell = (value, clients, autoClients, t) => {
 
     if (whois) {
         whoisContainer = (
-            <div className="logs__text logs__text--wrap mt-1">
+            <div className="logs__text logs__text--wrap logs__text--whois">
                 {getFormattedWhois(whois, t)}
             </div>
         );