Skip to content

Fix squished diff toolbar in narrow panels - #1733

Merged
ymichael merged 6 commits into
mainfrom
bb/fix-1652-responsive-large-diff-tab-thr_2vv7tztk3f
Aug 17, 2026
Merged

Fix squished diff toolbar in narrow panels#1733
ymichael merged 6 commits into
mainfrom
bb/fix-1652-responsive-large-diff-tab-thr_2vv7tztk3f

Conversation

@ymichael

@ymichael ymichael commented Aug 17, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • let the diff selector, large-change tally, and actions wrap from the toolbar container's available width
  • preserve a readable selector basis and non-shrinking stats/actions without adding viewport or resize state
  • align wrapped stats with the selector label inset and cover the intrinsic layout policy plus control operability

Root cause

The toolbar switched layouts only when the entire app entered its compact drawer. A resizable right panel on a 900px-wide page could therefore remain in the inline layout at just 257px wide, shrinking the selector to 0px and truncating the large-change tally. The revised flex policy wraps intrinsically from the toolbar's own width.

Validation

  • pnpm exec turbo run test --filter=@bb/app --force -- src/components/secondary-panel/ThreadSecondaryPanel.test.ts src/components/secondary-panel/ThreadSecondaryPanel.collapseControl.test.tsx (17 tests)
  • pnpm exec turbo run typecheck --filter=@bb/app
  • pnpm exec turbo run lint --filter=@bb/app --force (no errors)
  • dev-browser mobile QA at 412x915 with 351 files, +38,872 / -22,464; verified readable controls, responsive menu, file expand/collapse, and no page-level overflow
  • dev-browser narrow desktop-panel QA at a 900x915 viewport and 257px toolbar; verified the selector stays readable, the full tally remains visible, controls wrap, and no page-level overflow appears
  • dev-browser wide desktop sanity check at 1440x1000; verified all controls remain on one row

Closes #1652


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.

AGENT GENERATED: by GPT-5.6

@ymichael
ymichael marked this pull request as ready for review August 17, 2026 22:32
@bb-slop-cop

bb-slop-cop Bot commented Aug 17, 2026

Copy link
Copy Markdown

🚨 SLOP COP 🚨 · review

I am SlopCop. I am reviewing this pull request for security, code quality, performance, architecture, and compact-screen behavior.

@ymichael
ymichael force-pushed the bb/fix-1652-responsive-large-diff-tab-thr_2vv7tztk3f branch from a8c9d1f to d6c6919 Compare August 17, 2026 22:47
@ymichael ymichael changed the title Fix squished diff toolbar on compact screens Fix squished diff toolbar in narrow panels Aug 17, 2026
@ymichael
ymichael marked this pull request as draft August 17, 2026 22:51

@bb-slop-cop bb-slop-cop 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.

🚨 SLOP COP 🚨 · review

Plain-English summary

This change lets the Git diff toolbar move controls onto more rows when the panel becomes narrow. Wide panels keep one row.

Findings

I found no actionable security, quality, architecture, duplication, or performance problems.

The final commit uses the toolbar width directly. It does not copy viewport rules into its callers.

Validation

  • Three agents reviewed security, code quality, architecture, duplication, and performance.
  • A GPT-5.6 final review gate returned APPROVE.
  • The focused toolbar test passed.
  • The app type check passed.
  • The diff check passed.
  • Browser checks passed at 320 and 760 pixels. All controls stayed inside the viewport.
  • The full app lint did not finish within eight minutes. It produced no result.

The author changed the head during review. I repeated the focused checks against d6c691958e8bbc907b7753d3a1fff74a0f732be4.

@ymichael

Copy link
Copy Markdown
Collaborator Author

CI follow-up: workflow run 32077636826 was allowed to finish, then its failed integration job was rerun. Attempt 1 failed in fake/smoke/custom-models.test.ts because buildPluginHost could not read plugins/provider-acp/dist/.host-stage-*/host.js. Attempt 2 failed in the same plugin-host staging area: the custom-model test passed, while other integration tests hit missing staged provider-acp/host.meta.json, missing staged provider-claude-code/host.js, and an ENOTEMPTY cleanup error (rerun job).

This is unrelated integration infrastructure flakiness: this PR changes only GitDiffToolbar.tsx and its component test; app tests and the build/typecheck/lint check passed. The same buildPluginHost .host-stage-* failures also occurred on current main run 32076731685 and unrelated PR run 32077823686. No provider/plugin/integration code was changed here.

@ymichael

Copy link
Copy Markdown
Collaborator Author

Final CI follow-up: current head f42338b6e passed the complete CI workflow 32078805247, including the integration job that had flaked in the earlier run. This confirms the earlier buildPluginHost .host-stage-* failures were unrelated infrastructure flakiness.

@ymichael
ymichael marked this pull request as ready for review August 17, 2026 23:11
@ymichael
ymichael marked this pull request as draft August 17, 2026 23:16
@ymichael

Copy link
Copy Markdown
Collaborator Author

CI note for current head 4f330e0ab: workflow 32079692491 passed checks/build/typecheck/lint, app tests, package tests, server tests, and both package-smoke jobs. Its integration job hit the known unrelated buildPluginHost staging race twice: attempt 1 failed reading provider-acp/dist/.host-stage-*/host.js; the failed-job rerun changed which lifecycle test failed and then failed renaming another staged provider-acp/host.js (rerun job). Each attempt otherwise passed 54/55 integration tests.

This PR still changes only the diff toolbar and its component test. The immediately preceding head passed the complete integration job in run 32078805247, further confirming nondeterministic infrastructure flakiness. No plugin-host or integration code was changed here.

@ymichael

Copy link
Copy Markdown
Collaborator Author

Current head 933be8d99 is fully green in CI run https://github.com/get-bb/bb/actions/runs/32080653729. The integration suite passed on this run, superseding the prior plugins/provider-acp/dist/.host-stage-* ENOENT failures and confirming that failure was nondeterministic infrastructure flakiness unrelated to the diff-toolbar files.

@ymichael
ymichael marked this pull request as ready for review August 17, 2026 23:35
@ymichael
ymichael marked this pull request as draft August 17, 2026 23:38
@ymichael
ymichael marked this pull request as ready for review August 17, 2026 23:42
@ymichael
ymichael merged commit c40b1fd into main Aug 17, 2026
10 checks passed
@ymichael
ymichael deleted the bb/fix-1652-responsive-large-diff-tab-thr_2vv7tztk3f branch August 17, 2026 23:43
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.

Diff tab is squished on small screens for large changes

1 participant