From 0eba31ca031a2e712f6a6d00c355bc28635820bb Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Mon, 10 Oct 2022 17:49:19 +0300
Subject: [PATCH] Pull request: 4815 fix table view of the query log modal

Updates #4815

Squashed commit of the following:

commit a547c546a2b3cdbfb6988c910d8a970e0189ae5a
Merge: 3c1e745d f5602d9c
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Oct 10 17:40:38 2022 +0300

    Merge branch 'master' into 4815-tablet-view-fix

commit 3c1e745dc2e34a62be8264ad003b5e6c155bb241
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Oct 10 16:50:10 2022 +0300

    fix mobile view

commit a1d0b36473982854eecf1d96cf5a7033059e7720
Author: Ildar Kamalov <ik@adguard.com>
Date:   Sun Oct 9 17:57:14 2022 +0300

    client: fix styles

commit f34f928e1dbeef5ed37a0de3515be8d12f2241f6
Author: Ildar Kamalov <ik@adguard.com>
Date:   Sun Oct 9 16:59:23 2022 +0300

    client: fix table view of query log modal
---
 .../src/components/Logs/Cells/ClientCell.js   |  2 +-
 .../src/components/Logs/Cells/IconTooltip.css | 27 ++++++++++++++++---
 client/src/components/Logs/Cells/index.js     |  6 ++---
 client/src/components/Logs/Logs.css           |  4 +--
 client/src/components/Logs/index.js           | 19 +++++++------
 5 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Logs/Cells/ClientCell.js b/client/src/components/Logs/Cells/ClientCell.js
index 669f1c0acdc..9467f14ebe3 100644
--- a/client/src/components/Logs/Cells/ClientCell.js
+++ b/client/src/components/Logs/Cells/ClientCell.js
@@ -121,7 +121,7 @@ const ClientCell = ({
                     {options.map(({ name, onClick, disabled }) => (
                         <button
                             key={name}
-                            className="button-action--arrow-option px-4 py-2"
+                            className="button-action--arrow-option px-4 py-1"
                             onClick={onClick}
                             disabled={disabled}
                         >
diff --git a/client/src/components/Logs/Cells/IconTooltip.css b/client/src/components/Logs/Cells/IconTooltip.css
index da7e251dfbe..245c14d9c3a 100644
--- a/client/src/components/Logs/Cells/IconTooltip.css
+++ b/client/src/components/Logs/Cells/IconTooltip.css
@@ -50,9 +50,30 @@
 }
 
 @media (max-width: 1024px) {
-    .grid .key-colon, .grid .title--border {
+    .grid .title--border {
+        margin-bottom: 4px;
         font-weight: 600;
     }
+
+    .grid .key-colon {
+        margin-right: 4px;
+        color: var(--gray-8);
+    }
+
+    .grid__row {
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        margin-bottom: 2px;
+        font-size: 14px;
+        word-break: break-all;
+        overflow: hidden;
+    }
+
+    .grid__row .filteringRules__filter,
+    .grid__row .filteringRules {
+        margin-bottom: 0;
+    }
 }
 
 @media (max-width: 767.98px) {
@@ -100,7 +121,7 @@
 }
 
 .title--border {
-    padding-top: 2rem;
+    padding-top: 1rem;
 }
 
 .title--border:before {
@@ -109,7 +130,7 @@
     left: 0;
     border-top: 0.5px solid var(--gray-d8) !important;
     width: 100%;
-    margin-top: -1rem;
+    margin-top: -0.5rem;
 }
 
 .icon-cross {
diff --git a/client/src/components/Logs/Cells/index.js b/client/src/components/Logs/Cells/index.js
index 05c8bf03f88..aaffeb0732a 100644
--- a/client/src/components/Logs/Cells/index.js
+++ b/client/src/components/Logs/Cells/index.js
@@ -146,7 +146,7 @@ const Row = memo(({
                     type="button"
                     className={
                         classNames(
-                            'button-action--arrow-option',
+                            'button-action--arrow-option mb-1',
                             { 'bg--danger': !isBlocked },
                             { 'bg--green': isFiltered },
                         )}
@@ -158,13 +158,13 @@ const Row = memo(({
         );
 
         const blockForClientButton = <button
-                className='text-center font-weight-bold py-2 button-action--arrow-option'
+                className='text-center font-weight-bold py-1 button-action--arrow-option'
                 onClick={onBlockingForClientClick}>
             {t(blockingForClientKey)}
         </button>;
 
         const blockClientButton = <button
-                className='text-center font-weight-bold py-2 button-action--arrow-option'
+                className='text-center font-weight-bold py-1 button-action--arrow-option'
                 onClick={onBlockingClientClick}
                 disabled={processingSet || lastRuleInAllowlist}>
             {t(blockingClientKey)}
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index 788eef56146..d365478b2a7 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -312,8 +312,8 @@
     border: 0;
     display: block;
     width: 100%;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+    padding-top: 0.2rem;
+    padding-bottom: 0.2rem;
     text-align: center;
     font-weight: 700;
     color: inherit;
diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js
index 2bf899950fe..e9ec100b345 100644
--- a/client/src/components/Logs/index.js
+++ b/client/src/components/Logs/index.js
@@ -47,17 +47,20 @@ const processContent = (data) => Object.entries(data)
             keyClass = '';
         }
 
-        return isHidden ? null : <div key={key}>
-            <div
+        return isHidden ? null : (
+            <div className="grid__row" key={key}>
+                <div
                     className={classNames(`key__${key}`, keyClass, {
                         'font-weight-bold': isBoolean && value === true,
-                    })}>
-                <Trans>{isButton ? value : key}</Trans>
-            </div>
-            <div className={`value__${key} text-pre text-truncate`}>
-                <Trans>{(isTitle || isButton || isBoolean) ? '' : value || '—'}</Trans>
+                    })}
+                >
+                    <Trans>{isButton ? value : key}</Trans>
+                </div>
+                <div className={`value__${key} text-pre text-truncate`}>
+                    <Trans>{(isTitle || isButton || isBoolean) ? '' : value || '—'}</Trans>
+                </div>
             </div>
-        </div>;
+        );
     });
 
 const Logs = () => {