feat(ConfirmationDialog): Stack footer buttons responsively on small …

[Thanmaya-Dev]

…screens

Closes #6172

The Core Problem:

The original ConfirmationDialog footer buttons (Cancel, Confirm) used a CSS Grid layout that arranged them in a column flow, taking max-content width. This meant that when the screen width became too small, especially with longer button text, the buttons would:

Overflow: Extend beyond the dialog's boundaries.

Not Stack: Remain side-by-side, becoming squished or cut off.

The Solution Implemented:
The modification to ConfirmationDialog.module.css introduces responsive behavior using a CSS media query.

My Pull Request primarily introduces styling and behavioral changes to the existing ConfirmationDialog component, rather than modifying its API (Application Programming Interface).

Responsive CSS for ConfirmationDialog Footer Buttons:

I've added CSS rules to ConfirmationDialog.module.css that implement a responsive layout for the dialog's footer buttons.

The buttons now utilize display: grid with grid-auto-flow: column for larger screens and switch to grid-auto-flow: row with grid-auto-columns: 1fr and justify-content: stretch on smaller screens (at a max-width breakpoint of 600px).

This change ensures that buttons with longer text stack vertically when screen space is limited, preventing overflow and improving readability and usability on small devices.

Resolved Bug: I've fixed the issue where ConfirmationDialog footer buttons would overflow on smaller screen sizes due to long text.

New Commit: My changes are captured in a new commit with the hash d9217d9 and the message "feat(ConfirmationDialog): Stack footer buttons responsively on small screens" feat(ConfirmationDialog): Stack footer buttons responsively on small screens"].

Testing & Reviewing

Merge checklist

Verify the Responsive Stacking of Footer Buttons:

Action: Run the project locally (using npm start, yarn dev, or the project's equivalent command).

Action: Navigate to an instance of the ConfirmationDialog component within the application or via Storybook (likely packages/react/src/components/ConfirmationDialog/ConfirmationDialog.stories.tsx would be useful here).

Observation (Before applying changes): Observe the dialog's footer buttons on a narrow screen. They are expected to overflow horizontally if their text is long.

Observation (After applying changes): Gradually reduce the width of the browser window until it is below 600px (or the specific breakpoint defined in ConfirmationDialog.module.css).

Expected Behavior: The "Cancel" and "Confirm" buttons in the footer should transition from being side-by-side to stacking vertically. Each stacked button should occupy the full available width of the dialog's footer. There should be no horizontal overflow or scrollbars introduced by the buttons.

Further Check: Increase the browser width above 600px again and confirm that the buttons revert to their original side-by-side layout.

Check Button Functionality and Appearance:

Action: With the buttons both stacked and side-by-side, click on both the "Cancel" and "Confirm" buttons.

Expected Behavior: Confirm that both buttons are fully clickable and their associated actions (e.g., closing the dialog, triggering a confirmation) still work as expected.

Visual Check: Ensure the text within the buttons is always legible and does not get cut off in either stacked or unstacked states. Verify that the spacing between stacked buttons (vertical gap) is appropriate and consistent with Primer's design system's grid-gap variable.

Review Code Changes in ConfirmationDialog.module.css:

Focus Area: The primary change is within the .ConfirmationFooter class, specifically the addition of a @media (max-width: 600px) block.

Key Properties to Verify:

grid-auto-flow: row; (for stacking)

grid-auto-columns: 1fr; (for full-width stacked items)

justify-content: stretch; (for items to fill container)

.ConfirmationFooter > * { width: 100%; } (to ensure buttons themselves stretch)

Ensure No Regressions: Confirm that existing styles for .ConfirmationHeader and .ConfirmationBody are untouched and their layout remains correct.

[changeset-bot]

⚠️ No Changeset found

Latest commit: d9217d9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR