Issue 45 report redesign

[aarushlohit]

Summary

Fixes #45

This PR redesigns the MRI report section to improve readability, information hierarchy, accessibility, and mobile responsiveness.

Changes Made

• Added an executive summary section with diagnosis, confidence, urgency, scan ID, and generated date

• Reorganized report content into dedicated sections:

  • Diagnostic Images
  • Key Findings
  • Recommendations
  • Metadata
  • Actions

• Consolidated duplicate diagnosis and confidence displays

• Improved report action placement and usability

• Added semantic HTML structure and accessibility improvements

• Added responsive layouts for mobile devices

• Removed outdated and mismatched report-specific CSS selectors

Accessibility Improvements

• Semantic report structure using sections and landmarks
• Improved heading hierarchy
• Better action button labeling
• Focus-visible support
• Status information no longer relies on color alone

Mobile Improvements

• Single-column responsive layout
• Full-width action buttons
• Improved spacing and readability on smaller screens

Validation

• JS syntax validation passed
• Python compilation checks passed
• git diff --check passed
• Browser rendering verified with mocked MRI report data
• No JavaScript console errors observed

Screenshots

after

Attached:

• Desktop report view
• Mobile report view

[Brijeshthummar02]

@aarushlohit show me video of before / after MRI scan. Use Dataset from discussion page

[aarushlohit]

@aarushlohit show me video of before / after MRI scan. Use Dataset from discussion page

ok

[aarushlohit]

@Brijeshthummar02 i have attached before and after screenshot review and approve sir

[Brijeshthummar02]

can you share me ss of entire page you updated of mri scans. also try to scan 2-3 MRI some with tumors, and without tumors.

Maybe a short video clip would be better, make sure to show entire process from check in , upload scan , doctor review.