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

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}
                         >

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 {

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)}

client/src/components/Logs/Logs.css

@@ -312,8 +312,8 @@
     border: 0;
     display: block;
     width: 100%;
-    padding-top: 0.5rem;
+    padding-top: 0.2rem;
-    padding-bottom: 0.5rem;
+    padding-bottom: 0.2rem;
     text-align: center;
     font-weight: 700;
     color: inherit;

client/src/components/Logs/index.js

@@ -47,17 +47,20 @@ const processContent = (data) => Object.entries(data)
             keyClass = '';
         }
 
-        return isHidden ? null : <div key={key}>
+        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>
                 </div>
-        </div>;
+            </div>
+        );
     });
 
 const Logs = () => {