fix: constrain shared result image on mobile

[sstidl]

Summary

• scale the shared modern result image to the available dialog width and height
• add a 360 px viewport E2E regression test

Verification

• npm run test:e2e — 19 passed
• npx prettier --check frontend/styling/dialog.css tests/e2e/mobile-result-image.spec.js
• git diff --check

Fixes the horizontal clipping visible when opening a shared result on mobile devices.

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Constrain shared result images within mobile dialogs

🐞 Bug fix 🧪 Tests 🕐 Less than 10 minutes

AI Description

• Constrain shared result images to available dialog dimensions while preserving aspect ratio.
• Add 360 px Playwright coverage preventing horizontal image clipping.

Diagram

graph TD
  T["Playwright test"] --> V["360 px viewport"] --> D["Share dialog"] --> I["Result image"]
  C["Dialog CSS"] -->|constrains| I

Loading

High-Level Assessment

Directly constraining the image is the most focused solution because it prevents overflow without hiding content and preserves the source aspect ratio. A mobile-only rule or dialog overflow clipping would be less robust and could mask layout issues.

Files changed (2) +37 / -0

Bug fix (1) +7 / -0

dialog.cssConstrain result images to dialog dimensions +7/-0

Constrain result images to dialog dimensions

• Limits direct result images to the dialog's available width and height. Automatic height and 'object-fit: contain' preserve the image aspect ratio instead of allowing mobile clipping.

frontend/styling/dialog.css

Tests (1) +30 / -0

mobile-result-image.spec.jsAdd mobile share-dialog image regression coverage +30/-0

Add mobile share-dialog image regression coverage

• Adds a Playwright scenario using a 360×800 viewport and an oversized result image. The test opens the share dialog and verifies the rendered image width does not exceed the dialog width.

tests/e2e/mobile-result-image.spec.js

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Tip of the day

💡 Did you know, you can switch off images and animations for a plain-text comment

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

[Copilot]

🟡 Changes recommended

The regression test does not assert the new max-height constraint.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Constrains shared result images within mobile dialogs and adds a 360px viewport regression test.

Changes:

• Adds responsive width and height limits for result images.
• Adds mobile E2E coverage for horizontal containment.

File summaries

File	Summary
tests/e2e/mobile-result-image.spec.js	Tests mobile image width containment; height constraint coverage remains incomplete.
frontend/styling/dialog.css	Constrains result-image dimensions in dialogs.

Review details

• Files reviewed: 2/2 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.