Skip to content

Jim's compact card covers a text box's controls on an expanded Example drawing #609

Open

Description

@Disesfgewu

On an expanded Example drawing, Jim's stage is the compact caption card at z-index: 7, over the bottom-right corner of the canvas. With a short caption it covers 1.3% to 9.0% of the canvas at 1280x800, 1440x900, 1920x1080 and 1250x630 (divider at its maximum); with a self-view or a long caption, up to 20.8% (measurements in #586). A text box's controls (text colors, Confirm, Cancel) sit below the box, and near that corner they land under the card, so a pointer cannot reach them. Placing a box with board-text.js's own layout at every visible point of the expanded canvas on a 25-unit grid, at least one control is under the card for 3.8% of the points at 1280x800, 2.2% at 1440x900, 8.4% at 1920x1080 and 16.6% at 1250x630 with a short caption, and 13.4%, 8.9%, 12.5% and 32.2% with a long one. Ctrl+Enter still confirms and Escape still cancels from the box's text field, and the box can be moved, so the label is not lost, but the mouse path is blocked.

The layout tests check the canvas's size and the card's captions on top, not whether the card overlaps a text box's controls, so they pass either way.

Two ways to fix it, from the review of #586:

  • reserve a strip for the card, for example by shrinking the expanded canvas box by the stage's height, so the card never sits over the canvas;
  • keep the layout, and add a test that the stage's bounds do not intersect a text box's controls near the bottom-right, with whatever change makes it pass (such as placing the controls above the box when the card is below it).

Acceptance: at 1280x800, 1440x900, 1920x1080 and 1250x630 (divider at its maximum), with a long caption and a self-view, a text box created anywhere on the expanded canvas has its Confirm and Cancel reachable by pointer, and a browser test checks it.

Refs #579, related to #512

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions