Update Reports overview screenshots mobile & desktop

[gmarav05]

Summary

Updated the Reports Overview documentation with new screenshots and improved accuracy to reflect the current UI.

Fixes #2061

Changes

• Updated mobile and desktop screenshots for:

  • Main List
  • Filters & Search
  • Action Buttons
  • Bulk Delete Reports
  • Detail Pages

• Ensured screenshots reflect:

  • Latest UI
  • Correct icons (review, error states)
  • Action buttons and interactions

• Improved alignment between documentation text and actual UI behavior

Why

The previous screenshots were outdated and did not accurately represent the current UI. This update improves clarity and helps users better understand the Reports functionality.

Testing

• Verified screenshots against local CHT instance.

Screenshots

Updated images are included in:
content/en/reports/reports-overview/

Screen.Recording.2026-03-22.at.5.37.17.PM.mov

[mrjones-plip]

This is great work @gmarav05 ! I can tell you went through a lot of effort to modernize the screenshots on the new UI - they look great!

Can you zoom out? The zoom level is causing the report name to be clipped (see #1) and the nav buttons to be clipped as well (see #2).

While you're in there, can you reduce the pixel dimensions of the new images? By using the performance analysis in Firefox I'm seeing the new images cause the page to go from 1,184.88 kB (see #1) way up to 3,118.32 kB (see #2) on an empty cache:

Finally, and this is strictly bonus points and not required, use Chrome with and it's device frame feature and choose Nexus 6p which looks really great! You can see the example on the left in the above screenshot (#3). Again - not required but a nice to have!