search

cucumber / html-formatter

HTML formatter for reporting Cucumber results
https://cucumber.io/
MIT License
14 stars 5 forks source link

Mobile friendly report #237

Closed tim-yao closed 1 year ago

tim-yao commented 1 year ago

🤔 What's the problem you're trying to solve?

On mobile phones, the HTML report displayed ugly, and the text is too small. We often get test report notifications on the phone, so mobile readability is something I am looking for.

See the below example of a report displayed on the iPhone screen:

Screenshot 2023-05-26 at 3 41 52 pm

✨ What's your proposed solution?

The meta column layout on the top is not follow normal mobile responsive design, it's better to change to a vertical stack so it can have more space for the information.

Also, if the feature file path with the name is too long, make sure it's not breaking the layout like in the above screenshot.

⛏ Have you considered any alternatives or workarounds?

📚 Any additional context?

This text was originally generated from a template, then edited by hand. You can modify the template here.

mpkorstanje commented 1 year ago

Would be happy to take a pull request for this. Though I suspect it would require some changes in https://github.com/cucumber/react-components

tim-yao commented 1 year ago

Hi @mpkorstanje , I had a look at the react-components project in my local and I found that one has better mobile styles than the one in cucumber HTML formatter. Is HTML formatter project using the latest React components?

Screen shot from react components. You can see the feature file name wraps. Screenshot 2023-05-27 at 12 27 49 pm

I also checked the report at https://reports.cucumber.io. That one is even better. But feature file name is not wrapped.

Screenshot 2023-05-27 at 12 22 29 pm Screenshot 2023-05-27 at 12 22 39 pm

mpkorstanje commented 1 year ago

Is HTML formatter project using the latest React components?

Yes. This project uses "@cucumber/react-components": "21.0.1" the latest version. There is some unreleased material in the repo but I don't see anything that immediately relates to this. Granted my knowledge of react is practically non-existent.

Screen shot from react components. You can see the feature file name wraps.

Unfortunately I don't have a clue!