Skip to content

Let the candidate resize the test results panel - #303

Merged
jserv merged 1 commit into
sysprog21:mainfrom
domin67:resize-test-results-panel
Oct 14, 2026
Merged

jserv merged 1 commit into
sysprog21:mainfrom
domin67:resize-test-results-panel

Conversation

@domin67

@domin67 domin67 commented Oct 14, 2026 •

Copy link
Copy Markdown
Contributor

The fixed drawer can hide long compiler output during an interview. Allow candidates to trade editor space for results while keeping both areas usable and preserving the selected height.

Summary

  • Add a vertical splitter between the editor and test results panel.
  • Keep both panels usable by limiting the resizable range.
  • Support keyboard resizing with arrow keys, Home, and End.
  • Preserve the selected panel height across page reloads and window resizing.

Testing

  • Added browser tests for dragging, keyboard controls, bounds, and saved height.
  • All 8 related browser tests pass.
  • Prettier checks pass for all changed files.
  • Manually tested dragging, keyboard resizing, bounds, and saved height on Windows 11 with Google Chrome.

Closes #94


Summary by cubic

Lets candidates resize the test results panel during an interview, so long compiler output no longer gets hidden by the fixed drawer. Adds a draggable splitter with keyboard support that preserves the selected height, while bounds keep both the editor and results area usable.

  • The splitter supports arrow keys, Home, End, and Enter to reset, and stores the height in localStorage.
  • Minimum size keeps the expanded "Add a case" form and results toggles visible; maximum size leaves a short, usable editor.
  • The editor's old 25rem minimum height was removed so the drawer can reach its bounds without overflowing.
  • The divider is hidden when execution is disabled.
  • The drawer reclamps to fit when the window or surrounding editor content shrinks, without discarding the saved height, which is restored when space returns.

Written for commit ea26024. Summary will update on new commits.

View guided diff

cubic-dev-ai[bot]

This comment was marked as resolved.

Comment thread web/styles.css Outdated
Comment thread web/styles.css

.test-drawer {
display: flex;
flex: 0 0 var(--test-drawer-height, auto);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

With a saved height the drawer keeps its fixed flex-basis when #results-toggle collapses #results-body, so collapsing the results leaves an empty block under the toggle instead of giving the room back to the editor as it did before. Let a collapsed drawer size to its content, e.g. .test-drawer:has(#results-body[hidden]) { flex-basis: auto; }, and report the measured height in aria-valuenow while collapsed.

Comment thread web/styles.css Outdated
Comment thread web/interview.js
storageKey: SIDEBAR_WIDTH_KEY,
bounds: sidebarBounds,
});
attachSplitter({

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

When execution is disabled, renderRuntimeConfig hides .test-drawer but not #test-drawer-resizer, and .test-drawer-resizer { display: block } shows it at every width. The candidate gets a 1rem divider in the tab order that resizes nothing, and an arrow key there saves a height measured against the hidden drawer (bounds collapse to 0), which a later session with execution on then restores. Hide the handle next to the drawer with nodes.testDrawerResizer.hidden = !editorOptions.execution.

Comment thread web/interview.js
summary.getBoundingClientRect().bottom -
drawerTop +
nodes.resultsToggle.getBoundingClientRect().height;
const room =

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

room depends on the editor toolbar's height, which changes without any window resize: the sidebar divider narrowing the panel until the toolbar wraps, or applyLanguages(spec) filling the tabs in after init(). attachSplitter reclamps only on window resize, so a saved height can exceed the new max and leave the editor under 6rem until the window changes size. As a follow-up in web/splitter.js, reclamp from a ResizeObserver on the editor stack, the way compactJimStageBesideNarrowPanel already watches its panel.

Comment thread web/styles.css
Comment thread web/styles.css Outdated

@ColtenOuO ColtenOuO left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Please squash the commit.

@domin67
domin67 force-pushed the resize-test-results-panel branch from f945daf to d7778ac Compare October 14, 2026 07:34
@jserv
jserv requested a review from ColtenOuO October 14, 2026 07:51
The fixed drawer can hide long compiler output during an interview.
Add an accessible splitter that preserves the selected height while
keeping the editor, controls, and collapsed drawer usable.
@domin67
domin67 force-pushed the resize-test-results-panel branch from d7778ac to ea26024 Compare October 14, 2026 08:58

@ColtenOuO ColtenOuO left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

LGTM.

@jserv
jserv merged commit 8394d54 into sysprog21:main Oct 14, 2026
6 checks passed
@jserv

jserv commented Oct 14, 2026

Copy link
Copy Markdown
Contributor

Thank @domin67 for contributing!

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.

Let the candidate resize the test results panel

3 participants