From f7dcf18a3d039c73b02e763eefdc209f63d38ea0 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Tue, 20 Sep 2022 13:48:57 +0300
Subject: [PATCH] Pull request: 4815 fix query log modal on tablet

Updates #4815

Squashed commit of the following:

commit 148c39ac40963a593885b86a0c851b4010b68ab0
Merge: 3447611d ab6da05b
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Sep 20 13:21:06 2022 +0300

    Merge branch 'master' into 4815-tablet-view

commit 3447611dc0b1c7d2cc1f8235d1c469dd92736166
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Sep 16 17:01:05 2022 +0300

    client: fix query log modal on tablet
---
 .../src/components/Logs/Cells/ClientCell.js   |  2 +-
 .../src/components/Logs/Cells/DomainCell.js   |  2 +-
 .../src/components/Logs/Cells/IconTooltip.css | 10 ++--
 .../src/components/Logs/Cells/ResponseCell.js |  2 +-
 client/src/components/Logs/Logs.css           | 10 ++++
 client/src/components/Logs/index.js           | 47 +++++++++++--------
 6 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/client/src/components/Logs/Cells/ClientCell.js b/client/src/components/Logs/Cells/ClientCell.js
index 79d4cd4fc6b..669f1c0acdc 100644
--- a/client/src/components/Logs/Cells/ClientCell.js
+++ b/client/src/components/Logs/Cells/ClientCell.js
@@ -62,7 +62,7 @@ const ClientCell = ({
         'white-space--nowrap': isDetailed,
     });
 
-    const hintClass = classNames('icons mr-4 icon--24 icon--lightgray', {
+    const hintClass = classNames('icons mr-4 icon--24 logs__question icon--lightgray', {
         'my-3': isDetailed,
     });
 
diff --git a/client/src/components/Logs/Cells/DomainCell.js b/client/src/components/Logs/Cells/DomainCell.js
index ab511890407..6a186ddaa10 100644
--- a/client/src/components/Logs/Cells/DomainCell.js
+++ b/client/src/components/Logs/Cells/DomainCell.js
@@ -34,7 +34,7 @@ const DomainCell = ({
         'my-3': isDetailed,
     });
 
-    const privacyIconClass = classNames('icons mx-2 icon--24 d-none d-sm-block', {
+    const privacyIconClass = classNames('icons mx-2 icon--24 d-none d-sm-block logs__question', {
         'icon--green': hasTracker,
         'icon--disabled': !hasTracker,
         'my-3': isDetailed,
diff --git a/client/src/components/Logs/Cells/IconTooltip.css b/client/src/components/Logs/Cells/IconTooltip.css
index 8a84182a71d..da7e251dfbe 100644
--- a/client/src/components/Logs/Cells/IconTooltip.css
+++ b/client/src/components/Logs/Cells/IconTooltip.css
@@ -49,6 +49,12 @@
     padding-top: 1rem;
 }
 
+@media (max-width: 1024px) {
+    .grid .key-colon, .grid .title--border {
+        font-weight: 600;
+    }
+}
+
 @media (max-width: 767.98px) {
     .grid {
         grid-template-columns: 35% 55%;
@@ -70,10 +76,6 @@
         grid-column: 2 / span 1;
         margin: 0 !important;
     }
-
-    .grid .key-colon, .grid .title--border {
-        font-weight: 600;
-    }
 }
 
 .grid .key-colon:nth-child(odd)::after {
diff --git a/client/src/components/Logs/Cells/ResponseCell.js b/client/src/components/Logs/Cells/ResponseCell.js
index 772b89e5d7b..4ca37c29599 100644
--- a/client/src/components/Logs/Cells/ResponseCell.js
+++ b/client/src/components/Logs/Cells/ResponseCell.js
@@ -97,7 +97,7 @@ const ResponseCell = ({
     return (
         <div className="logs__cell logs__cell--response" role="gridcell">
             <IconTooltip
-                className={classNames('icons mr-4 icon--24 icon--lightgray', { 'my-3': isDetailed })}
+                className={classNames('icons mr-4 icon--24 icon--lightgray logs__question', { 'my-3': isDetailed })}
                 columnClass='grid grid--limited'
                 tooltipClass='px-5 pb-5 pt-4 mw-75 custom-tooltip__response-details'
                 contentItemClass='text-truncate key-colon o-hidden'
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index d39835e0f4b..788eef56146 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -485,3 +485,13 @@
 .bg--green {
     color: var(--green79);
 }
+
+@media (max-width: 1024px) {
+    .logs__question {
+        display: none;
+    }
+}
+
+.logs__modal {
+    max-width: 720px;
+}
diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js
index 3658b5ba76b..2bf899950fe 100644
--- a/client/src/components/Logs/index.js
+++ b/client/src/components/Logs/index.js
@@ -184,27 +184,34 @@ const Logs = () => {
                 setButtonType={setButtonType}
                 setModalOpened={setModalOpened}
         />
-        <Modal portalClassName='grid' isOpen={isSmallScreen && isModalOpened}
-               onRequestClose={closeModal}
-               style={{
-                   content: {
-                       width: '100%',
-                       height: 'fit-content',
-                       left: 0,
-                       top: 47,
-                       padding: '1rem 1.5rem 1rem',
-                   },
-                   overlay: {
-                       backgroundColor: 'rgba(0,0,0,0.5)',
-                   },
-               }}
+        <Modal
+            portalClassName='grid'
+            isOpen={isSmallScreen && isModalOpened}
+            onRequestClose={closeModal}
+            style={{
+                content: {
+                    width: '100%',
+                    height: 'fit-content',
+                    left: '50%',
+                    top: 47,
+                    padding: '1rem 1.5rem 1rem',
+                    maxWidth: '720px',
+                    transform: 'translateX(-50%)',
+                },
+                overlay: {
+                    backgroundColor: 'rgba(0,0,0,0.5)',
+                },
+            }}
         >
-            <svg
-                    className="icon icon--24 icon-cross d-block d-md-none cursor--pointer"
-                    onClick={closeModal}>
-                <use xlinkHref="#cross" />
-            </svg>
-            {processContent(detailedDataCurrent, buttonType)}
+            <div className="logs__modal-wrap">
+                <svg
+                    className="icon icon--24 icon-cross d-block cursor--pointer"
+                    onClick={closeModal}
+                >
+                    <use xlinkHref="#cross" />
+                </svg>
+                {processContent(detailedDataCurrent, buttonType)}
+            </div>
         </Modal>
     </>;