@capillarytech/creatives-library 8.0.166 → 8.0.168-alpha.0

package/v2Components/CapTagListWithInput/index.js

@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from 'react-intl';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import TagList from '../../v2Containers/TagList';
+import messages from './messages';
+
+/**
+ * CapTagListWithInput - A reusable component that combines TagList and CapInput
+ * for external links/URLs that can be used across all channels
+ */
+export const CapTagListWithInput = (props) => {
+  const {
+    intl,
+    // TagList props
+    tags = [],
+    injectedTags = {},
+    location = {},
+    selectedOfferDetails = [],
+    onTagSelect,
+    onContextChange,
+    moduleFilterEnabled = true,
+    className = '',
+    userLocale = 'en',
+    eventContextTags = [],
+    // CapInput props
+    inputId,
+    inputValue = '',
+    inputOnChange,
+    inputPlaceholder,
+    inputErrorMessage = '',
+    inputSize = 'default',
+    inputMaxLength,
+    inputRequired = false,
+    inputDisabled = false,
+    // Layout props
+    headingText,
+    headingType = 'h4',
+    headingStyle = {},
+    containerStyle = {},
+    tagListStyle = {},
+    inputStyle = {},
+    // Custom props
+    showHeading = true,
+    showTagList = true,
+    showInput = true,
+    inputProps = {},
+  } = props;
+
+  const { formatMessage } = intl;
+
+  return (
+    <CapColumn style={containerStyle}>
+      <CapRow style={{display: 'flex', flexDirection: 'row'}}>
+        {showHeading && headingText && (
+          <CapHeading type={headingType} style={headingStyle}>
+            {headingText}
+          </CapHeading>
+        )}
+
+        {showTagList && (
+          <TagList
+            key={`${inputId}_tags`}
+            className={className}
+            moduleFilterEnabled={moduleFilterEnabled}
+            label={formatMessage(messages.addLabels)}
+            onTagSelect={onTagSelect}
+            onContextChange={onContextChange}
+            location={location}
+            tags={tags}
+            injectedTags={injectedTags}
+            userLocale={userLocale}
+            selectedOfferDetails={selectedOfferDetails}
+            eventContextTags={eventContextTags}
+            style={tagListStyle}
+          />
+        )}
+      </CapRow>
+      {showInput && (
+        <CapInput
+          id={inputId}
+          onChange={inputOnChange}
+          placeholder={inputPlaceholder}
+          value={inputValue}
+          size={inputSize}
+          maxLength={inputMaxLength}
+          errorMessage={inputErrorMessage}
+          isRequired={inputRequired}
+          disabled={inputDisabled}
+          style={inputStyle}
+          {...inputProps}
+        />
+      )}
+    </CapColumn>
+  );
+};
+
+CapTagListWithInput.propTypes = {
+  intl: intlShape.isRequired,
+  // TagList props
+  tags: PropTypes.array,
+  injectedTags: PropTypes.object,
+  location: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
+  onTagSelect: PropTypes.func.isRequired,
+  onContextChange: PropTypes.func.isRequired,
+  moduleFilterEnabled: PropTypes.bool,
+  className: PropTypes.string,
+  userLocale: PropTypes.string,
+  eventContextTags: PropTypes.array,
+
+  // CapInput props
+  inputId: PropTypes.string.isRequired,
+  inputValue: PropTypes.string,
+  inputOnChange: PropTypes.func.isRequired,
+  inputPlaceholder: PropTypes.string,
+  inputErrorMessage: PropTypes.string,
+  inputSize: PropTypes.oneOf(['small', 'default', 'large']),
+  inputMaxLength: PropTypes.number,
+  inputRequired: PropTypes.bool,
+  inputDisabled: PropTypes.bool,
+  inputProps: PropTypes.object,
+
+  // Layout props
+  headingText: PropTypes.string,
+  headingType: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  headingStyle: PropTypes.object,
+  containerStyle: PropTypes.object,
+  tagListStyle: PropTypes.object,
+  inputStyle: PropTypes.object,
+
+  // Custom props
+  showHeading: PropTypes.bool,
+  showTagList: PropTypes.bool,
+  showInput: PropTypes.bool,
+};
+
+CapTagListWithInput.defaultProps = {
+  tags: [],
+  injectedTags: {},
+  location: {},
+  selectedOfferDetails: [],
+  moduleFilterEnabled: true,
+  className: '',
+  userLocale: 'en',
+  eventContextTags: [],
+  inputValue: '',
+  inputSize: 'default',
+  inputRequired: false,
+  inputDisabled: false,
+  inputPlaceholder: '',
+  inputErrorMessage: '',
+  inputMaxLength: undefined,
+  headingText: '',
+  headingType: 'h4',
+  headingStyle: {},
+  containerStyle: {},
+  tagListStyle: {},
+  inputStyle: {},
+  showHeading: true,
+  showTagList: true,
+  showInput: true,
+  inputProps: {},
+};
+
+export default injectIntl(CapTagListWithInput);

package/v2Components/CapTagListWithInput/messages.js

@@ -0,0 +1,10 @@
+import { defineMessages } from 'react-intl';
+
+const prefix = 'creatives.componentsV2.CapTagListWithInput';
+
+export default defineMessages({
+  addLabels: {
+    id: `${prefix}.addLabels`,
+    defaultMessage: 'Add labels',
+  },
+});

package/v2Components/Carousel/style.scss

@@ -26,7 +26,7 @@
     text-align: center;
     width: 120px !important;
     border-radius: 12px;
-    background-color: $CAP_G09;
+    background-color: $CAP_G09,
   }
   
   .ant-carousel .slick-slide {

package/v2Components/EmailMobilePreview/index.js

@@ -19,8 +19,8 @@ import messages from '../EmailPreviewV2/messages';
 import './index.scss';
 import mobileBody from '../../assets/DeviceForEmail.png';
 import { iframePreviewAdjustWidth, removeLinksFromHtmlContent } from './../../utils/common';
-import {selectTemplateContent} from '../../v2Containers/Templates/selectors';
-import * as templateActions from '../../v2Containers/Templates/actions';
+import {selectTemplateContent} from '../../containers/Templates/selectors';
+import * as templateActions from '../../containers/Templates/actions';
 
 const deviceAspectRatio = {
   mobile: {

package/v2Components/FormBuilder/index.js

@@ -54,9 +54,9 @@ import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED,
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
 import { OUTBOUND } from './constants';
-import { GET_TRANSLATION_MAPPED } from '../../constants/unified';
+import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
-import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../constants/unified';
+import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../containers/App/constants';
 import { REQUEST } from '../../v2Containers/Cap/constants'
 import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
@@ -3343,7 +3343,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             const currentLang = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage;
             const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
 
-            if (!(_.get(this.state, `formData[${this.state.currentTab - 1}][${currentLang}].is_drag_drop`, false)) || isBEEAppEnable === false || channel !== 'EMAIL') {
+            // Always render Subject TagList (title-tagList) even when Bee editor is active for EMAIL channel
+            if (
+              val.id === 'title-tagList' ||
+              !(_.get(this.state, `formData[${this.state.currentTab - 1}][${currentLang}].is_drag_drop`, false)) ||
+              isBEEAppEnable === false ||
+              channel !== 'EMAIL'
+            ) {
               columns.push(
                 <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
                   <TagList

package/v2Components/NavigationBar/tests/saga.test.js

@@ -1,61 +1,56 @@
 import { expectSaga } from "redux-saga-test-plan";
 import * as matchers from "redux-saga-test-plan/matchers";
 import CapCollapsibleLeftNavigationSagas from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/saga';
-
+import * as CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
 import rootSagas from "../saga";
 
-// Mock the analyticsBotSaga module
-jest.mock('@capillarytech/cap-ui-library/CapAskAira', () => ({
-  analyticsBotSaga: [
-    {
-      * call() { yield true; },
-    },
-    {
-      * call() { yield true; },
-    },
-  ],
-}));
-
 describe("analyticsBotSagaFn", () => {
   const { saga: analyticsBotSagaFn } = rootSagas.find(
     (s) => s.key === "analyticsBotSaga"
   );
 
-  test.concurrent("should handle when analyticsBotSaga is valid array", () => {
-    // Mock module with valid array
-    jest.mock('@capillarytech/cap-ui-library/CapAskAira', () => ({
-      analyticsBotSaga: [
-        {
-          * call() { yield true; },
-        },
-        {
-          * call() { yield true; },
-        },
-      ],
-    }));
+  beforeEach(() => {
+    // Reset all mocks before each test
+    jest.resetModules();
+    jest.clearAllMocks();
+  });
+
+  test("should handle when analyticsBotSaga is valid array", () => {
+    // Setup valid array case
+    const mockSagas = [
+      { call: jest.fn() },
+      { call: jest.fn() },
+    ];
+    Object.defineProperty(CapAskAira, 'analyticsBotSaga', {
+      value: mockSagas,
+      configurable: true,
+    });
 
     return expectSaga(analyticsBotSagaFn)
       .provide([
-        [matchers.call.fn(() => {}), undefined],
+        [matchers.call.fn(mockSagas[0].call), undefined],
+        [matchers.call.fn(mockSagas[1].call), undefined],
       ])
       .run();
   });
 
-  test.concurrent("should handle when analyticsBotSaga is undefined", () => {
-    // Mock module with undefined analyticsBotSaga
-    jest.mock('@capillarytech/cap-ui-library/CapAskAira', () => ({
-      analyticsBotSaga: undefined,
-    }));
+  test("should handle when analyticsBotSaga is undefined", () => {
+    // Setup undefined case
+    Object.defineProperty(CapAskAira, 'analyticsBotSaga', {
+      value: undefined,
+      configurable: true,
+    });
 
     return expectSaga(analyticsBotSagaFn)
       .run();
   });
 
-  test.concurrent("should handle when analyticsBotSaga is not an array", () => {
-    // Mock module with non-array analyticsBotSaga
-    jest.mock('@capillarytech/cap-ui-library/CapAskAira', () => ({
-      analyticsBotSaga: {},
-    }));
+  test("should handle when analyticsBotSaga is not an array", () => {
+    // Setup non-array case
+    Object.defineProperty(CapAskAira, 'analyticsBotSaga', {
+      value: {},
+      configurable: true,
+    });
 
     return expectSaga(analyticsBotSagaFn)
       .run();

package/v2Components/TemplatePreview/index.js

@@ -32,11 +32,10 @@ import {
   RCS,
   ZALO,
   INAPP,
-  VIBER, 
-  FACEBOOK,
   MOBILE_PUSH
 } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
+import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
 import whatsappMobileAndroid from './assets/images/whatsapp_mobile_android.svg';
 import inAppMobileAndroidModal from './assets/images/inapp_mobile_android_modal.svg';
 import inAppMobileAndroidTop from './assets/images/inapp_mobile_android_top.svg';

package/v2Components/TestAndPreviewSlidebox/PreviewSection.js

@@ -20,7 +20,7 @@ const PreviewSection = ({
       device={previewDevice}
       onDeviceChange={setPreviewDevice}
       customer={selectedCustomer}
-      subject={formData['template-subject']}
+      subject={previewDataHtml?.resolvedTitle || formData['template-subject']}
     >
       {isUpdatingPreview && (
         <CapRow className="loading-container">

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -108,6 +108,21 @@ const TestAndPreviewSlidebox = (props) => {
     requiredTags.some((tag) => !customValues[tag.fullPath])
   ), [requiredTags, customValues]);
 
+  // Function to resolve tags in text with custom values
+  const resolveTagsInText = (text, tagValues) => {
+    if (!text) return text;
+    let resolvedText = text;
+    
+    // Replace each tag with its custom value
+    Object.keys(tagValues).forEach((tagPath) => {
+      const tagName = tagPath.split('.').pop(); // Get the actual tag name from the path
+      const tagRegex = new RegExp(`{{${tagName}}}`, 'g');
+      resolvedText = resolvedText.replace(tagRegex, tagValues[tagPath] || `{{${tagName}}}`);
+    });
+    
+    return resolvedText;
+  };
+
   // Get the current content based on editor type
   const getCurrentContent = useMemo(() => {
     const currentTabData = formData[currentTab - 1];
@@ -380,9 +395,10 @@ const TestAndPreviewSlidebox = (props) => {
       setCustomValues(updatedValues);
 
       // Update preview with prefilled values
+      const resolvedSubject = resolveTagsInText(formData['template-subject'], updatedValues);
       const payload = {
         channel: EMAIL,
-        messageTitle: formData['template-subject'],
+        messageTitle: resolvedSubject,
         messageBody: getCurrentContent,
         resolvedTags: updatedValues,
         userId: selectedCustomer?.customerId,
@@ -501,9 +517,10 @@ const TestAndPreviewSlidebox = (props) => {
     setCustomValues(emptyValues);
 
     // Update preview with empty values
+    const resolvedSubject = resolveTagsInText(formData['template-subject'], emptyValues);
     const payload = {
       channel: EMAIL,
-      messageTitle: formData['template-subject'],
+      messageTitle: resolvedSubject,
       messageBody: getCurrentContent,
       resolvedTags: emptyValues,
       userId: selectedCustomer?.customerId,
@@ -517,9 +534,12 @@ const TestAndPreviewSlidebox = (props) => {
       // Include unsubscribe tag if content contains it
       const resolvedTags = { ...customValues };
 
+      // Resolve subject tags with custom values
+      const resolvedSubject = resolveTagsInText(formData['template-subject'], customValues);
+
       const payload = {
         channel: EMAIL,
-        messageTitle: formData['template-subject'],
+        messageTitle: resolvedSubject,
         messageBody: getCurrentContent,
         resolvedTags,
         userId: selectedCustomer?.customerId,
@@ -585,7 +605,7 @@ const TestAndPreviewSlidebox = (props) => {
       emailMessageContent: {
         channel: EMAIL,
         messageBody: previewData?.resolvedBody || getCurrentContent,
-        messageSubject: previewData?.resolvedTitle || formData['template-subject'],
+        messageSubject: previewData?.resolvedTitle || resolveTagsInText(formData['template-subject'], customValues),
       },
     }, messageMetaConfigId, (response) => {
       const payload = {

package/v2Containers/Cap/tests/saga.test.js

@@ -36,7 +36,7 @@ import {
   CREATE_CENTRAL_COMMS_META_ID_REQUEST,
 } from '../constants';
 import { callback, error, error2, videoConfigData } from '../../mockdata';
-import { LOGOUT_FAILURE, LOGOUT_SUCCESS } from '../../../constants/unified';
+import { LOGOUT_FAILURE, LOGOUT_REQUEST, LOGOUT_SUCCESS } from '../../../containers/Cap/constants';
 
 
 

package/v2Containers/Email/index.js

@@ -37,9 +37,9 @@ import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 import { gtmPush } from '../../utils/gtmTrackers';
 const {CapCustomCardList} = CapCustomCard;
 import {storeS3FileSizeDetails, CREATIVES_S3_ASSET_FILESIZES} from '../../utils/cdnTransformation';
-import { CUSTOMER_BARCODE_TAG } from '../../constants/unified';
 
 import { containsBase64Images } from '../../utils/content';
+import { CUSTOMER_BARCODE_TAG } from '../../containers/App/constants';
 import injectReducer from '../../utils/injectReducer';
 import v2EmailReducer from './reducer';
 import { v2EmailSagas } from './sagas';
@@ -100,6 +100,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       "template-name": {
         onChange: this.onTemplateNameChange,
       },
+      // allow tag insertion into Subject input field via a dedicated TagList
+      "title-tagList": {
+        onTagSelect: this.onTagSelect,
+      },
       "template-version": {
         onSelect: this.handleVersionSelect,
         addVersion: this.addVersion,
@@ -646,7 +650,44 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
   }
 
-  onTagSelect = (data) => {
+  onTagSelect = (data, currentTab, sourceVal) => {
+    // If tag is selected from Subject's TagList, insert into subject input
+    if (sourceVal && sourceVal.id === 'title-tagList') {
+      const tagToInsert = `{{${data}}}`;
+      const formData = _.cloneDeep(this.state.formData);
+      const fieldId = 'template-subject';
+      const input = document.getElementById(fieldId) || document.querySelector(`#${fieldId} input`);
+      let subjectValue = formData[fieldId] || '';
+      try {
+        if (input && (typeof input.selectionStart === 'number')) {
+          const startPos = input.selectionStart;
+          const endPos = input.selectionEnd;
+          subjectValue = `${subjectValue.substring(0, startPos)}${tagToInsert}${subjectValue.substring(endPos)}`;
+          formData[fieldId] = subjectValue;
+          this.setState({ formData }, () => {
+            try {
+              input.focus();
+              const newPos = startPos + tagToInsert.length;
+              input.selectionStart = newPos;
+              input.selectionEnd = newPos;
+            } catch (e) {}
+          });
+        } else {
+          subjectValue = `${subjectValue}${tagToInsert}`;
+          formData[fieldId] = subjectValue;
+          this.setState({ formData });
+          if (input) {
+            try { input.value = subjectValue; } catch (e) {}
+          }
+        }
+      } catch (e) {
+        // fallback safe append
+        formData[fieldId] = `${subjectValue}${tagToInsert}`;
+        this.setState({ formData });
+      }
+      return;
+    }
+
     const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
     const formData = _.cloneDeep(this.state.formData);
     const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;

package/v2Containers/Email/initialSchema.js

@@ -33,24 +33,30 @@ export const response = {
                       onlyDisplay: false,
                       errorMessage: "Email Subject cannot be empty.",
                     },
-                    // {
-                    //     offset: 20,
-                    //     id: "title-tagList",
-                    //     label: "Tags",
-                    //     target: "message-title2",
-                    //     type: "tag-list",
-                    //     metaType: "List",
-                    //     datatype: "select",
-                    //     required: true,
-                    //     fluid: true,
-                    //     onlyDisplay: true,
-                    //     styling: "semantic",
-                    //     order: 1,
-                    //     customComponent: true,
-                    //     supportedEvents: [
-                    //       "onTagSelect",
-                    //     ],
-                    //   },
+                    {
+                      // Add label control for subject input
+                      id: "title-tagList",
+                      label: "Add label",
+                      type: "tag-list",
+                      metaType: "List",
+                      datatype: "select",
+                      required: true,
+                      fluid: true,
+                      onlyDisplay: true,
+                      style: {
+                        float: "none",
+                        marginTop: "2%",
+                        marginRight: "20%",
+                      },
+                      styling: "semantic",
+                      order: 2,
+                      customComponent: true,
+                      // Helps handler identify the destination input
+                      target: "template-subject",
+                      supportedEvents: [
+                        "onTagSelect",
+                      ],
+                    },
                   ],
                 },
               ],

package/v2Containers/FTP/index.js

@@ -29,7 +29,7 @@ import { makeSelectLoyaltyPromotionDisplay, setInjectedTags } from '../Cap/selec
 import withCreatives from '../../hoc/withCreatives';
 import messages from './messages';
 import './_FTP.scss';
-import * as globalActions from '../Cap/actions';
+import * as globalActions from '../../containers/Cap/actions';
 import { TagList } from '../TagList';
 import { NO_COMMUNICATION, CREATE, EDIT, PREVIEW } from '../App/constants';
 import { getTreeStructuredTags } from '../../utils/common';

package/v2Containers/Line/Container/Text/index.js

@@ -17,7 +17,7 @@ import withStyles from '../../../../hoc/withStyles';
 import globalMessages from '../../../Cap/messages';
 import { validateTags } from '../../../../utils/tagValidations';
 import moment from 'moment';
-import { GET_TRANSLATION_MAPPED } from '../../../../constants/unified';
+import { GET_TRANSLATION_MAPPED } from '../../../../containers/TagList/constants';
 
 const { TextArea } = CapInput;
 const {CapCustomCardList} = CapCustomCard;

package/v2Containers/MobilePush/Create/index.js

@@ -291,7 +291,28 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 rowClassName: 'mobile-push-row',
                 id: 'cta-external-link',
                 cols: [
-
+                  {
+                    // Add label control for external link input
+                    id: "title-tagList",
+                    label: "Add label",
+                    type: "tag-list",
+                    metaType: "List",
+                    datatype: "select",
+                    required: true,
+                    fluid: true,
+                    onlyDisplay: true,
+                    style: {
+                      marginRight: "10%",
+                    },
+                    styling: "semantic",
+                    order: 2,
+                    customComponent: true,
+                    // Helps handler identify the destination input
+                    target: inputId,
+                    supportedEvents: [
+                      "onTagSelect",
+                    ],
+                  },
                   {
                     id: inputId,
                     placeholder: this.props.intl.formatMessage(messages.externalLink),
@@ -304,8 +325,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                     width: 18,
                     offset: 1,
                     style: {
-                      width: '100%',
-
+                      width: '95%',
                     },
                     styling: "semantic",
                     order: 1,

package/v2Containers/MobilePush/commonMethods.js

@@ -202,11 +202,32 @@ function getLinkTypeFields({inputFieldsArgs, fieldIndex, deepLinkOptions, formDa
       identifier: inputId,
 
       cols: [
-
+        {
+          // Add label control for external link input
+          id: "title-tagList",
+          label: "Add label",
+          type: "tag-list",
+          metaType: "List",
+          datatype: "select",
+          required: true,
+          fluid: true,
+          onlyDisplay: true,
+          style: {
+            marginRight: "10%",
+          },
+          styling: "semantic",
+          order: 2,
+          customComponent: true,
+          // Helps handler identify the destination input
+          target: inputId,
+          supportedEvents: [
+            "onTagSelect",
+          ],
+        },
         {
           id: inputId,
           placeholder: "External Link",
-          type: "input",  //Resembles component to be used
+          type: "input", //Resembles component to be used
           metaType: "text",
           datatype: "string",
           errorMessage: <FormattedMessage {...messages.invalidExternalLink}/>,
@@ -215,7 +236,7 @@ function getLinkTypeFields({inputFieldsArgs, fieldIndex, deepLinkOptions, formDa
           width: 18,
           offset: 1,
           style: {
-            width: '100%',
+            width: '95%',
           },
           styling: "semantic",
           order: 1,