legend lable icons (color points) aligned right when JS component is mounted on server

[us044466]

Bug Report

Description

We are consuming carbon graph in our application and we are seeing an issue with the legend labels. When JS component is started locally with (npm start) and launch app I see the legend label as centered correctly but when the JS is mounted on server the label icons are aligned right.
JS component: https://github.cerner.com/healtheintent/care-management-trackers-js/compare/HNCAREMAN-2002
Engine where js component is mounted: https://github.cerner.com/healtheintent/care_management_trackers_engine/compare/test_changes

Graphs affected

• Bar graph
• Bubble graph
• Gantt chart
• Line graph
• Paired result
• Pie chart
• Scatter plot
• Timeline
• Legend Label

Steps to Reproduce

Please follow the steps on engine repo to run launch app through engine. Use test_changes branch as it has js pointing to the right branch in package.json.
NOTE: This is orion application so you would also need mod headers. Here are the steps to install mod headers with deveng values: https://github.cerner.com/healtheintent/care_management_wellness_server#request-headers

Link to CodeSandbox

Use this template to reproduce the behavior.

Additional Context / Screenshots

• When application runs on JS (npm start)
  

• When application runs on engine (bundle exec rackup)
  

Expected Behavior

• Legend labels icons are centered on engine same way they are on JS.

Possible Solution

Environment

• Component Name and Version:
• Browser Name and Version:
• Node/npm Version: [e.g. Node 8/npm 5]
• Webpack Version:
• Operating System and version (desktop or mobile):

@ Mentions

[us044466]

using application layout solved the issue so closing the ticket.