“Features Overview” section overlaps Report Details

[QAPranav]

Environment (please complete the following information)

multiple-cucumber-html-reporter: 3.5.0

Node.js version: v18.19.0

NPM version: 9.8.1

Platform name and version: Windows 11 / macOS 14

Cucumber version: 10.2.1 (Playwright + Cucumber setup)

Config of multiple-cucumber-html-reporter

const report = require('multiple-cucumber-html-reporter');

report.generate({
  jsonDir: './cucumber-reports/json',
  reportPath: './cucumber-reports/html',
  displayDuration: true,
  pageTitle: 'BDD Automation Report',
  metadata: {
    browser: { name: 'chrome', version: 'latest' },
    platform: { name: 'Windows 11' },
    device: 'CI Runner',
  },
  customData: {
    title: 'Run Info',
    data: [
      { label: 'Project', value: 'Playwright API Tests' },
      { label: 'Branch', value: process.env.GITHUB_REF || 'main' },
      { label: 'Node Version', value: process.version },
        { label: 'Build Version', value: '1.0.0' },
      { label: 'Executed By', value: os.userInfo().username },
      {
        label: 'Operating System',
        value: `${platformName} ${platformVersion}`,
      },
      { label: 'Device Hostname', value: deviceName },
      { label: 'Node.js Version', value: nodeVersion },
      { label: 'Playwright Version', value: playwrightVersion },
      { label: 'Git Branch', value: gitBranch },
      { label: 'Features', value: featureCount },
      { label: 'Scenarios', value: scenarioCount },
      { label: 'Steps', value: stepCount },
      { label: 'Report Generated On', value: new Date().toLocaleString() },
    ],
  },
});

Describe the bug

When generating the HTML report, the “Features Overview” section overlaps or visually collides with the Report Details area.
This happens especially when the page width is below ~1300 px or when the environment metadata is long enough to push the layout down.

The overlap causes part of the feature table or cards to cover the details section, making some data unreadable.

To Reproduce

Steps to reproduce:

Run any Cucumber BDD suite to produce JSON results (2–3 features).

Generate the HTML report using the configuration above.

Open the report in Chrome or Edge at 100 % zoom.

Scroll to the “Features Overview” section.

Observed: the features section overlaps the report details container.

Expected behavior

The Features Overview and Report Details sections should stack vertically without overlapping.
Each block should have its own margin and stacking context, maintaining a clear visual separation.

Log

No specific runtime error in console.
Layout issue reproducible visually.
If debug: true is enabled, no functional warnings are emitted.

Additional context

Verified on Chrome (Windows 11), Edge (Windows 11), and Safari (macOS 14).

Issue also visible in responsive / smaller viewport modes.

Possible CSS fix:

/* --- Fix: prevent Features Overview from overlapping report details --- */
.features-overview,
.feature-overview {
  position: relative !important;
  z-index: 2;
  margin-bottom: 48px !important;
  padding-bottom: 8px;
}

.report-details {
  position: relative;
  z-index: 1;
  margin-top: 12px;
}

/* Extra spacing for medium viewports (≤1366px) */
@media (max-width: 1366px) {
  .features-overview,
  .feature-overview {
    margin-bottom: 60px !important;
  }
}

Adding this rule resolves the overlap visually in all tested browsers.