Skip to content

Make QR code in PairingCodeContentView adaptive for different screen sizes #4010

@guiyanakuang

Description

@guiyanakuang

Problem

The QR code in PairingCodeContentView uses a fixed size (275x275 dp) from AppSizeValue.qrCodeSize. Since this view is in commonMain and will be displayed on phones, iPads, and desktops with varying screen sizes and aspect ratios, the fixed size doesn't adapt well — it can be too large on small screens or waste space on large ones.

Additionally, the Verified_user icon should use a green success color to better convey its security meaning.

Solution

  • Replace fixed qrCodeSize with adaptive sizing using BoxWithConstraints
  • QR code size adapts based on available space (minOf(maxWidth, maxHeight)), clamped between 120dp and 400dp
  • QR bitmap generated at fixed 512x512 resolution (QR codes scale well)
  • Layout prioritizes showing all fixed content (title, instructions, security info, expiry) with QR code filling remaining space
  • Use ThemeExt.success.onContainer for the Verified_user icon color
  • Remove unused qrCodeSize field from AppSizeValue and DesktopAppSizeValue

Metadata

Metadata

Assignees

No one assigned

    Labels

    EnhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions