fixed attachment and tags fit

CHANGELOG.MD

@@ -1,2 +1,10 @@
+# 0.0.3
+- fixed image fit
+- fixed tags fit in title
+
+# 0.0.2
+- added feature titles
+- minor fixes
+
 # 0.0.1
-initial implementation
+- initial implementation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qavajs/html-formatter",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "formatter/formatter.js",
   "dependencies": {
   },

src/App.module.scss

@@ -51,6 +51,8 @@ footer {
 
 .tagBadge {
     margin-right: 5px;
+    margin-top: 3px;
+    margin-bottom: 3px;
 }
 
 .searchInput {
@@ -87,3 +89,8 @@ footer {
     font-size: 28px;
 }
 
+.scenarioTitle {
+    display: flex;
+    flex-wrap: wrap;
+    width: 95%;
+}

src/components/AttachmentModal.tsx

@@ -14,7 +14,7 @@ const Attachment = (props: any) => {
         return <img
             src={`data:${props.embedding.mime_type};base64,${props.embedding.data}`}
             alt='attachment'
-            style={{width: '100vw'}}
+            style={{width: '100%'}}
         />
     }
     if (props.embedding.mime_type === 'text/plain') {

src/components/Scenario.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {FlexRow, Text, Badge, FlexCell, Accordion} from '@epam/promo';
-import {Step} from './Step';
-import css from "../App.module.scss";
+import { FlexRow, Text, Badge, FlexCell, Accordion } from '@epam/promo';
+import { Step } from './Step';
+import css from '../App.module.scss';
 
 const filterByStatus = (scenario: any, status: string) => scenario.steps.filter((step: any) => step.result.status === status);
 const scenarioTitle = (scenario: any) => () => {
@@ -12,7 +12,7 @@ const scenarioTitle = (scenario: any) => () => {
     const ambiguous = filterByStatus(scenario, 'ambiguous').length;
     const pending = filterByStatus(scenario, 'pending').length;
 
-    return <FlexRow spacing='12' padding="6">
+    return <FlexRow spacing='12' padding='6' vPadding='12' cx={css.scenarioTitle}>
         <Text fontSize='16' font='sans-semibold'>Scenario: {scenario.name}</Text>
         {passed > 0 && <Badge color='green' fill='semitransparent' caption={passed}/>}
         {failed > 0 && <Badge color='red' fill='semitransparent' caption={failed}/>}

test/features/Attachment.feature

@@ -9,3 +9,6 @@ Feature: Attachments
 
   Scenario: png base64
     When png base64 attachment
+
+  Scenario: png full-size base64
+    When png full-size base64 attachment

test/features/Feature1.feature

@@ -22,3 +22,9 @@ Feature: Feature1
   Scenario: scenario pending
     When passed step
     And pending step
+
+  @there @is @too @many @tags @first_tag @second_tag @third_tag
+  @fourth_tag @fifth_tag @and_so_on @etc
+  @more_words @that @not @fit @to @the @scenario @title @panel
+  Scenario: too many tags scenario that does not fit to the title
+    When passed step

test/step_definitions/custom_steps.js

@@ -16,3 +16,7 @@ When('text attachment', function () {
 When('png base64 attachment', function () {
     this.attach(require('../attachments/pngBase64'), 'base64:image/png')
 });
+
+When('png full-size base64 attachment', function () {
+    this.attach(require('../attachments/pngFullSizeBase64'), 'base64:image/png')
+});