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
exactpro · Apr 26, 2019 · 66b1861 · 66b1861
1 parent d4f8b72
commit 66b1861
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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>
     )
 }
diff --git 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 {