From 66b186176e40f67e28088b276b72b7161a064986 Mon Sep 17 00:00:00 2001
From: "vladislav.kotelnikov" <vladislav.kotelnikov@exactprosystems.com>
Date: Thu, 11 Apr 2019 17:06:44 +0300
Subject: [PATCH] Bug #54579. Fix content overflow in user message at action
 card.

Fix paddings on user tables and messsages at action's card body.

(cherry picked from commit 4fc3276ea67f866a9f0b9ca1de15c9d46f638f38)

Change-Id: I4aeba91280db3844f629d498ca5867d0de5823c2
---
 .../src/components/ActionCard.tsx             |  4 +--
 .../src/components/ActionTree.tsx             |  2 +-
 .../src/components/CustomMessage.tsx          | 32 +++++++------------
 .../Sailfish-JS-report/src/styles/action.scss | 13 +++++---
 4 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/FrontEnd/Sailfish-JS-report/src/components/ActionCard.tsx b/FrontEnd/Sailfish-JS-report/src/components/ActionCard.tsx
index 81547a7e..5126fd67 100644
--- a/FrontEnd/Sailfish-JS-report/src/components/ActionCard.tsx
+++ b/FrontEnd/Sailfish-JS-report/src/components/ActionCard.tsx
@@ -108,7 +108,7 @@ export const ActionCard = ({ action, children, isSelected, onSelect, isRoot, isT
                 <div class="ac-body">
                     <div class={inputParametersClassName}>
                         <ExpandablePanel>
-                            <h4>Input parameters</h4>
+                            <div class="ac-body__item-title">Input parameters</div>
                             <ParamsTable
                                 params={parameters}
                                 name={name} />
@@ -122,7 +122,7 @@ export const ActionCard = ({ action, children, isSelected, onSelect, isRoot, isT
                         action.status.status == 'FAILED' ? (
                             <div class="action-card-status">
                                 <ExpandablePanel>
-                                    <h4>Status</h4>
+                                    <div class="ac-body__item-title">Status</div>
                                     <ExceptionChain exception={action.status.cause} />
                                 </ExpandablePanel>
                             </div>
diff --git a/FrontEnd/Sailfish-JS-report/src/components/ActionTree.tsx b/FrontEnd/Sailfish-JS-report/src/components/ActionTree.tsx
index 81a81af8..723e988d 100644
--- a/FrontEnd/Sailfish-JS-report/src/components/ActionTree.tsx
+++ b/FrontEnd/Sailfish-JS-report/src/components/ActionTree.tsx
@@ -341,7 +341,7 @@ export class ActionTree extends Component<ActionTreeProps> {
         return (
             <div class="ac-body__table">
                 <ExpandablePanel>
-                    <h4>{table.name || "Custom table"}</h4>
+                    <div class="ac-body__item-title">{table.name || "Custom table"}</div>
                     <CustomTable
                         content={table.content} />
                 </ExpandablePanel>
diff --git a/FrontEnd/Sailfish-JS-report/src/components/CustomMessage.tsx b/FrontEnd/Sailfish-JS-report/src/components/CustomMessage.tsx
index 7dcf16fe..d95098be 100644
--- a/FrontEnd/Sailfish-JS-report/src/components/CustomMessage.tsx
+++ b/FrontEnd/Sailfish-JS-report/src/components/CustomMessage.tsx
@@ -16,10 +16,10 @@
 
 import { h } from 'preact';
 import UserMessage from '../models/UserMessage';
-import '../styles/action.scss';
 import ExpandablePanel from './ExpandablePanel';
 import ExceptionCard from './ExceptionCard';
 import { createSelector } from '../helpers/styleCreators';
+import '../styles/action.scss';
 
 interface CustomMessageProps {
     userMessage: UserMessage;
@@ -44,30 +44,20 @@ export const CustomMessage = ({ userMessage }: CustomMessageProps) => {
 
     if (exception) {
         return (
-            <div class="action-card">
-                <ExpandablePanel>
-                    <div class="ac-header">
-                        <div class={rootClass}>
-                            <h3 style={messageStyle}>{message}</h3>
-                        </div>
-                    </div>
-                    <div class="ac-body">
-                        <ExceptionCard
-                            exception={exception}
-                            drawDivider={false}/>
-                    </div>
-                </ExpandablePanel>
-            </div>
+            <ExpandablePanel>
+                <div class={rootClass}>
+                    <div class="ac-body__item-title" style={messageStyle}>{message}</div>
+                </div>
+                <ExceptionCard
+                    exception={exception}
+                    drawDivider={false}/>
+            </ExpandablePanel>
         )
     }
 
     return (
-        <div class="action-card">
-            <div class="ac-header">
-                <div class={rootClass}>
-                    <h3 style={messageStyle}>{message}</h3>
-                </div>
-            </div>
+        <div class={rootClass + "   ac-body__item"}>
+            <h3 style={messageStyle}>{message}</h3>
         </div>
     )
 }
\ No newline at end of file
diff --git a/FrontEnd/Sailfish-JS-report/src/styles/action.scss b/FrontEnd/Sailfish-JS-report/src/styles/action.scss
index 9296b283..02a2fdb1 100644
--- a/FrontEnd/Sailfish-JS-report/src/styles/action.scss
+++ b/FrontEnd/Sailfish-JS-report/src/styles/action.scss
@@ -33,7 +33,6 @@
 
     &__custom-msg {
         color: $primaryTextColor;
-        padding-left: 10px;
 
         &.debug {
             color: gray;
@@ -166,16 +165,22 @@
         overflow-x: scroll;
     }
 
-    &__input-params {
-        padding-left: 10px;
+    &__item {
+        padding: 3px 7px;
+    }
 
+    &__item-title {
+        font-weight: bold;
+        font-size: 18px;
+    }
+
+    &__input-params {
         &.transparent {
             opacity: 0.3;
         }
     }
 
     &__table {
-        padding-left: 10px;
     }
 
     &__verification {