Repository navigation
e-stepper: a Vertical checkbox for the arrangement of the panes, and a program pane that may shrink to a line - #168
Conversation
…the program may shrink to one line Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: ad3789d The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
|
@codex review |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c9b9a90345
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const programWidthFor = (share: number) => | ||
| Math.round(Math.min(paneSpace - MIN_PANE_WIDTH, Math.max(MIN_PANE_WIDTH, share * paneSpace))); | ||
| Math.round( | ||
| Math.min(paneSpace - MIN_PANE_WIDTH, Math.max(MIN_PROGRAM_WIDTH, share * paneSpace)), | ||
| ); |
There was a problem hiding this comment.
Handle horizontal layouts narrower than the pane minima
When the user keeps the new horizontal arrangement while narrowing the tab below 262 px, paneSpace - MIN_PANE_WIDTH becomes smaller than the 44 px lower bound, so the outer Math.min lets the program pane shrink below its declared minimum; below 218 px it produces a negative flex basis such as flex: 0 0 -18px, which browsers discard. This causes the split to lose its intended sizing precisely because the layout now remains horizontal at narrow widths, so the insufficient-space case needs an explicit nonnegative layout policy.
Useful? React with 👍 / 👎.
| <Checkbox | ||
| readOnly | ||
| checked={!wide} | ||
| label="Vertical" | ||
| style={{ margin: 0, pointerEvents: "none" }} |
There was a problem hiding this comment.
Use one accessible control for the Vertical toggle
For keyboard and assistive-technology users, this Blueprint Checkbox renders a focusable checkbox inside the parent Blueprint Button, creating invalid nested interactive controls and an extra focus target. The outer button also has no aria-pressed or other state, while button descendants may be presented as non-semantic, so the current checked state is not reliably announced; render a single checkbox/toggle control, or make the visual checkbox non-interactive and expose the state on the button.
Useful? React with 👍 / 👎.
…utton states its state Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
|
Both addressed in the latest commit: (1) in a side-by-side tab too narrow for both least widths the program keeps its own (44px) and the diagram gets the rest; the width is never negative nor more than there is (test at 250, 150 and 10px). (2) The checkbox in the button is now only a picture ( |
The arrangement of the program and the environment followed the tab's width at every resize (900px), which switched at unwanted moments. Now:
vertical-distributionicon) next to the step buttons, also with the host's diagram. Ticked: the program above the environment; unticked: side by side.Tests: the choice (width gives the start, a resize does not change it, the checkbox does) and the new limits of the divider.
🤖 Generated with Claude Code