Skip to content

Fix Mobile page layout and the profile editor grid - #898

Merged
enaboapps merged 3 commits into
mainfrom
888-mobile-layout
Sep 25, 2026
Merged

enaboapps merged 3 commits into
mainfrom
888-mobile-layout

Conversation

@enaboapps

@enaboapps enaboapps commented Sep 25, 2026 •

Copy link
Copy Markdown
Contributor

Closes #888. Stacked on #897, tracked in #891.

What changed

  • The "Optional" note under the connection band no longer overlaps the QR figure.
  • Install Switchify for mobile and Connect your mobile are two equal cards. They sit side by side when there is room and stack otherwise.
  • The install card shows its heading, then the QR code, then the Google Play link, in both the markup and the visual order.
  • The pairing steps have more space between items, and the Pair a mobile device demonstration sits inside its card.
  • The profile editor's binding rows give the action select and its value control equal shares, instead of a fixed 140px action column. Rows drop to two columns when the dialog is narrower than 560px, using a container query. Errors span both control columns.
  • Profile rows at narrow widths keep their icon tile. An older rule hid every span except the last, which caught the tile once it became a span in Unify list rows, page headers and the sidebar #893.

Validation

On this head:

  • npm run lint passed
  • npm test passed: 238 Vitest tests and 5 Node tests
  • npm run build passed
  • cargo fmt --check, cargo clippy --all-targets -D warnings and cargo test passed (566 tests, 1 ignored). No Rust changes in this stack.
  • Rendered Mobile connection, paired devices, forwarding profiles, and new and built-in profile editors in headless Chrome at 920px and 620px, light and dark.

Review follow-up

An independent review of this layer's head raised these points, now addressed:

  • The install card's markup now reads heading, intro, QR code, then store link, so display: contents and flex order are gone.

🤖 Generated with Claude Code

Rebase validation (2026-09-25)

Rebased onto current main (7fb8fce, including #881) in stack order. git range-diff shows every commit in this PR is patch-equivalent to its previous head, and the intended parent remains its PR base. On the final stack tip (40c75cc), Node 24.19.0 lint, tests and build passed; Rust 1.97.1 format check, Clippy and tests passed. An independent review of the updated PR heads found no actionable findings. CI is rerunning on each new head.

OwenMcGirr and others added 2 commits September 25, 2026 12:49
The Mobile note no longer collides with the QR code: installing the app
and pairing are two equal cards under the connection band, side by side
when there is room. The install card places the QR code between its
intro and the store link without changing DOM order. The profile editor
gives the action and its value equal shares of each row and drops to two
columns in a narrow dialog. Narrow profile rows keep their icon tile.

Closes #888

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The install card's markup now reads heading, intro, QR code, store link,
matching what is shown, so display: contents and flex order are gone.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@enaboapps
enaboapps marked this pull request as ready for review September 25, 2026 11:49
@enaboapps
enaboapps marked this pull request as draft September 25, 2026 11:50
Base automatically changed from 887-switches-page to main September 25, 2026 15:05
@enaboapps
enaboapps marked this pull request as ready for review September 25, 2026 15:05
@enaboapps
enaboapps merged commit d84cf2a into main Sep 25, 2026
6 checks passed
@enaboapps
enaboapps deleted the 888-mobile-layout branch September 25, 2026 15:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix Mobile page layout and the profile editor grid

2 participants