Long values inside custom data break layout

[ahelmel]

Environment (please complete the following information):

• multiple-cucumber-html-reporter: 3.3.0
• Node.js version: v18.18.0
• NPM version: 9.8.1
• Platform name and version: Linux
• Cucumber version: 9.1.0

Config of multiple-cucumber-html-reporter

report.generate({
  jsonDir: `${reportsPath}/json`,
  reportPath: `${reportsPath}/html-report`,
  displayDuration: true,
  durationInMS: true,
  pageTitle: 'My App',
  reportName: 'My App,
  customData: {
     title: 'Run Info',
     data: [
       { label: 'Stage', value: 'Development' },
       { label: 'Branch Name', value: 'feature/XXX-123_some-very-long-name-for-a-feature-branch' },
       { label: 'App Version', value: '1.0' },
       { label: 'Node Version', value: '18.12.0' },
       { label: 'Cypress Version', value: '13.3.1' },
       { label: 'Execution Start Time', value: '25.10.2023, 09:26:26' },
       { label: 'Execution End Time', value: '25.10.2023, 09:30:12' },
       { label: 'Execution Duration', value: '4 Minuten' },
     ],
  },
});

Describe the bug
If the value of customData value is too long, then the layout breaks:

1. There is no horizontal spacing between the customData label and the value, both are very narrow (marked red in the screenshot below)
2. The customData value is not being truncated with "...", the value goes beyound the right border (marked blue in the screenshot below)

I fixed it temporarily in my project by adding a custom CSS-Style, but a fix in the reporter itself would be nice:

To Reproduce
Configure the reporter with customData value which is very long, see "Config of multiple-cucumber-html-reporter" section.

Expected behavior

1. There is enough horizontal spacing between customData label and value column
2. The customData value should be truncated with "..." if too long