From cf018b4876d6def323db7c4eddee6095b2494a89 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Wed, 26 Dec 2018 13:01:49 +0300
Subject: [PATCH] problems: wide layout tweaks

---
 src/panel-triggers/components/ProblemDetails.tsx | 10 ++++++----
 src/sass/_panel-problems.scss                    |  9 +++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/panel-triggers/components/ProblemDetails.tsx b/src/panel-triggers/components/ProblemDetails.tsx
index 768348a..c0dec30 100644
--- a/src/panel-triggers/components/ProblemDetails.tsx
+++ b/src/panel-triggers/components/ProblemDetails.tsx
@@ -69,8 +69,8 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
     const problem = this.props.original as Trigger;
     const rootWidth = this.props.rootWidth;
     const displayClass = this.state.show ? 'show' : '';
-    const wideLayout = rootWidth > 1000;
-    const compactStatusBar = rootWidth < 800 || problem.acknowledges && wideLayout && rootWidth < 1200;
+    const wideLayout = rootWidth > 1200;
+    const compactStatusBar = rootWidth < 800 || problem.acknowledges && wideLayout && rootWidth < 1400;
 
     return (
       <div className={`problem-details-container ${displayClass}`}>
@@ -116,8 +116,10 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
         </div>
         {problem.acknowledges && wideLayout &&
           <div className="problem-details-middle">
-            <h6><FAIcon icon="reply-all" /> Acknowledges</h6>
-            <AcknowledgesList acknowledges={problem.acknowledges} />
+            <div className="problem-ack-container">
+              <h6><FAIcon icon="reply-all" /> Acknowledges</h6>
+              <AcknowledgesList acknowledges={problem.acknowledges} />
+            </div>
           </div>
         }
         <div className="problem-details-right">
diff --git a/src/sass/_panel-problems.scss b/src/sass/_panel-problems.scss
index c492618..8549d1c 100644
--- a/src/sass/_panel-problems.scss
+++ b/src/sass/_panel-problems.scss
@@ -318,9 +318,14 @@
 
       .problem-details-middle {
         flex: 1 0 auto;
-        padding: 0.6rem 1rem;
+        // padding: 0.6rem 1rem;
         overflow: auto;
-        box-shadow: 1px 0 10px $problem-container-shadow;
+        // box-shadow: 1px 0 10px $problem-container-shadow;
+
+        .problem-ack-container {
+          margin: 0.5rem 0.4rem;
+          padding: 0.6rem 0.6rem;
+        }
       }
 
       .problem-ack-container {