Tighten Download for Mac divider padding

[lawrencecchen]

Tighten the "Download for Mac" split-button divider spacing and fix a Safari-only hover jump. Layout only, no copy/behavior change.

What changed

• Divider padding is now a per-size PILL_PADDING config applied as inline px (arbitrary Tailwind values like pr-[9px] did not resolve on the base-ui Menu.Trigger, so the caret rendered 0 right-padding). Values: default download 20/9, caret 7/11; sm download 12/7, caret 5/9.
• Removed the hover CSS transitions (transition-colors on the zones, transition-opacity on the caret) and did not add a forced translateZ(0) GPU layer. Either one made WebKit composite the sub-pixel-positioned zones and snap them to the device-pixel grid on hover, so the label/caret visibly jumped (Safari only, worst at the small size). Instant hover keeps the repaint on the main thread and matches Chrome.

Testing

• Verified computed padding on the live button matches the config: default 20px/9px download, 7px/11px caret; sm 12px/7px, 5px/9px.
• Dogfooded both sizes at 1x in the cmux WebKit browser (same engine as Safari) against a live tuner; final values chosen there and baked into the config.
• web-typecheck green; Vercel preview built.

Single file: web/app/[locale]/components/download-button.tsx.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
cmux	Ready	Preview, Comment	Jul 4, 2026 4:01pm
cmux-staging	Building	Preview, Comment	Jul 4, 2026 4:01pm

[coderabbitai]

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

DownloadButton now accepts per-zone padding overrides, and a new debug page renders live previews with controls, derived class output, and clipboard copy support.

Changes

Download Button Padding Overrides

Layer / File(s)	Summary
DownloadButton padding overrides web/app/[locale]/components/download-button.tsx	The component props, inline styles, split-zone class strings, caret icon opacity classes, and render bindings are updated to apply optional left/right padding overrides.

DownloadButtonDebug Preview Page

Layer / File(s)	Summary
DownloadButtonDebug preview page web/app/[locale]/debug/page.tsx	The debug page defines padding helpers and state, generates derived class snippets, injects diagnostic CSS, and renders the preview grid with controls and copy output.

Estimated code review effort: 3 (Moderate) | ~25 minutes

🚥 Pre-merge checks | ✅ 25

✅ Passed checks (25 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Cmux Swift Actor Isolation	✅ Passed	PR only changes TSX files; no Swift files appear in the merge-base diff, so Swift actor-isolation rules are not applicable.
Cmux Swift Blocking Runtime	✅ Passed	No Swift files changed; the PR only modifies a Next.js TSX debug page, so the Swift blocking-runtime rule is not applicable.
Cmux Browser Automation Off-Main	✅ Passed	The diff only edits web/app/[locale]/debug/page.tsx; no Swift browser-socket routing or worker-policy code is changed.
Cmux Expensive Synchronous Load	✅ Passed	PASS — This PR only changes a Next.js TSX debug page; no Swift files or agent-history loads were added or moved, so the Swift sync-load rule doesn’t apply.
Cmux Cache Substitution Correctness	✅ Passed	The change only adds transient UI padding overrides/debug tuning; it does not replace any fresh read in a persistence/history/undo/snapshot path or trust a stale cache.
Cmux No Hacky Sleeps	✅ Passed	The only new timeout is the /debug copy-label reset; it’s presentation timing, and the PR adds no new fixed sleeps/polling in production paths.
Cmux Algorithmic Complexity	✅ Passed	Changed loops are over fixed tiny lists (2 sizes, 4 fields, 3 waitlist platforms), with no nested scans over scalable user data.
Cmux Swift Concurrency	✅ Passed	Diff only changes a TSX debug page; no Swift code or concurrency patterns were introduced, so the Swift rule is not applicable.
Cmux Swift @Concurrent	✅ Passed	Diff only changes a TSX debug page; no Swift files or @concurrent/nonisolated async sites were touched, so the Swift rule doesn’t apply.
Cmux Swift File And Package Boundaries	✅ Passed	PR diff only changes two TSX files; no Swift/package-boundary files are touched, so the Swift boundary rule is not applicable.
Cmux Swiftpm Lockfiles	✅ Passed	Only submodule gitlinks changed; ghostty and bonsplit sub-commits touch source files only, with no Package.swift, Package.resolved, .gitignore, or Xcode lockfile changes.
Cmux Swift Logging	✅ Passed	This PR only changes a TSX debug page; no Swift production/runtime code or logging was added or modified.
Cmux User-Facing Error Privacy	✅ Passed	Only submodule pointer bumps are present; the nested diff removes internal log.warn strings and adds no user-facing error, alert, output, or recovery copy.
Cmux Full Internationalization	✅ Passed	Only layout/style changes plus a hidden /debug tuner; no production-facing copy or locale entries changed.
Cmux Swiftui State Layout	✅ Passed	Diff is web TSX only; no Swift files or SwiftUI state/layout patterns were introduced.
Cmux Architecture Rethink	✅ Passed	This PR only changes TypeScript/Next.js UI files, not Swift architecture, so the Swift rethink rule does not apply.
Cmux Swift Auxiliary Window Close Shortcuts	✅ Passed	PR only changes a web TSX debug page; no Swift window code or cmuxAuxiliaryWindowIdentifiers changes, so the auxiliary-window close-shortcut rule is not implicated.
Cmux Source Artifacts	✅ Passed	Only changed path is a hand-written source page, web/app/[locale]/debug/page.tsx; no logs, temp dirs, build output, or other artifacts entered the diff.
Cmux No Test Or Debug Seam In Production Source	✅ Passed	PASS: The PR diff only touches web/app TypeScript files; no production Swift Sources/ files are changed, so the rule is not applicable.
Cmux No Ambient Global State	✅ Passed	The diff adds only TSX preview/component code; no new Swift global mutable state, singleton, or static-namespace API was introduced.
Title check	✅ Passed	The title clearly summarizes the main change: tightening the Mac download divider padding.
Description check	✅ Passed	The description covers the summary and testing well, but it omits the required demo video, review trigger block, and checklist.

✨ 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 feat-download-btn-tuner

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Greptile Summary

This PR tightens the "Download for Mac" split-button spacing and fixes a Safari-only hover jump by removing CSS transitions from the hover tint and caret opacity. Padding is moved from Tailwind arbitrary-value classes to a per-size PILL_PADDING constant applied as inline pixel values, ensuring odd-pixel values (7, 9, 11 px) render exactly in both browsers and on @base-ui-components/react Menu.Trigger.

• Introduces a module-level PILL_PADDING config object holding downloadLeft/Right and caretLeft/Right px per size; these are applied as style props on the download link and caret trigger.
• Removes transition-colors from both hover zones and transition-opacity from the caret SVG to prevent WebKit from promoting the sub-pixel-positioned zones into their own compositing layers (which caused a visible label/caret snap on hover in Safari).

Confidence Score: 5/5

Safe to merge — changes are purely visual padding adjustments and a deliberate transition removal to fix a Safari rendering bug, with no behavioral or copy changes.

The diff only touches horizontal padding values and removes CSS transition properties. The PILL_PADDING constant is a pure immutable config, inline styles are handled correctly (React appends px to unitless numeric length values), and the transition removal is intentional and well-documented to address a confirmed Safari compositing-layer bug. No new strings, no logic changes, no accessibility regressions.

No files require special attention.

Important Files Changed

Filename	Overview
web/app/[locale]/components/download-button.tsx	Layout-only spacing and transition changes; logic, copy, and accessibility are unchanged. The inline-style approach for padding is well-reasoned and correctly handled by React's automatic px unit appending.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[DownloadButton render] --> B{size === 'sm'?}
    B -- yes --> C[pad = PILL_PADDING.sm]
    B -- no --> D[pad = PILL_PADDING.default]
    C --> E[downloadStyle inline px]
    D --> E
    C --> F[caretStyle inline px]
    D --> F
    E --> G{onConfirmationPage?}
    G -- yes --> H[a href=macHref style=downloadStyle]
    G -- no --> I[Link href=macHref style=downloadStyle]
    H --> J[Divider div]
    I --> J
    J --> K[Menu.Trigger style=caretStyle - no transition-colors - no transition-opacity on caret SVG]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[DownloadButton render] --> B{size === 'sm'?}
    B -- yes --> C[pad = PILL_PADDING.sm]
    B -- no --> D[pad = PILL_PADDING.default]
    C --> E[downloadStyle inline px]
    D --> E
    C --> F[caretStyle inline px]
    D --> F
    E --> G{onConfirmationPage?}
    G -- yes --> H[a href=macHref style=downloadStyle]
    G -- no --> I[Link href=macHref style=downloadStyle]
    H --> J[Divider div]
    I --> J
    J --> K[Menu.Trigger style=caretStyle - no transition-colors - no transition-opacity on caret SVG]

Loading

_{Reviews (8): Last reviewed commit: "Remove /debug tuner and padOverride prop..." | Re-trigger Greptile}

[cubic-dev-ai]

No issues found across 1 file

_{Re-trigger cubic}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/app/`[locale]/debug/page.tsx:
- Around line 1-40: The debug tuner page in DownloadButtonDebug is exposed as a
production route because it has no runtime guard. Add a development-only gate at
the start of the page component (or equivalent route exclusion) so the `/debug`
route returns notFound() in production, and keep the existing DownloadButton
debug UI available only in non-production environments.

🪄 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: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: aa5b7a4e-48de-42bc-baa1-c967d280d603

📥 Commits

Reviewing files that changed from the base of the PR and between 9604684 and fdf67fa.

📒 Files selected for processing (2)

• web/app/[locale]/components/download-button.tsx
• web/app/[locale]/debug/page.tsx