Fix dialog footer button clipping in Git actions dialog

[juliusmarminge]

Summary

• Adjusted the default-branch action dialog footer to wrap on smaller screens instead of clipping buttons.
• Expanded footer buttons to use full width on mobile and allow multi-line labels with safer spacing.
• Kept the desktop layout intact by preserving auto-width behavior at sm breakpoints.

Testing

• Not run (not requested).

---

Note

Low Risk
Low risk UI-only change: adjusts dialog footer and button Tailwind classes to wrap and size correctly on small screens without affecting git action logic.

Overview
Fixes the default-branch confirmation dialog footer layout so buttons no longer clip on small screens.

The footer now wraps at sm and the three actions use full-width, multi-line-safe button styling on mobile while keeping the existing auto-width desktop layout.

^{Reviewed by Cursor Bugbot for commit dd45c05. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix button clipping in Git actions dialog footer on small screens

Updates the DialogFooter layout in GitActionsControl.tsx to stack buttons vertically on small screens. Buttons become full-width with wrapping-friendly styles on small screens and revert to auto-width on larger screens.

^{Macroscope summarized dd45c05.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 80099bcb-9d7d-45e5-8ef6-3ce2c8dbac26

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch t3code/fix-dialog-clipping

---

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

[macroscopeapp]

Approvability

Verdict: Approved

CSS-only changes adding Tailwind classes to fix button layout/clipping in a dialog footer. No logic or behavior modifications - purely visual adjustments for responsive display.

^{You can customize Macroscope's approvability policy. Learn more.}

[juliusmarminge]

Rendered the default-branch confirmation dialog on the home page with a long branch name (production/super-long-default-branch-name-used-to-verify-dialog-footer-wrapping) and captured it in dark mode at 1268x458.

Result: the footer actions stay inside the dialog bounds; the long Commit & push to ... label wraps instead of clipping/overflowing, and the primary Checkout feature branch & continue action remains visible.

[juliusmarminge]

Uploaded the screenshot here:

https://htmlpreview.github.io/?https://gist.githubusercontent.com/juliusmarminge/49c1b2a57f41085112a563a93053a613/raw/ce0fe4919840dc0ee705a552b9c117d06111ce67/default-branch-dialog-long-name-dark.html

Backup gist: https://gist.github.com/juliusmarminge/49c1b2a57f41085112a563a93053a613

[juliusmarminge]

Updated the approach to truncate the long branch action instead of wrapping it, so the footer stays on one line.

Screenshot:
https://htmlpreview.github.io/?https://gist.githubusercontent.com/juliusmarminge/4614839438e619c91b00e5719dd1c44f/raw/3cadb8052e4c84b72b49bf213e95528a62eae908/default-branch-dialog-truncated-dark.html

Backup gist: https://gist.github.com/juliusmarminge/4614839438e619c91b00e5719dd1c44f

[juliusmarminge]

Updated the dialog approach again: the confirmation button now uses stable location-based copy (Continue on default branch) instead of repeating/truncating the branch name. The branch is still shown in the description.

Screenshot matrix covering desktop/mobile and short/long branch names:
https://htmlpreview.github.io/?https://gist.githubusercontent.com/juliusmarminge/116e9a5c664d91f4ea013cffc548fff4/raw/9e39f86469cc64c7f45635d4b8fb5ee16aed128a/default-branch-dialog-gallery.html

Backup gist: https://gist.github.com/juliusmarminge/116e9a5c664d91f4ea013cffc548fff4

[juliusmarminge]

Updated desktop sizing: the default-branch confirmation dialog is wider on desktop and the footer stays on one line for both main and a long branch name. Mobile keeps the stacked bottom-sheet layout.

Screenshot matrix:
https://htmlpreview.github.io/?https://gist.githubusercontent.com/juliusmarminge/2c8462f14ad05d6f76a3ad48cff78e2f/raw/ea39394e47497fff38f51117b2d6ec29931fe5f9/default-branch-dialog-gallery.html

Backup gist: https://gist.github.com/juliusmarminge/2c8462f14ad05d6f76a3ad48cff78e2f