Fix UI Overflow when Github Action is 'Commit, Create & Push PR' by dbalders · Pull Request #771 · pingdotgg/t3code

dbalders · 2026-03-10T02:42:07Z

What Changed

[edited post comments]

Updated the label for 'Commit, create & push PR' to be 'Commit, create & PR' to allow the overlap to no longer happen, but still fit within the default window size without force collapsing all the icons by default. Brings the text closer to the size of the other labels and I believe is still clear instructions.

Why

Fixes: #769, the problem with the 'Commit, push & create PR' overflowing behind the + in the title bar.

UI Changes

Before:

After:

Checklist

This PR is small and focused
I explained what changed and why
I included before/after screenshots for any UI changes

Note

Shorten 'Commit, push & create PR' label to 'Commit, push & PR' to fix UI overflow

The quick action label in GitActionsControl.logic.ts is shortened to prevent text overflow in the UI when the action is to commit, push, and create a PR.

^{Macroscope summarized 7750bc8.}

coderabbitai · 2026-03-10T02:42:31Z

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: a61aa19f-3e4f-4a2b-bd6c-cbccb66ebec8

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
Post copyable unit tests in a comment

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.}

Copilot

Pull request overview

This PR fixes a UI overflow bug (#769) where the Git action button labeled "Commit, Push & Create PR" in the header bar would overflow behind the "+" button when the header was narrow. The fix adjusts the flexbox layout so the actions area can take its natural width rather than being constrained to 50%, and repositions the CSS container query anchor to maintain correct responsive breakpoint behavior.

Changes:

Removed flex-1 from the header actions container div so it sizes to its content rather than splitting the header 50/50 with the title area.
Moved the @container/header-actions CSS container query anchor from the inner actions div to the outer header div so that label visibility breakpoints continue to reference the full header width.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Noojuno · 2026-03-10T02:51:44Z

@dbalders This causes a regression in behaviour with the buttons in the header. It fixes the overlap, but the buttons no longer hide the labels at the smaller breakpoints:

Before this change:

Screen.Recording.2026-03-10.at.3.49.56.PM.mov

After this change (excuse the cut off video when resizing out of the window boundary):

Screen.Recording.2026-03-10.at.3.48.58.PM.mov

You can see that after your change, the button labels are always visible.

dbalders · 2026-03-10T04:51:18Z

@Noojuno Ah, good find! Thanks. Been messing around with it for a while now, and kinda seems like the 2 solutions are to have it collapse earlier, or change the text to be something like 'Commit, push & PR' (removing the 'create').

Collapsing earlier would me changing the buttons from @sm/header-actions to @[27rem]/header-actions.

Both decisions kinda feel like maintainer decisions as one is a language change, and the other means they will be collapsed on the default opening window size in order to fit.

I'm going to go with what I would probably do if it was my app, and remove the 'create' as this keeps the logic the same, ui the same on default opening, keeps the text not too long, and people should kind of inherently understand what this means without the 'create'.

Can switch to something else if needed or feel free to close if that isn't a decision that is wanted.

Fixes: pingdotgg#769 * Updated wording for label from 'Commit, Create & Push PR' to 'Commit, Create & PR' to allow for it to fit within the current UI size constraints. wording change

… flex distribution The header split 50/50 between title and actions via two flex-1 divs. Both children had flex: 1 1 0%, giving the actions div only 398px at 1100px viewport — barely above the @sm (384px) threshold. Labels collapsed to icons at ~1060px even though there was plenty of room. - Change title div from flex-1 to flex-initial shrink so it takes only its content width instead of always claiming 50% - Add overflow-hidden to actions div to prevent button overflow - Revert label shortening from PR pingdotgg#771 (full text now fits) The @container/header-actions query stays on the actions div, now measuring ~660px at 1100px (actual available space) instead of 398px. Labels stay visible until the viewport genuinely gets tight. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

dbalders · 2026-03-10T02:42:07Z

What Changed

[edited post comments]

Updated the label for 'Commit, create & push PR' to be 'Commit, create & PR' to allow the overlap to no longer happen, but still fit within the default window size without force collapsing all the icons by default. Brings the text closer to the size of the other labels and I believe is still clear instructions.

Why

Fixes: #769, the problem with the 'Commit, push & create PR' overflowing behind the + in the title bar.

UI Changes

Before:

After:

Checklist

This PR is small and focused
I explained what changed and why
I included before/after screenshots for any UI changes

Note

Shorten 'Commit, push & create PR' label to 'Commit, push & PR' to fix UI overflow

The quick action label in GitActionsControl.logic.ts is shortened to prevent text overflow in the UI when the action is to commit, push, and create a PR.

^{Macroscope summarized 7750bc8.}

coderabbitai · 2026-03-10T02:42:31Z

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: a61aa19f-3e4f-4a2b-bd6c-cbccb66ebec8

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
Post copyable unit tests in a comment

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.}

Copilot

Pull request overview

This PR fixes a UI overflow bug (#769) where the Git action button labeled "Commit, Push & Create PR" in the header bar would overflow behind the "+" button when the header was narrow. The fix adjusts the flexbox layout so the actions area can take its natural width rather than being constrained to 50%, and repositions the CSS container query anchor to maintain correct responsive breakpoint behavior.

Changes:

Removed flex-1 from the header actions container div so it sizes to its content rather than splitting the header 50/50 with the title area.
Moved the @container/header-actions CSS container query anchor from the inner actions div to the outer header div so that label visibility breakpoints continue to reference the full header width.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Noojuno · 2026-03-10T02:51:44Z

@dbalders This causes a regression in behaviour with the buttons in the header. It fixes the overlap, but the buttons no longer hide the labels at the smaller breakpoints:

Before this change:

Screen.Recording.2026-03-10.at.3.49.56.PM.mov

After this change (excuse the cut off video when resizing out of the window boundary):

Screen.Recording.2026-03-10.at.3.48.58.PM.mov

You can see that after your change, the button labels are always visible.

dbalders · 2026-03-10T04:51:18Z

@Noojuno Ah, good find! Thanks. Been messing around with it for a while now, and kinda seems like the 2 solutions are to have it collapse earlier, or change the text to be something like 'Commit, push & PR' (removing the 'create').

Collapsing earlier would me changing the buttons from @sm/header-actions to @[27rem]/header-actions.

Both decisions kinda feel like maintainer decisions as one is a language change, and the other means they will be collapsed on the default opening window size in order to fit.

I'm going to go with what I would probably do if it was my app, and remove the 'create' as this keeps the logic the same, ui the same on default opening, keeps the text not too long, and people should kind of inherently understand what this means without the 'create'.

Can switch to something else if needed or feel free to close if that isn't a decision that is wanted.

Fixes: pingdotgg#769 * Updated wording for label from 'Commit, Create & Push PR' to 'Commit, Create & PR' to allow for it to fit within the current UI size constraints. wording change

… flex distribution The header split 50/50 between title and actions via two flex-1 divs. Both children had flex: 1 1 0%, giving the actions div only 398px at 1100px viewport — barely above the @sm (384px) threshold. Labels collapsed to icons at ~1060px even though there was plenty of room. - Change title div from flex-1 to flex-initial shrink so it takes only its content width instead of always claiming 50% - Add overflow-hidden to actions div to prevent button overflow - Revert label shortening from PR pingdotgg#771 (full text now fits) The @container/header-actions query stays on the actions div, now measuring ~660px at 1100px (actual available space) instead of 398px. Labels stay visible until the viewport genuinely gets tight. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

dbalders · 2026-03-10T02:42:07Z

What Changed

[edited post comments]

Updated the label for 'Commit, create & push PR' to be 'Commit, create & PR' to allow the overlap to no longer happen, but still fit within the default window size without force collapsing all the icons by default. Brings the text closer to the size of the other labels and I believe is still clear instructions.

Why

Fixes: #769, the problem with the 'Commit, push & create PR' overflowing behind the + in the title bar.

UI Changes

Before:

After:

Checklist

This PR is small and focused
I explained what changed and why
I included before/after screenshots for any UI changes

Note

Shorten 'Commit, push & create PR' label to 'Commit, push & PR' to fix UI overflow

The quick action label in GitActionsControl.logic.ts is shortened to prevent text overflow in the UI when the action is to commit, push, and create a PR.

^{Macroscope summarized 7750bc8.}

coderabbitai · 2026-03-10T02:42:31Z

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: a61aa19f-3e4f-4a2b-bd6c-cbccb66ebec8

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
Post copyable unit tests in a comment

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.}

Copilot

Pull request overview

This PR fixes a UI overflow bug (#769) where the Git action button labeled "Commit, Push & Create PR" in the header bar would overflow behind the "+" button when the header was narrow. The fix adjusts the flexbox layout so the actions area can take its natural width rather than being constrained to 50%, and repositions the CSS container query anchor to maintain correct responsive breakpoint behavior.

Changes:

Removed flex-1 from the header actions container div so it sizes to its content rather than splitting the header 50/50 with the title area.
Moved the @container/header-actions CSS container query anchor from the inner actions div to the outer header div so that label visibility breakpoints continue to reference the full header width.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Noojuno · 2026-03-10T02:51:44Z

@dbalders This causes a regression in behaviour with the buttons in the header. It fixes the overlap, but the buttons no longer hide the labels at the smaller breakpoints:

Before this change:

Screen.Recording.2026-03-10.at.3.49.56.PM.mov

After this change (excuse the cut off video when resizing out of the window boundary):

Screen.Recording.2026-03-10.at.3.48.58.PM.mov

You can see that after your change, the button labels are always visible.

dbalders · 2026-03-10T04:51:18Z

@Noojuno Ah, good find! Thanks. Been messing around with it for a while now, and kinda seems like the 2 solutions are to have it collapse earlier, or change the text to be something like 'Commit, push & PR' (removing the 'create').

Collapsing earlier would me changing the buttons from @sm/header-actions to @[27rem]/header-actions.

Both decisions kinda feel like maintainer decisions as one is a language change, and the other means they will be collapsed on the default opening window size in order to fit.

I'm going to go with what I would probably do if it was my app, and remove the 'create' as this keeps the logic the same, ui the same on default opening, keeps the text not too long, and people should kind of inherently understand what this means without the 'create'.

Can switch to something else if needed or feel free to close if that isn't a decision that is wanted.

Fixes: pingdotgg#769 * Updated wording for label from 'Commit, Create & Push PR' to 'Commit, Create & PR' to allow for it to fit within the current UI size constraints. wording change

… flex distribution The header split 50/50 between title and actions via two flex-1 divs. Both children had flex: 1 1 0%, giving the actions div only 398px at 1100px viewport — barely above the @sm (384px) threshold. Labels collapsed to icons at ~1060px even though there was plenty of room. - Change title div from flex-1 to flex-initial shrink so it takes only its content width instead of always claiming 50% - Add overflow-hidden to actions div to prevent button overflow - Revert label shortening from PR pingdotgg#771 (full text now fits) The @container/header-actions query stays on the actions div, now measuring ~660px at 1100px (actual available space) instead of 398px. Labels stay visible until the viewport genuinely gets tight. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

dbalders · 2026-03-10T02:42:07Z

What Changed

[edited post comments]

Updated the label for 'Commit, create & push PR' to be 'Commit, create & PR' to allow the overlap to no longer happen, but still fit within the default window size without force collapsing all the icons by default. Brings the text closer to the size of the other labels and I believe is still clear instructions.

Why

Fixes: #769, the problem with the 'Commit, push & create PR' overflowing behind the + in the title bar.

UI Changes

Before:

After:

Checklist

This PR is small and focused
I explained what changed and why
I included before/after screenshots for any UI changes

Note

Shorten 'Commit, push & create PR' label to 'Commit, push & PR' to fix UI overflow

The quick action label in GitActionsControl.logic.ts is shortened to prevent text overflow in the UI when the action is to commit, push, and create a PR.

^{Macroscope summarized 7750bc8.}

coderabbitai · 2026-03-10T02:42:31Z

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: a61aa19f-3e4f-4a2b-bd6c-cbccb66ebec8

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
Post copyable unit tests in a comment

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.}

Copilot

Pull request overview

This PR fixes a UI overflow bug (#769) where the Git action button labeled "Commit, Push & Create PR" in the header bar would overflow behind the "+" button when the header was narrow. The fix adjusts the flexbox layout so the actions area can take its natural width rather than being constrained to 50%, and repositions the CSS container query anchor to maintain correct responsive breakpoint behavior.

Changes:

Removed flex-1 from the header actions container div so it sizes to its content rather than splitting the header 50/50 with the title area.
Moved the @container/header-actions CSS container query anchor from the inner actions div to the outer header div so that label visibility breakpoints continue to reference the full header width.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Noojuno · 2026-03-10T02:51:44Z

@dbalders This causes a regression in behaviour with the buttons in the header. It fixes the overlap, but the buttons no longer hide the labels at the smaller breakpoints:

Before this change:

Screen.Recording.2026-03-10.at.3.49.56.PM.mov

After this change (excuse the cut off video when resizing out of the window boundary):

Screen.Recording.2026-03-10.at.3.48.58.PM.mov

You can see that after your change, the button labels are always visible.

dbalders · 2026-03-10T04:51:18Z

@Noojuno Ah, good find! Thanks. Been messing around with it for a while now, and kinda seems like the 2 solutions are to have it collapse earlier, or change the text to be something like 'Commit, push & PR' (removing the 'create').

Collapsing earlier would me changing the buttons from @sm/header-actions to @[27rem]/header-actions.

Both decisions kinda feel like maintainer decisions as one is a language change, and the other means they will be collapsed on the default opening window size in order to fit.

I'm going to go with what I would probably do if it was my app, and remove the 'create' as this keeps the logic the same, ui the same on default opening, keeps the text not too long, and people should kind of inherently understand what this means without the 'create'.

Can switch to something else if needed or feel free to close if that isn't a decision that is wanted.

Fixes: pingdotgg#769 * Updated wording for label from 'Commit, Create & Push PR' to 'Commit, Create & PR' to allow for it to fit within the current UI size constraints. wording change

… flex distribution The header split 50/50 between title and actions via two flex-1 divs. Both children had flex: 1 1 0%, giving the actions div only 398px at 1100px viewport — barely above the @sm (384px) threshold. Labels collapsed to icons at ~1060px even though there was plenty of room. - Change title div from flex-1 to flex-initial shrink so it takes only its content width instead of always claiming 50% - Add overflow-hidden to actions div to prevent button overflow - Revert label shortening from PR pingdotgg#771 (full text now fits) The @container/header-actions query stays on the actions div, now measuring ~660px at 1100px (actual available space) instead of 398px. Labels stay visible until the viewport genuinely gets tight. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

dbalders · 2026-03-10T02:42:07Z

What Changed

[edited post comments]

Updated the label for 'Commit, create & push PR' to be 'Commit, create & PR' to allow the overlap to no longer happen, but still fit within the default window size without force collapsing all the icons by default. Brings the text closer to the size of the other labels and I believe is still clear instructions.

Why

Fixes: #769, the problem with the 'Commit, push & create PR' overflowing behind the + in the title bar.

UI Changes

Before:

After:

Checklist

This PR is small and focused
I explained what changed and why
I included before/after screenshots for any UI changes

Note

Shorten 'Commit, push & create PR' label to 'Commit, push & PR' to fix UI overflow

The quick action label in GitActionsControl.logic.ts is shortened to prevent text overflow in the UI when the action is to commit, push, and create a PR.

^{Macroscope summarized 7750bc8.}

coderabbitai · 2026-03-10T02:42:31Z

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: a61aa19f-3e4f-4a2b-bd6c-cbccb66ebec8

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
Post copyable unit tests in a comment

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.}

Copilot

Pull request overview

This PR fixes a UI overflow bug (#769) where the Git action button labeled "Commit, Push & Create PR" in the header bar would overflow behind the "+" button when the header was narrow. The fix adjusts the flexbox layout so the actions area can take its natural width rather than being constrained to 50%, and repositions the CSS container query anchor to maintain correct responsive breakpoint behavior.

Changes:

Removed flex-1 from the header actions container div so it sizes to its content rather than splitting the header 50/50 with the title area.
Moved the @container/header-actions CSS container query anchor from the inner actions div to the outer header div so that label visibility breakpoints continue to reference the full header width.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Noojuno · 2026-03-10T02:51:44Z

@dbalders This causes a regression in behaviour with the buttons in the header. It fixes the overlap, but the buttons no longer hide the labels at the smaller breakpoints:

Before this change:

Screen.Recording.2026-03-10.at.3.49.56.PM.mov

After this change (excuse the cut off video when resizing out of the window boundary):

Screen.Recording.2026-03-10.at.3.48.58.PM.mov

You can see that after your change, the button labels are always visible.

dbalders · 2026-03-10T04:51:18Z

@Noojuno Ah, good find! Thanks. Been messing around with it for a while now, and kinda seems like the 2 solutions are to have it collapse earlier, or change the text to be something like 'Commit, push & PR' (removing the 'create').

Collapsing earlier would me changing the buttons from @sm/header-actions to @[27rem]/header-actions.

Both decisions kinda feel like maintainer decisions as one is a language change, and the other means they will be collapsed on the default opening window size in order to fit.

I'm going to go with what I would probably do if it was my app, and remove the 'create' as this keeps the logic the same, ui the same on default opening, keeps the text not too long, and people should kind of inherently understand what this means without the 'create'.

Can switch to something else if needed or feel free to close if that isn't a decision that is wanted.

Fixes: pingdotgg#769 * Updated wording for label from 'Commit, Create & Push PR' to 'Commit, Create & PR' to allow for it to fit within the current UI size constraints. wording change

… flex distribution The header split 50/50 between title and actions via two flex-1 divs. Both children had flex: 1 1 0%, giving the actions div only 398px at 1100px viewport — barely above the @sm (384px) threshold. Labels collapsed to icons at ~1060px even though there was plenty of room. - Change title div from flex-1 to flex-initial shrink so it takes only its content width instead of always claiming 50% - Add overflow-hidden to actions div to prevent button overflow - Revert label shortening from PR pingdotgg#771 (full text now fits) The @container/header-actions query stays on the actions div, now measuring ~660px at 1100px (actual available space) instead of 398px. Labels stay visible until the viewport genuinely gets tight. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

dbalders · 2026-03-10T02:42:07Z

What Changed

[edited post comments]

Updated the label for 'Commit, create & push PR' to be 'Commit, create & PR' to allow the overlap to no longer happen, but still fit within the default window size without force collapsing all the icons by default. Brings the text closer to the size of the other labels and I believe is still clear instructions.

Why

Fixes: #769, the problem with the 'Commit, push & create PR' overflowing behind the + in the title bar.

UI Changes

Before:

After:

Checklist

This PR is small and focused
I explained what changed and why
I included before/after screenshots for any UI changes

Note

Shorten 'Commit, push & create PR' label to 'Commit, push & PR' to fix UI overflow

The quick action label in GitActionsControl.logic.ts is shortened to prevent text overflow in the UI when the action is to commit, push, and create a PR.

^{Macroscope summarized 7750bc8.}

coderabbitai · 2026-03-10T02:42:31Z

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: a61aa19f-3e4f-4a2b-bd6c-cbccb66ebec8

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
Post copyable unit tests in a comment

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.}

Copilot

Pull request overview

This PR fixes a UI overflow bug (#769) where the Git action button labeled "Commit, Push & Create PR" in the header bar would overflow behind the "+" button when the header was narrow. The fix adjusts the flexbox layout so the actions area can take its natural width rather than being constrained to 50%, and repositions the CSS container query anchor to maintain correct responsive breakpoint behavior.

Changes:

Removed flex-1 from the header actions container div so it sizes to its content rather than splitting the header 50/50 with the title area.
Moved the @container/header-actions CSS container query anchor from the inner actions div to the outer header div so that label visibility breakpoints continue to reference the full header width.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Noojuno · 2026-03-10T02:51:44Z

@dbalders This causes a regression in behaviour with the buttons in the header. It fixes the overlap, but the buttons no longer hide the labels at the smaller breakpoints:

Before this change:

Screen.Recording.2026-03-10.at.3.49.56.PM.mov

After this change (excuse the cut off video when resizing out of the window boundary):

Screen.Recording.2026-03-10.at.3.48.58.PM.mov

You can see that after your change, the button labels are always visible.

dbalders · 2026-03-10T04:51:18Z

@Noojuno Ah, good find! Thanks. Been messing around with it for a while now, and kinda seems like the 2 solutions are to have it collapse earlier, or change the text to be something like 'Commit, push & PR' (removing the 'create').

Collapsing earlier would me changing the buttons from @sm/header-actions to @[27rem]/header-actions.

Both decisions kinda feel like maintainer decisions as one is a language change, and the other means they will be collapsed on the default opening window size in order to fit.

I'm going to go with what I would probably do if it was my app, and remove the 'create' as this keeps the logic the same, ui the same on default opening, keeps the text not too long, and people should kind of inherently understand what this means without the 'create'.

Can switch to something else if needed or feel free to close if that isn't a decision that is wanted.

Fixes: pingdotgg#769 * Updated wording for label from 'Commit, Create & Push PR' to 'Commit, Create & PR' to allow for it to fit within the current UI size constraints. wording change

… flex distribution The header split 50/50 between title and actions via two flex-1 divs. Both children had flex: 1 1 0%, giving the actions div only 398px at 1100px viewport — barely above the @sm (384px) threshold. Labels collapsed to icons at ~1060px even though there was plenty of room. - Change title div from flex-1 to flex-initial shrink so it takes only its content width instead of always claiming 50% - Add overflow-hidden to actions div to prevent button overflow - Revert label shortening from PR pingdotgg#771 (full text now fits) The @container/header-actions query stays on the actions div, now measuring ~660px at 1100px (actual available space) instead of 398px. Labels stay visible until the viewport genuinely gets tight. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

dbalders · 2026-03-10T02:42:07Z

What Changed

[edited post comments]

Updated the label for 'Commit, create & push PR' to be 'Commit, create & PR' to allow the overlap to no longer happen, but still fit within the default window size without force collapsing all the icons by default. Brings the text closer to the size of the other labels and I believe is still clear instructions.

Why

Fixes: #769, the problem with the 'Commit, push & create PR' overflowing behind the + in the title bar.

UI Changes

Before:

After:

Checklist

This PR is small and focused
I explained what changed and why
I included before/after screenshots for any UI changes

Note

Shorten 'Commit, push & create PR' label to 'Commit, push & PR' to fix UI overflow

The quick action label in GitActionsControl.logic.ts is shortened to prevent text overflow in the UI when the action is to commit, push, and create a PR.

^{Macroscope summarized 7750bc8.}

coderabbitai · 2026-03-10T02:42:31Z

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: a61aa19f-3e4f-4a2b-bd6c-cbccb66ebec8

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
Post copyable unit tests in a comment

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.}

Copilot

Pull request overview

This PR fixes a UI overflow bug (#769) where the Git action button labeled "Commit, Push & Create PR" in the header bar would overflow behind the "+" button when the header was narrow. The fix adjusts the flexbox layout so the actions area can take its natural width rather than being constrained to 50%, and repositions the CSS container query anchor to maintain correct responsive breakpoint behavior.

Changes:

Removed flex-1 from the header actions container div so it sizes to its content rather than splitting the header 50/50 with the title area.
Moved the @container/header-actions CSS container query anchor from the inner actions div to the outer header div so that label visibility breakpoints continue to reference the full header width.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Noojuno · 2026-03-10T02:51:44Z

@dbalders This causes a regression in behaviour with the buttons in the header. It fixes the overlap, but the buttons no longer hide the labels at the smaller breakpoints:

Before this change:

Screen.Recording.2026-03-10.at.3.49.56.PM.mov

After this change (excuse the cut off video when resizing out of the window boundary):

Screen.Recording.2026-03-10.at.3.48.58.PM.mov

You can see that after your change, the button labels are always visible.

dbalders · 2026-03-10T04:51:18Z

@Noojuno Ah, good find! Thanks. Been messing around with it for a while now, and kinda seems like the 2 solutions are to have it collapse earlier, or change the text to be something like 'Commit, push & PR' (removing the 'create').

Collapsing earlier would me changing the buttons from @sm/header-actions to @[27rem]/header-actions.

Both decisions kinda feel like maintainer decisions as one is a language change, and the other means they will be collapsed on the default opening window size in order to fit.

I'm going to go with what I would probably do if it was my app, and remove the 'create' as this keeps the logic the same, ui the same on default opening, keeps the text not too long, and people should kind of inherently understand what this means without the 'create'.

Can switch to something else if needed or feel free to close if that isn't a decision that is wanted.

Fixes: pingdotgg#769 * Updated wording for label from 'Commit, Create & Push PR' to 'Commit, Create & PR' to allow for it to fit within the current UI size constraints. wording change

… flex distribution The header split 50/50 between title and actions via two flex-1 divs. Both children had flex: 1 1 0%, giving the actions div only 398px at 1100px viewport — barely above the @sm (384px) threshold. Labels collapsed to icons at ~1060px even though there was plenty of room. - Change title div from flex-1 to flex-initial shrink so it takes only its content width instead of always claiming 50% - Add overflow-hidden to actions div to prevent button overflow - Revert label shortening from PR pingdotgg#771 (full text now fits) The @container/header-actions query stays on the actions div, now measuring ~660px at 1100px (actual available space) instead of 398px. Labels stay visible until the viewport genuinely gets tight. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

dbalders · 2026-03-10T02:42:07Z

What Changed

[edited post comments]

Updated the label for 'Commit, create & push PR' to be 'Commit, create & PR' to allow the overlap to no longer happen, but still fit within the default window size without force collapsing all the icons by default. Brings the text closer to the size of the other labels and I believe is still clear instructions.

Why

Fixes: #769, the problem with the 'Commit, push & create PR' overflowing behind the + in the title bar.

UI Changes

Before:

After:

Checklist

This PR is small and focused
I explained what changed and why
I included before/after screenshots for any UI changes

Note

Shorten 'Commit, push & create PR' label to 'Commit, push & PR' to fix UI overflow

The quick action label in GitActionsControl.logic.ts is shortened to prevent text overflow in the UI when the action is to commit, push, and create a PR.

^{Macroscope summarized 7750bc8.}

coderabbitai · 2026-03-10T02:42:31Z

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: a61aa19f-3e4f-4a2b-bd6c-cbccb66ebec8

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
Post copyable unit tests in a comment

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.}

Copilot

Pull request overview

This PR fixes a UI overflow bug (#769) where the Git action button labeled "Commit, Push & Create PR" in the header bar would overflow behind the "+" button when the header was narrow. The fix adjusts the flexbox layout so the actions area can take its natural width rather than being constrained to 50%, and repositions the CSS container query anchor to maintain correct responsive breakpoint behavior.

Changes:

Removed flex-1 from the header actions container div so it sizes to its content rather than splitting the header 50/50 with the title area.
Moved the @container/header-actions CSS container query anchor from the inner actions div to the outer header div so that label visibility breakpoints continue to reference the full header width.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Noojuno · 2026-03-10T02:51:44Z

@dbalders This causes a regression in behaviour with the buttons in the header. It fixes the overlap, but the buttons no longer hide the labels at the smaller breakpoints:

Before this change:

Screen.Recording.2026-03-10.at.3.49.56.PM.mov

After this change (excuse the cut off video when resizing out of the window boundary):

Screen.Recording.2026-03-10.at.3.48.58.PM.mov

You can see that after your change, the button labels are always visible.

dbalders · 2026-03-10T04:51:18Z

@Noojuno Ah, good find! Thanks. Been messing around with it for a while now, and kinda seems like the 2 solutions are to have it collapse earlier, or change the text to be something like 'Commit, push & PR' (removing the 'create').

Collapsing earlier would me changing the buttons from @sm/header-actions to @[27rem]/header-actions.

Both decisions kinda feel like maintainer decisions as one is a language change, and the other means they will be collapsed on the default opening window size in order to fit.

I'm going to go with what I would probably do if it was my app, and remove the 'create' as this keeps the logic the same, ui the same on default opening, keeps the text not too long, and people should kind of inherently understand what this means without the 'create'.

Can switch to something else if needed or feel free to close if that isn't a decision that is wanted.

Fixes: pingdotgg#769 * Updated wording for label from 'Commit, Create & Push PR' to 'Commit, Create & PR' to allow for it to fit within the current UI size constraints. wording change

… flex distribution The header split 50/50 between title and actions via two flex-1 divs. Both children had flex: 1 1 0%, giving the actions div only 398px at 1100px viewport — barely above the @sm (384px) threshold. Labels collapsed to icons at ~1060px even though there was plenty of room. - Change title div from flex-1 to flex-initial shrink so it takes only its content width instead of always claiming 50% - Add overflow-hidden to actions div to prevent button overflow - Revert label shortening from PR pingdotgg#771 (full text now fits) The @container/header-actions query stays on the actions div, now measuring ~660px at 1100px (actual available space) instead of 398px. Labels stay visible until the viewport genuinely gets tight. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CopilotAI review requested due to automatic review settings March 10, 2026 02:42

github-actionsBot added the vouch:unvouched PR author is not yet trusted in the VOUCHED list. label Mar 10, 2026

Copilotstarted reviewing on behalf of dbalders March 10, 2026 02:42 View session

CopilotAI reviewed Mar 10, 2026
View reviewed changes

dbalders force-pushed the header-overlap branch from faf06db to 46d0f53Compare March 10, 2026 05:04

Fix UI Overflow when Github Action is 'Commit, Create & Push PR'
7750bc8
Fixes: pingdotgg#769 * Updated wording for label from 'Commit, Create & Push PR' to 'Commit, Create & PR' to allow for it to fit within the current UI size constraints. wording change

dbalders force-pushed the header-overlap branch from 46d0f53 to 7750bc8Compare March 10, 2026 05:06

juliusmarminge approved these changes Mar 10, 2026
View reviewed changes

juliusmarminge merged commit dcccca3 into pingdotgg:mainMar 10, 2026
6 checks passed

dbalders mentioned this pull request Mar 10, 2026
Diff Panel Toggle Button in Header overlaps on top of PR Button #806
Closed

daniel-bonaker-qestit mentioned this pull request Mar 13, 2026
fix(web): fix header action labels collapsing too early by correcting flex distribution #1039
Closed
4 tasks