fix(a2ui-playground): bump preview QR code size to 128px by Huxpro · Pull Request #2704 · lynx-family/lynx-stack

Huxpro · 2026-05-25T08:02:14Z

Summary

Bumps the Web/Native preview QR codes in the A2UI playground from 80px to 128px so they're actually scannable from a phone camera.

For known-demo URLs (~100–120 chars → QR version 5–6, ~40×40 modules), 80px gave each module only ~2px — right at the lower bound of phone camera scanning. 128px gives ~3px per module, much more forgiving.

Side effect: .previewQrContent uses align-items: center with no fixed height, so the row naturally grows with the QR. Multi-line text blocks (title + description + URL row) no longer feel cramped next to a tiny code.

The encoder settings (errorCorrectionLevel: 'L', margin: 1) are already minimal — there's no compression headroom left on the encoder side, so the only meaningful fix for scannability is to render the same modules at more pixels.

Test plan

Open the A2UI playground, render any demo, scan both Web Preview and Native Preview QR codes from a phone — both decode reliably.
Verify the preview panel layout still looks balanced (QR no longer cramped against the text block).

Summary by CodeRabbit

Improvements
- Increased QR code display size in preview panels for better scanning and visibility.
- Adjusted preview layout to a vertical stack with explicit spacing, removed height-limited scrolling, and improved mobile responsiveness by introducing a larger minimum panel height on narrow viewports.

The web/native preview QR codes were 80px on a side. For known-demo URLs (~100-120 chars, QR version 5-6, ~40x40 modules) each module rendered at only ~2px, right at the lower bound of phone camera scanning. Bumping to 128px gives ~3px per module, much more reliable to scan, and since `.previewQrContent` uses align-items: center the row naturally grows with the QR so multi-line text blocks no longer look cramped.

changeset-bot · 2026-05-25T08:02:20Z

⚠️ No Changeset found

Latest commit: 694e452

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2026-05-25T08:02:28Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6226fe2e-6dee-4a15-bac7-847567501214

📥 Commits

Reviewing files that changed from the base of the PR and between 8a328a0 and 694e452.

📒 Files selected for processing (1)

packages/genui/a2ui-playground/src/styles.css

💤 Files with no reviewable changes (1)

packages/genui/a2ui-playground/src/styles.css

📝 Walkthrough

Walkthrough

QR presentation changes: the preview panel now renders QR codes at 128px and the QR section CSS uses a column flex layout with gap, plus a responsive min-height adjustment on the panel body.

Changes

Preview QR changes

Layer / File(s)	Summary
QR code size increase `packages/genui/a2ui-playground/src/components/PreviewPanel.tsx`	The `QrCode` component's `size` prop is increased from `80` to `128` for preview QR cards.
Preview QR section layout update `packages/genui/a2ui-playground/src/styles.css`	Replaced `previewQrSection` height/overflow constraints with `display: flex`, `flex-direction: column`, and `gap`; in `@media (max-width: 980px)` removed `previewQrSection` `max-height` and added `previewPanelBody { min-height: 460px; }`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I nudged the QR to bold and wide,
From eighty small to one-two-eight stride,
The panel stacks with tidy space,
A clearer hop in preview's place,
Small fixes, joyful nibble, pride.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically summarizes the main change: increasing the QR code size from 80px to 128px in the a2ui-playground component.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Copilot

Pull request overview

This PR increases the A2UI playground preview QR code render size to improve phone-camera scannability for Web and Native preview URLs.

Changes:

Updates preview QR codes from 80px to 128px.
Leaves the existing QR generation settings unchanged.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

codecov · 2026-05-25T08:05:54Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

relativeci · 2026-05-25T08:50:44Z

React Example

#8701 Bundle Size — 238KiB (0%).

694e452(current) vs 735f695 main#8687(baseline)

Bundle metrics no changes

	Current #8701	Baseline #8687
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`204`	`204`
Duplicate Modules	`81`	`81`
Duplicate Code	`44.59%`	`44.59%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #8701	Baseline #8687
IMG	`145.76KiB`	`145.76KiB`
Other	`92.24KiB`	`92.24KiB`

Bundle analysis report Branch Huxpro:Huxpro/a2ui-playground-im... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-25T08:50:56Z

Web Explorer

#10277 Bundle Size — 903.53KiB (0%).

694e452(current) vs 735f695 main#10264(baseline)

Bundle metrics no changes

	Current #10277	Baseline #10264
Initial JS	`45.06KiB`	`45.06KiB`
Initial CSS	`2.22KiB`	`2.22KiB`
Cache Invalidation	`0%`	`0%`
Chunks	`9`	`9`
Assets	`11`	`11`
Modules	`231`	`231`
Duplicate Modules	`11`	`11`
Duplicate Code	`27.12%`	`27.12%`
Packages	`10`	`10`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #10277	Baseline #10264
JS	`499.15KiB`	`499.15KiB`
Other	`402.16KiB`	`402.16KiB`
CSS	`2.22KiB`	`2.22KiB`

Bundle analysis report Branch Huxpro:Huxpro/a2ui-playground-im... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-25T08:50:58Z

React Example with Element Template

#969 Bundle Size — 204.36KiB (0%).

694e452(current) vs 735f695 main#956(baseline)

Bundle metrics no changes

	Current #969	Baseline #956
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`124`	`124`
Duplicate Modules	`50`	`50`
Duplicate Code	`45.19%`	`45.19%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #969	Baseline #956
IMG	`145.76KiB`	`145.76KiB`
Other	`58.61KiB`	`58.61KiB`

Bundle analysis report Branch Huxpro:Huxpro/a2ui-playground-im... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

The 128px QR bump in 8a328a0 overflowed `.previewQrSection`, which had `max-height: 132px` (120px on <=980px viewports) with `overflow-y: auto`. With ~20px of vertical padding, that left only ~112px for the QR — so the 128px image triggered a vertical scroll instead of letting the row grow. Removing the cap (and the now-unused `overflow-y: auto`) lets the section size to its content. `.previewPanelBody` already has `flex: 1; min-height: 0`, so the iframe area absorbs the extra height without breaking the column layout.

codspeed-hq · 2026-05-26T18:11:17Z

Merging this PR will degrade performance by 14.31%

❌ 1 regressed benchmark
✅ 80 untouched benchmarks
⏩ 26 skipped benchmarks¹

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	`BASE`	`HEAD`	Efficiency
❌	`basic-performance-large-css`	16.3 ms	19 ms	-14.31%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.

_{Comparing Huxpro:Huxpro/a2ui-playground-improvements (694e452) with main (735f695)}

26 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

relativeci · 2026-05-26T18:13:26Z

React MTF Example

#1835 Bundle Size — 208.94KiB (0%).

694e452(current) vs 735f695 main#1821(baseline)

Bundle metrics no changes

	Current #1835	Baseline #1821
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`199`	`199`
Duplicate Modules	`78`	`78`
Duplicate Code	`44.08%`	`44.08%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #1835	Baseline #1821
IMG	`111.23KiB`	`111.23KiB`
Other	`97.71KiB`	`97.71KiB`

Bundle analysis report Branch Huxpro:Huxpro/a2ui-playground-im... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-26T18:13:29Z

React External

#1816 Bundle Size — 699.5KiB (0%).

694e452(current) vs 735f695 main#1803(baseline)

Bundle metrics no changes

	Current #1816	Baseline #1803
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`17`	`17`
Duplicate Modules	`5`	`5`
Duplicate Code	`7.13%`	`7.13%`
Packages	`0`	`0`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #1816	Baseline #1803
Other	`699.5KiB`	`699.5KiB`

Bundle analysis report Branch Huxpro:Huxpro/a2ui-playground-im... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

Copilot AI review requested due to automatic review settings May 25, 2026 08:02

Copilot started reviewing on behalf of Huxpro May 25, 2026 08:02 View session

Copilot AI reviewed May 25, 2026

View reviewed changes

Comment thread packages/genui/a2ui-playground/src/components/PreviewPanel.tsx

HuJean approved these changes May 27, 2026

View reviewed changes

HuJean enabled auto-merge (squash) May 27, 2026 01:49

HuJean merged commit 0866894 into lynx-family:main May 27, 2026
86 of 89 checks passed

Conversation

Huxpro commented May 25, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

codecov Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

relativeci Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example

#8701 Bundle Size — 238KiB (0%).

Uh oh!

relativeci Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Web Explorer

#10277 Bundle Size — 903.53KiB (0%).

Uh oh!

relativeci Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example with Element Template

#969 Bundle Size — 204.36KiB (0%).

Uh oh!

codspeed-hq Bot commented May 26, 2026

Merging this PR will degrade performance by 14.31%

Performance Changes

Footnotes

Uh oh!

relativeci Bot commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React MTF Example

#1835 Bundle Size — 208.94KiB (0%).

Uh oh!

relativeci Bot commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React External

#1816 Bundle Size — 699.5KiB (0%).

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Huxpro commented May 25, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented May 25, 2026 •

edited

Loading

coderabbitai Bot commented May 25, 2026 •

edited

Loading

codecov Bot commented May 25, 2026 •

edited

Loading

relativeci Bot commented May 25, 2026 •

edited

Loading

relativeci Bot commented May 25, 2026 •

edited

Loading

relativeci Bot commented May 25, 2026 •

edited

Loading

relativeci Bot commented May 26, 2026 •

edited

Loading

relativeci Bot commented May 26, 2026 •

edited

Loading