fix(modal): footer action spacing by jcmill · Pull Request #8526 · patternfly/patternfly

jcmill · 2026-07-23T13:29:11Z

Updated Modal footer action spacing from t-shirt size to semantic token and removed unnecessary breakpoint override that was halving the spacer.

Summary by CodeRabbit

Style
- Standardized spacing for modal footer action buttons to use the default action-to-action gap.
- Updated the small (sm) variant so its spacing matches the base footer button spacing.
- Simplified small-screen breakpoint styling by removing a now-redundant footer spacing override for more consistent layouts.

coderabbitai · 2026-07-23T13:29:19Z

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

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 10ab5816-6497-4e89-b15e-5017c3b9e68d

📥 Commits

Reviewing files that changed from the base of the PR and between 3ca1968 and 7b46538.

📒 Files selected for processing (1)

src/patternfly/components/ModalBox/modal-box.scss

🚧 Files skipped from review as they are similar to previous changes (1)

src/patternfly/components/ModalBox/modal-box.scss

Walkthrough

The ModalBox footer button margin now uses a single action-to-action gap token, including the small variant and breakpoint override.

Changes

Modal footer spacing

Layer / File(s)	Summary
Unify footer button spacing `src/patternfly/components/ModalBox/modal-box.scss`	The footer button margin uses the semantic action-to-action gap token, the small variant matches the base value, and the small-breakpoint override references that value.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Suggested reviewers: mcoker

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title follows conventional commit format and clearly describes the modal footer spacing fix.
Linked Issues check	✅ Passed	The change matches `#7226` by switching to the semantic spacer and removing the breakpoint-based spacer override.
Out of Scope Changes check	✅ Passed	The PR only changes ModalBox footer spacing behavior, with no unrelated code changes evident.

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

patternfly-build · 2026-07-23T13:37:55Z

Preview: https://pf-pr-8526.surge.sh

A11y report: https://pf-pr-8526-a11y.surge.sh

mcoker · 2026-07-23T20:36:13Z


  // Footer buttons
-  --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md); // Button spacer is used to manipulate margin-inline-start and/or margin-right values at various breakpoints, with a single value.
-  --#{$modal-box}__footer--c-button--sm--MarginInlineEnd: calc(var(--#{$modal-box}__footer--c-button--MarginInlineEnd) / 2);


Technically this is a breaking change. Do you mind adding it (and the media query) back and just setting the value to var(--pf-t--global--spacer--gap--action-to-action--default)?

Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

mcoker

One little straggler

Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

mcoker

🦶🔘🪐++

patternfly-build · 2026-07-24T17:04:16Z

🎉 This PR is included in version 6.6.0-prerelease.24 🎉

The release is available on:

Your semantic-release bot 📦🚀

* fix: address word-break/overflow-wrap bug (#8487) * chore(input group): add radius modifier (#8483) * fix(table): nested table sorting (#8491) * fix(tree-view): revert caret rotations (#8490) * fix(a11y): ignore target-size rule for WCAG 2.2 bump (#8493) * fix(tree): update tree table and DLS tree toggle icon direction (#8502) * fix: update disabled description to use text color token (#8497) * fix(plain actions): update tokens to vertical-plain (#8495) * fix: address bottom pagination bugs (#8498) * fix: address bottom pagination bugs * fix: round border-radius on default bottom in glass * chore(primary details): fix drawer and toolbar (#8509) * fix(modal): footer action spacing (#8526) --------- Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> Co-authored-by: Andrew Ronaldson <aronalds@redhat.com> Co-authored-by: Jake Miller <jake83miller@gmail.com> Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> Co-authored-by: Jake Miller <jakmille@redhat.com>

jcmill requested a review from mcoker July 23, 2026 13:29

update button end margin to semantic token and remove media query

e12fcf5

jcmill force-pushed the bug/7226-modal-footer-action-spacing branch from 4e70111 to e12fcf5 Compare July 23, 2026 13:37

jcmill changed the title ~~Bug/7226 modal footer action spacing~~ fix(modal): footer action spacing Jul 23, 2026

jcmill marked this pull request as ready for review July 23, 2026 14:43

mcoker requested changes Jul 23, 2026

View reviewed changes

jcmill added 2 commits July 23, 2026 16:49

bring back breakpoint and reuse token

8df78f4

brring back and reassign the button sm token

6e833c1

mcoker requested changes Jul 23, 2026

View reviewed changes

Comment thread src/patternfly/components/ModalBox/modal-box.scss Outdated

jcmill requested a review from mcoker July 24, 2026 14:03

Update src/patternfly/components/ModalBox/modal-box.scss

3ca1968

Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

mcoker requested changes Jul 24, 2026

View reviewed changes

Comment thread src/patternfly/components/ModalBox/modal-box.scss Outdated

Update src/patternfly/components/ModalBox/modal-box.scss

7b46538

Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

mcoker approved these changes Jul 24, 2026

View reviewed changes

mcoker merged commit 8415cc6 into main Jul 24, 2026
6 checks passed

patternfly-build added the released on @prerelease label Jul 24, 2026

dlabaj pushed a commit that referenced this pull request Jul 28, 2026

fix(modal): footer action spacing (#8526)

fb587e2

dlabaj mentioned this pull request Jul 28, 2026

fix: cherry-pick main fixes into 6.6.x #8531

Merged

dlabaj pushed a commit that referenced this pull request Jul 28, 2026

fix(modal): footer action spacing (#8526)

e3e2950

Navigation Menu

Uh oh!

fix(modal): footer action spacing - #8526

fix(modal): footer action spacing#8526
mcoker merged 5 commits into
mainfrom
bug/7226-modal-footer-action-spacing

jcmill commented Jul 23, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 23, 2026 •

edited

Loading

Reviews paused

Uh oh!

patternfly-build commented Jul 23, 2026 •

edited

Loading

Uh oh!

mcoker Jul 23, 2026

Uh oh!

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

patternfly-build commented Jul 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

jcmill commented Jul 23, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Uh oh!

patternfly-build commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mcoker Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Jul 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jcmill commented Jul 23, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 23, 2026 •

edited

Loading

patternfly-build commented Jul 23, 2026 •

edited

Loading