Skip to content

Add hover background to split action buttons - #2271

Merged
lawrencecchen merged 51 commits into
mainfrom
fix-minimal-mode-bottom-border
Mar 31, 2026
Merged

lawrencecchen merged 51 commits into
mainfrom
fix-minimal-mode-bottom-border

Conversation

@lawrencecchen

@lawrencecchen lawrencecchen commented Mar 28, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • Split buttons (terminal, browser, split right/down) show a subtle rounded-rect background on hover

Related


Summary by cubic

Reworks the tab bar for full-width scrolling and adds a subtle hover background behind the split action buttons. Switches to mask-based button area hiding so no backdrop color is needed; keeps scroll fades masked to eliminate seams and bleed.

  • New Features

    • Add Split Button Layout debug window with 6 switchable backdrop styles; alphabetize the Debug Windows menu.
  • Bug Fixes

    • Render bottom separator above scroll fades and clear under the button area to prevent bleed.
    • Fix right fade threshold by excluding the drop zone, with 4pt tolerance and a 32pt buffer.
    • Mask scroll fades to remove color mismatch and seams.
    • Hide the button region with a mask (no backdrop color) to avoid seams and layout shift.
    • Remove split buttons from layout in minimal mode; add trailing scroll padding to reserve space for buttons.

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

Summary by CodeRabbit

  • Chores
    • Updated a bundled dependency snapshot to a newer compatible version. This behind-the-scenes refresh may improve stability, compatibility, and maintainability without changing public APIs or visible functionality. Low-risk change; no user-facing behavior or exported interfaces were modified.

Split buttons (terminal, browser, split right/down) now show a subtle
rounded-rect background highlight on hover. Matches standard macOS
toolbar button behavior.
@vercel

vercel Bot commented Mar 28, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
cmux Ready Ready Preview, Comment Mar 30, 2026 10:10pm

@coderabbitai

coderabbitai Bot commented Mar 28, 2026 •

Copy link
Copy Markdown

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Updated the vendor/bonsplit submodule reference from commit 447ac42b45256bdf333659d2dbe955afcaa87f6b to 89c7bec6fbac3e4614b11dfb201a988ee8b189e5, changing the bundled dependency snapshot used by the repository.

Changes

Cohort / File(s) Summary
Vendor Submodule Update
vendor/bonsplit
Submodule commit pointer updated from 447ac42b45256bdf333659d2dbe955afcaa87f6b to 89c7bec6fbac3e4614b11dfb201a988ee8b189e5.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

Poem

🐇 I hopped the hash from old to new,
A tiny bump, a quiet view,
Vendor burrow got a tweak,
Gentle hops — no havoc, sleek,
Carrot cheers for changes few. 🥕

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Title check ⚠️ Warning The title claims to 'Add hover background to split action buttons' but the actual change only updates the bonsplit submodule commit reference, not directly implementing UI changes. Update the title to reflect the actual change, such as 'Update bonsplit vendor submodule' or 'Revert hover background changes and fix scroll fade overlays via bonsplit update'.
Description check ⚠️ Warning The PR description lacks required sections from the template: Testing, Demo Video, Review Trigger, and Checklist are all missing. Add the missing template sections: Testing (how tested and what verified), Demo Video (UI change video), Review Trigger comment block, and complete the Checklist.
✅ Passed checks (1 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix-minimal-mode-bottom-border

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@cubic-dev-ai cubic-dev-ai 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.

No issues found across 1 file

@greptile-apps

greptile-apps Bot commented Mar 28, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR bumps the vendor/bonsplit submodule from commit 447ac42b to f87666cc to pull in hover-background styling for the split action buttons (terminal, browser, split right, split down). The change adds a subtle rounded-rect highlight on hover, consistent with standard macOS toolbar button behavior, and is a direct follow-up to PR #2218.

  • Single-file change: only the submodule pointer is updated in the parent cmux repo.
  • The underlying UI change is purely cosmetic (hover state visual feedback) with no data-model, network, or API-surface impact.
  • No issues found; the commit message, description, and linked issue (Minimal mode: bottom border visual artifact at window corners #2270) are all consistent with the stated intent.

Confidence Score: 5/5

Safe to merge — pure cosmetic hover-state change in the bonsplit submodule with no logic, data, or API surface impact.

The only change in the parent repo is a submodule pointer bump. The bonsplit change is a UI-only hover-background addition that matches platform conventions. No regressions are expected and no blocking issues were found.

No files require special attention.

Important Files Changed

Filename Overview
vendor/bonsplit Submodule pointer bumped from 447ac42 to f87666c; new bonsplit commit adds hover-background highlight to split action buttons (terminal, browser, split right/down) matching macOS toolbar button behavior.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User hovers over split action button] --> B{Button type?}
    B --> |Terminal| C[Show rounded-rect hover background]
    B --> |Browser| C
    B --> |Split Right| C
    B --> |Split Down| C
    C --> D[User sees macOS-style toolbar highlight]
    D --> E[User clicks to perform split action]

    subgraph bonsplit submodule f87666cc
        C
        D
    end
Loading

Reviews (1): Last reviewed commit: "Prevent fade overlays from bleeding into..." | Re-trigger Greptile

@coderabbitai coderabbitai 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.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@vendor/bonsplit`:
- Line 1: The vendor/bonsplit gitlink in the parent repo points to commit
b22df2b which is not present on the submodule remote; push that commit to the
submodule's origin main branch first (ensure b22df2b is reachable from
origin/main in the bonsplit repo), then in the parent repo update the submodule
pointer by checking out the updated submodule state and committing the change to
vendor/bonsplit so the gitlink matches the remote; finally verify origin/main
contains b22df2b before merging.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: dd5f1daa-08c8-48eb-8035-b2ea9bb5723e

📥 Commits

Reviewing files that changed from the base of the PR and between 2d51c14 and 81af9da.

📒 Files selected for processing (1)
  • vendor/bonsplit

Comment thread vendor/bonsplit Outdated
@lawrencecchen
lawrencecchen merged commit 978dd2c into main Mar 31, 2026
14 checks passed
bn-l pushed a commit to bn-l/cmux that referenced this pull request Apr 3, 2026
* Add hover background to split action buttons

Split buttons (terminal, browser, split right/down) now show a subtle
rounded-rect background highlight on hover. Matches standard macOS
toolbar button behavior.

* Prevent fade overlays from bleeding into bottom separator

* Render bottom separator above fade overlays to prevent bleed

* Exclude drop zone from scroll fade threshold

* Revert button hover, fix fade threshold with 32pt buffer

* Fix right fade threshold: subtract drop zone, 4pt tolerance

* Add leading padding to split buttons, fix fade threshold

* Rework tab bar: full-width scroll with floating split buttons

* Use ultraThinMaterial blur for floating split buttons

* Make split buttons group full height

* Full-height split button blur background

* Inset split buttons from bottom separator

* Fix blur overlapping separator

* Use matching tab bar bg for split buttons, clear separator

* Use regularMaterial blur for split buttons

* Try thickMaterial for split buttons

* Fade gradient + solid barFill for floating split buttons

* Use extended right fade as split buttons backdrop

* Add 5 debug styles for split button background

* Add Split Button Style debug window to Debug menu

* Clean up: no-bg floating buttons, alphabetical debug menu

- Split buttons float with no background (tabBarBackground covers the
  area, scroll padding prevents tabs from appearing behind buttons)
- Default splitButtonsWidth to 120 so first render has correct padding
- Remove split button style debug window and debug styles
- Alphabetize Debug Windows menu entries, remove dividers

* Revert to HStack sibling layout, add debug menu docs to CLAUDE.md

- Split buttons are HStack siblings of the ScrollView, not overlays.
  Single .background() on parent, no compositing mismatch.
- Alphabetize Debug Windows menu, remove dividers.
- Document Debug menu in CLAUDE.md.

* Add Split Button Layout debug window with 5 switchable approaches

* Fix fade gradient color to match tab bar background

* Add fade color debug window with 6 color options

* Use mask for scroll fades, fixes color mismatch

* Hide scroll fades in minimal mode unless hovering

* Remove split buttons from layout when hidden in minimal mode

* Always show fades, overlay buttons to prevent scroll jump

* Add hover-only mask fade behind split buttons

* Reduce button mask area to 90pt

* Animate button mask smoothly

* Fade entire button group together via opacity

* Add blur behind buttons with fade mask

* Use theme barBackground for button backdrop

* Blur + theme tint for button backdrop

* More tint (0.85), less blur

* Tint 0.2, clear bottom border

* Use terminal bg color, add scroll trailing padding for buttons

* Less blur, paneBackground at 0.75 opacity

* paneBackground at 0.9 opacity

* 0.97 opacity for button backdrop

* Test: fully opaque paneBackground

* Test: solid red backdrop

* Gradient + solid paneBackground backdrop, no mask

* Force opaque paneBackground for button backdrop

* Use barBackground for button backdrop

* Use terminal bg (paneBackground forced opaque)

* Pre-composite backdrop color for exact match

* Add 6 switchable backdrop styles in debug window

* Mask-based button area hiding, no backdrop color needed

---------

Co-authored-by: Lawrence Chen <lawrencecchen@users.noreply.github.com>
@coderabbitai coderabbitai Bot mentioned this pull request May 8, 2026
4 tasks done

This branch was successfully deployed

1 active deployment
Preview — ff8b0a47 Deployed Mar 30, 2026 by vercel[bot]
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