From e178cb631f7334230ecb7d53cedd150e72b79467 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Wed, 29 Sep 2021 17:25:22 +0300
Subject: [PATCH] Pull request: client: fix statistics table layout

Squashed commit of the following:

commit 02834e6b7b42793e31fd01cadf0af6da875d556b
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Sep 29 16:47:14 2021 +0300

    client: nowrap

commit b45162a0f20b035c36ceb75cbc2485fa49012628
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Sep 29 16:28:05 2021 +0300

    fix: stats table layout
---
 client/src/components/Dashboard/Counters.js   | 43 ++++++++++++-------
 client/src/components/Dashboard/Dashboard.css | 36 ++++++++++++++++
 2 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Dashboard/Counters.js b/client/src/components/Dashboard/Counters.js
index 6b57484e..2434bb8c 100644
--- a/client/src/components/Dashboard/Counters.js
+++ b/client/src/components/Dashboard/Counters.js
@@ -16,18 +16,31 @@ const Row = ({
         ? <LogsSearchLink response_status={response_status}>{formatNumber(count)}</LogsSearchLink>
         : count;
 
-    return <tr key={label}>
-        <td>
-            <Trans components={translationComponents}>{label}</Trans>
-            <Tooltip content={tooltipTitle} placement="top"
-                     className="tooltip-container tooltip-custom--narrow text-center">
-                <svg className="icons icon--20 icon--lightgray ml-2">
-                    <use xlinkHref="#question" />
-                </svg>
-            </Tooltip>
-        </td>
-        <td className="text-right"><strong>{content}</strong></td>
-    </tr>;
+    return (
+        <div className="counters__row" key={label}>
+            <div className="counters__column">
+                <span className="counters__title">
+                    <Trans components={translationComponents}>
+                        {label}
+                    </Trans>
+                </span>
+                <span className="counters__tooltip">
+                    <Tooltip
+                        content={tooltipTitle}
+                        placement="top"
+                        className="tooltip-container tooltip-custom--narrow text-center"
+                    >
+                        <svg className="icons icon--20 icon--lightgray ml-2">
+                            <use xlinkHref="#question" />
+                        </svg>
+                    </Tooltip>
+                </span>
+            </div>
+            <div className="counters__column counters__column--value">
+                <strong>{content}</strong>
+            </div>
+        </div>
+    );
 };
 
 const Counters = ({ refreshButton, subtitle }) => {
@@ -88,9 +101,9 @@ const Counters = ({ refreshButton, subtitle }) => {
             bodyType="card-table"
             refresh={refreshButton}
         >
-            <table className="table card-table">
-                <tbody>{rows.map(Row)}</tbody>
-            </table>
+            <div className="counters">
+                {rows.map(Row)}
+            </div>
         </Card>
     );
 };
diff --git a/client/src/components/Dashboard/Dashboard.css b/client/src/components/Dashboard/Dashboard.css
index 9e733044..ee36d265 100644
--- a/client/src/components/Dashboard/Dashboard.css
+++ b/client/src/components/Dashboard/Dashboard.css
@@ -49,3 +49,39 @@
         display: block;
     }
 }
+
+.counters__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px solid #dee2e6;
+    padding: 0.75rem 1.5rem;
+}
+
+.counters__column--value {
+    flex-shrink: 0;
+    margin-left: 1.5rem;
+    text-align: right;
+    white-space: nowrap;
+}
+
+@media screen and (min-width: 768px) {
+    .counters__column {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+    }
+
+    .counters__title {
+        display: block;
+        max-width: 100%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .counters__tooltip {
+        display: block;
+        flex-shrink: 0;
+    }
+}