From ccf268baf4d8733cb33745293b818efd9f1636f6 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Tue, 2 Aug 2022 11:58:30 +0300
Subject: [PATCH] Pull request: 4776 add word break for query log domains

Updates #4776

Squashed commit of the following:

commit 6f1778fbd11da529ae934ee33c8f1ad227cdfa66
Merge: 753bd44c 053bb72a
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Aug 2 11:52:07 2022 +0300

    Merge branch 'master' into 4776-domains

commit 753bd44cbb592903ed996713a79e4dbf073d780b
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Aug 1 16:58:07 2022 +0300

    client: add word break for query log domains
---
 client/src/components/Logs/Cells/DomainCell.js   | 4 ++--
 client/src/components/Logs/Cells/IconTooltip.css | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Logs/Cells/DomainCell.js b/client/src/components/Logs/Cells/DomainCell.js
index 620d6711..ab511890 100644
--- a/client/src/components/Logs/Cells/DomainCell.js
+++ b/client/src/components/Logs/Cells/DomainCell.js
@@ -147,11 +147,11 @@ const DomainCell = ({
             />
             <div className={valueClass}>
                 {unicodeName ? (
-                    <div className="text-truncate" title={unicodeName}>
+                    <div className="text-truncate overflow-break-mobile" title={unicodeName}>
                         {unicodeName}
                     </div>
                 ) : (
-                    <div className="text-truncate" title={domain}>
+                    <div className="text-truncate overflow-break-mobile" title={domain}>
                         {domain}
                     </div>
                 )}
diff --git a/client/src/components/Logs/Cells/IconTooltip.css b/client/src/components/Logs/Cells/IconTooltip.css
index ff3f4926..8a84182a 100644
--- a/client/src/components/Logs/Cells/IconTooltip.css
+++ b/client/src/components/Logs/Cells/IconTooltip.css
@@ -19,6 +19,13 @@
     overflow-wrap: break-word;
 }
 
+@media (max-width: 991.98px) {
+    .overflow-break-mobile {
+        white-space: normal !important;
+        overflow-wrap: break-word;
+    }
+}
+
 .grid {
     display: grid;
     grid-template-columns: repeat(2, min-content);