Skip to content

e-stepper: a Vertical checkbox for the arrangement of the panes, and a program pane that may shrink to a line - #168

Merged
martin-henz merged 4 commits into
mainfrom
estepper-vertical-choice
Oct 11, 2026
Merged

martin-henz merged 4 commits into
mainfrom
estepper-vertical-choice

Conversation

@martin-henz

@martin-henz martin-henz commented Oct 11, 2026 •

Copy link
Copy Markdown
Member

The arrangement of the program and the environment followed the tab's width at every resize (900px), which switched at unwanted moments. Now:

  • A Vertical checkbox (with the vertical-distribution icon) next to the step buttons, also with the host's diagram. Ticked: the program above the environment; unticked: side by side.
  • The tab's width only gives the first choice, when the tab is first measured (900px or more: side by side). After that, only the user changes it.
  • The program pane's least size is relaxed: 40px high when stacked (about one line), 44px wide when side by side (about three characters; was 80 / 200). The diagram keeps its least sizes.

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

…the program may shrink to one line

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest 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

@martin-henz

Copy link
Copy Markdown
Member Author

@codex review

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-11T02:26:54.144863Z c9b9a90 Manual request
ℹ️ 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" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

Comment on lines 367 to +370
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)),
);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge 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 👍 / 👎.

Comment on lines +451 to +455
<Checkbox
readOnly
checked={!wide}
label="Vertical"
style={{ margin: 0, pointerEvents: "none" }}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge 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>
@martin-henz

Copy link
Copy Markdown
Member Author

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 (tabIndex=-1, aria-hidden) and the button carries the state with aria-pressed.

@martin-henz
martin-henz merged commit 595c9a7 into main Oct 11, 2026
1 check passed
@martin-henz
martin-henz deleted the estepper-vertical-choice branch October 11, 2026 02:34
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.

1 participant