feat(a2ui-playground): mobile tab bar + chrome compaction by Huxpro · Pull Request #2753 · lynx-family/lynx-stack

Huxpro · 2026-05-28T16:16:18Z

Summary

Reworks the A2UI playground for phones (≤720px) so the preview isn't permanently pushed below the fold. Each page now has two full-screen panes — Chat/Code and Preview — toggled by a bottom tab bar. Everything else around the input/code area gets tightened. Desktop layout is untouched.

Tab bar

New <MobileTabBar /> renders Edit + Preview tabs with role=tablist, accent-underline active state, icon + label. Always rendered; CSS shows it only at ≤720px via .mobileTabBar rules in styles.css.
AIChatPage and DemosPage each hold an activeMobileTab state and apply it as data-active-tab on their page root. CSS hides the non-active pane and the PanelResizeHandle. Tab switching is pure CSS — state (chat draft, scroll position, code edits, simulation speed) is preserved across tabs.

Chrome compaction (`≤720px`)

Lynx GenUI Playground wordmark drops on phones (was truncating to Lynx GenUI Playg…). Logo alone carries the brand.
Send button no longer forced to width: 100%; stays a compact 38px pill next to the model selector.
Conversation panel collapses into a 52px horizontal strip: + New Chat as a 36px icon button, conversations as single-line chips with the desktop active-bar indicator. Edit/Del revealed only on the active chip (matches desktop hover behavior — was force-shown on every card before).
Scenarios sidebar collapses the same way: back-icon on the left, scenarios as one-line chips scrolling horizontally on the right. SCENARIOS heading dropped (redundant when chips are the only content).
Create page header (Create / Online Agent / Describe the UI…) dropped on mobile — the input area itself communicates the same thing and this band was eating ~120px.
A2UI Messages title gets white-space: nowrap (was wrapping to two lines), JSON badge hidden, toolbar buttons tighter, code panel flex: 1 so the editor fills the freed space.

Test plan

Resize browser to ≤720px (or use mobile device toolbar). Bottom tab bar should appear on Create and Examples → demo detail pages.
Tab switching preserves state — type in the chat input, switch to Preview, switch back: text still there. Same for the JSON editor on Examples.
Create page Edit tab: conversation strip = ~52px tall, + icon button + horizontal chip list. Edit/Del only visible on the active chip.
Examples page Edit tab: back-arrow icon + horizontal scenario chips. JSON editor fills the rest of the viewport.
Preview tab on both pages: phone preview takes full viewport (minus top nav + bottom tab bar). Open on phone sheet trigger from feat(a2ui-playground): container queries + mobile share sheet #2731 still works.
Resize back ≥720px → desktop side-by-side layout returns unchanged; bottom tab bar disappears.
Light + dark themes both render cleanly.

Summary by CodeRabbit

New Features
- Mobile tab navigation for narrow screens: tappable Edit/Preview tabs with customizable edit label; integrated into chat and demos pages to preserve active pane.
Style
- Wide mobile responsive overhaul (max-width: 720px): single-pane views, collapsed conversation strip, icon-only controls, tightened toolbars, hidden header text for logo-only layout.
- Adjusted preview fullscreen behavior for specific narrow-width range.

changeset-bot · 2026-05-28T16:16:44Z

⚠️ No Changeset found

Latest commit: 15a0d59

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-28T16:16:53Z

Caution

Review failed

Failed to post review comments

📝 Walkthrough

Walkthrough

Adds a reusable MobileTabBar and integrates mobile tab state into AIChatPage and DemosPage; responsive CSS at max-width:720px hides inactive panes, collapses sidebars/headers into compact strips, and exposes active tab via data-active-tab.

Changes

Mobile Tab UI System

Layer / File(s)	Summary
MobileTabBar component and types `packages/genui/a2ui-playground/src/components/MobileTabBar.tsx`	Defines `MobilePaneTab` union and implements `MobileTabBar` as an accessible tablist with "Edit"/"Preview" buttons driven by `activeTab` and `onChange`, with optional `editLabel`.
Mobile tab bar and global styles `packages/genui/a2ui-playground/src/styles.css`	Adds `.mobileTabBar`, `.mobileTab`, and `.mobileTabLabel` styles with active underline and hides `.brand` at `max-width: 720px`.
AIChatPage mobile tab integration `packages/genui/a2ui-playground/src/pages/AIChatPage.tsx`, `packages/genui/a2ui-playground/src/pages/AIChatPage.css`	Imports `MobileTabBar` and type, adds `activeMobileTab` state, sets `data-active-tab` on the page root, renders `MobileTabBar` (`editLabel='Chat'`), and updates CSS to hide inactive panes, collapse conversation panel to a 52px strip, and adjust send/header styling on mobile.
DemosPage mobile tab integration `packages/genui/a2ui-playground/src/pages/DemosPage.tsx`, `packages/genui/a2ui-playground/src/pages/DemosPage.css`	Imports `MobileTabBar` and type, adds `activeMobileTab` state, sets `data-active-tab`, renders `MobileTabBar` (`editLabel='Code'`), and updates CSS to toggle pane visibility, remove resize handle, collapse sidebar to a horizontal scenario chip row, and tighten code panel toolbar on mobile.
PreviewPanel auto-fullscreen adjustment `packages/genui/a2ui-playground/src/components/PreviewPanel.tsx`	Restricts auto-fullscreen to viewport widths >720 and <=980 and updates comments about tab-bar behavior on narrower screens.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

lynx-family/lynx-stack#2690: Touches AIChatPage mobile layout and CSS with related mobile behavior changes.

Suggested reviewers

HuJean

Poem

🐰 I hopped along the UI bars,
Two tiny tabs like shining stars.
Tap "Edit" or "Preview", quick and neat,
Panes tuck in, the layout's sweet.
Cheers from a rabbit — pixels meet!

🚥 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 accurately summarizes the main changes: introducing a mobile tab bar UI component and compacting chrome for mobile screens (≤720px), which are the core objectives of this PR.
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

Adds a mobile (≤720px) layout for the A2UI playground that swaps between Edit and Preview panes via a bottom tab bar, and compacts surrounding chrome (header, conversations strip, scenarios strip, code toolbar, send button) so the preview is no longer pushed off-screen.

Changes:

New MobileTabBar component with role=tablist rendered by both AIChatPage and DemosPage, with data-active-tab driving CSS-only pane switching.
CSS rules under @media (max-width: 720px) hide the inactive pane/resize handle and convert sidebar/conversation panel into 52px horizontal strips.
Drops the brand wordmark and chatHeader on mobile; loosens chatSendBtn from full-width to a 38px pill.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/genui/a2ui-playground/src/components/MobileTabBar.tsx	New tablist component with Edit/Preview buttons.
packages/genui/a2ui-playground/src/pages/AIChatPage.tsx	Adds `activeMobileTab` state and renders `MobileTabBar`.
packages/genui/a2ui-playground/src/pages/AIChatPage.css	Mobile tab-mode rules, conversation strip, send button pill, header drop.
packages/genui/a2ui-playground/src/pages/DemosPage.tsx	Adds `activeMobileTab` state and renders `MobileTabBar`.
packages/genui/a2ui-playground/src/pages/DemosPage.css	Mobile tab-mode rules for sidebar/scenarios/code toolbar.
packages/genui/a2ui-playground/src/styles.css	Global `.mobileTabBar`/`.mobileTab` styles and `≤720px` visibility.

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

coderabbitai · 2026-05-28T16:20:41Z

Actionable comments posted: 0

coderabbitai · 2026-05-28T16:26:34Z

Actionable comments posted: 0

coderabbitai · 2026-05-28T16:31:21Z

Actionable comments posted: 0

Adds a bottom tab bar (Chat/Code <-> Preview) so each pane is full screen on phones, and tightens the chrome that's eating vertical space around the input/code areas. Desktop layout is untouched. Tab bar: - New <MobileTabBar /> renders Edit + Preview tabs with role=tablist, accent-underline active state, icon + label. Always rendered, CSS shows it only at <=720px via the new shared .mobileTabBar rules. - AIChatPage + DemosPage each hold an activeMobileTab state and apply it as data-active-tab on their page root. CSS hides the non-active pane and the PanelResizeHandle. Tab switching is pure CSS — state (chat draft, scroll position, code edits) is preserved. Chrome compaction (<=720px): - "Lynx GenUI Playground" wordmark drops on phones (was truncating to "Lynx GenUI Playg..."). Logo alone carries the brand. - Send button no longer forced to width: 100%; stays a 38px pill next to the model selector. - Conversation panel collapses into a 52px horizontal strip: + New Chat as a 36px icon button, conversations as one-line chips with the desktop active-bar indicator and Edit/Del revealed only on the active chip (matching desktop hover behavior). - Scenarios sidebar collapses the same way: back-icon on the left, scenarios as one-line chips scrolling horizontally on the right; SCENARIOS heading dropped (redundant when chips are the only content in the strip). - "Create / Online Agent / Describe the UI..." page header dropped on mobile — the input area itself communicates the same thing and this band was eating ~120px. - A2UI Messages title gets white-space: nowrap (was wrapping to two lines), JSON badge hidden, toolbar buttons tighter, code panel flex: 1 so the editor fills the freed vertical space.

The Preview panel's auto-fullscreen effect was firing on demo selection at any viewport ≤980px. Since the new bottom tab bar (Chat/Code <-> Preview) kicks in at ≤720px, the auto-fullscreen would override it on phones: tapping the Preview tab landed the user in a fullscreen overlay with only an X to escape, bypassing the tab system entirely. Narrow the auto-fullscreen range to 721–980px so the tablet/narrow- desktop case still gets the focus boost, while phones let the tab bar drive the layout.

codecov · 2026-05-29T02:30:59Z

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!

codspeed-hq · 2026-05-29T02:35:27Z

Merging this PR will not alter performance

✅ 81 untouched benchmarks
⏩ 26 skipped benchmarks¹

_{Comparing Huxpro:Huxpro/a2ui-mobile-tabs (15a0d59) with main (c6ec688)}

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. ↩

Copilot AI review requested due to automatic review settings May 28, 2026 16:16

Copilot started reviewing on behalf of Huxpro May 28, 2026 16:16 View session

Copilot AI reviewed May 28, 2026

View reviewed changes

Huxpro force-pushed the Huxpro/a2ui-mobile-tabs branch from 1bdef03 to abe44fc Compare May 28, 2026 16:19

Huxpro added 2 commits May 29, 2026 10:19

Huxpro force-pushed the Huxpro/a2ui-mobile-tabs branch from de40a78 to 15a0d59 Compare May 29, 2026 02:19

HuJean approved these changes May 29, 2026

View reviewed changes

HuJean merged commit 87990b5 into lynx-family:main May 29, 2026
44 checks passed

This was referenced Jun 3, 2026

feat(a2ui-playground): unify icon set and button system #2776

Merged

feat(a2ui-playground): preview QR pane — inline on desktop, drawer on mobile, draggable divider #2791

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(a2ui-playground): mobile tab bar + chrome compaction#2753

feat(a2ui-playground): mobile tab bar + chrome compaction#2753
HuJean merged 2 commits into
lynx-family:mainfrom
Huxpro:Huxpro/a2ui-mobile-tabs

Huxpro commented May 28, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented May 28, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 28, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

Copilot AI left a comment

Uh oh!

coderabbitai Bot commented May 28, 2026

Uh oh!

coderabbitai Bot commented May 28, 2026

Uh oh!

coderabbitai Bot commented May 28, 2026

Uh oh!

codecov Bot commented May 29, 2026

Uh oh!

codspeed-hq Bot commented May 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

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

Uh oh!

Summary

Tab bar

Chrome compaction (≤720px)

Test plan

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented May 28, 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 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

coderabbitai Bot commented May 28, 2026

Uh oh!

coderabbitai Bot commented May 28, 2026

Uh oh!

coderabbitai Bot commented May 28, 2026

Uh oh!

codecov Bot commented May 29, 2026

Codecov Report

Uh oh!

codspeed-hq Bot commented May 29, 2026

Merging this PR will not alter performance

Footnotes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Huxpro commented May 28, 2026 •

edited by coderabbitai Bot

Loading

Chrome compaction (`≤720px`)

changeset-bot Bot commented May 28, 2026 •

edited

Loading

coderabbitai Bot commented May 28, 2026 •

edited

Loading