[SunkenInTime]

ci: test web

People arriving from a Reddit or Twitter post will often land on a phone, from a share link. Today the library won't scroll, because every card takes the touch as a drag. Search, New and the account menu sit off the right edge. A share link opens the desktop editor, with most of the map cut off.

The gate. FormFactor in lib/const/form_factor.dart is the one breakpoint. It needs the web build and a browser reporting iOS or Android, then splits phone from tablet at a 600px shortest side. iPads count as iOS because Flutter reads their touch points. A desktop window of any size stays desktop, in the app or in a browser.

Library.

• A finger on a card now scrolls. Cards stop being draggable on phones and tablets.
• On a phone the strip becomes a row of actions over a row of tabs, with 36px targets. They share one row on a sideways phone. Search takes over the actions row while it's open.
• Tablets keep the desktop strip, which already fits at 768px.

Share links and view-only strategies. TouchStrategyViewer replaces the editor for anyone who can only view, on phones and tablets. The map fits the screen, sized from each map's own art, with the pages under it upright or beside it sideways. It has no map card or toolbar, because a viewer can't use them. Log In and Add to library are labelled buttons, since a finger gets no tooltip. While a strategy loads, touch devices see the wing loader instead of the desktop skeleton with its panels.

How far this got

I ran a build against the dev deployment in a browser (Edge) at phone and tablet size with touch: iPhone 14, iPhone SE, Pixel 7, iPad Pro 11 and iPad Mini viewports. Console errors were zero on all of them.

• Signed-in library: scrolled by touch on the iPhone and iPad Pro viewports. On the iPhone, sign-in, New, Sort, Account, Search, Shared, Community and opening a folder all worked.
• Signed-out share link on a phone: pinch, pan to the map's edge, switch pages, rotate, log in from the link, Add to library. The strategy then showed in Shared. A tapped lineup opened its full-screen viewer.
• Review fixes, each seen before and after in the browser: a 700x680 tablet window no longer crops the map beside the pages, and rotating during a search keeps the search in the field.
• Desktop: the 1440x900 and 420x800 windows are pixel-identical to main, for the signed-in library and for the signed-out link, built from the same data.

What isn't covered

• Lineup pictures showed a placeholder in my run. I expect that's the rig: dev image storage only accepts localhost:8765, and I served on another port. I didn't confirm it.
• Tablet library controls keep their desktop 28px size.
• Moving strategies and folders between folders stays desktop-only, because dragging is the only way to do it. There's no Move menu item yet.
• What's new has no button in the phone strip. Beta stays.
• The upright map fits the art, so an ability that reaches past the art's edge is cut off until you pan. That trade made Corrode about 50% larger than fitting the whole canvas.
• An editor on a phone is still the desktop layout. That's the next two PRs.

Confidence Score: 5/5

The PR appears safe to merge; the previous screen-reader issue is fixed and no new actionable issues were found.

Summary

Adds phone and tablet library layouts and a touch-friendly viewer for view-only strategies.

• Phone libraries fit the screen and scroll with a finger.
• View-only strategies fit the screen on phones and tablets.
• The library search stays visible when its field rebuilds.

_{Reviews (4) · Last reviewed commit: "Let screen readers switch pages in the v..." · Reviewed by Greptile}

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 59 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: cd07ef24-9d68-42c3-aa08-d128c97b3605

Commits

Reviewing files that changed from the base of the PR and between 9e799b1 and 07bf3fd.

Files selected for processing: 10

• lib/const/form_factor.dart
• lib/strategy_view.dart
• lib/widgets/custom_search_field.dart
• lib/widgets/folder_card.dart
• lib/widgets/library_breadcrumb.dart
• lib/widgets/library_title_strip.dart
• lib/widgets/strategy_tile/strategy_tile.dart
• lib/widgets/touch_strategy_viewer.dart
• test/form_factor_test.dart
• test/search_field_rebuild_test.dart

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

• X
• Mastodon
• Reddit
• LinkedIn