Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Unreachable action buttons in notification template when using "align" prop with "left" or "right". #52758

Merged
merged 1 commit into from
Sep 12, 2024

Conversation

lpheller
Copy link
Contributor

@lpheller lpheller commented Sep 12, 2024

This PR fixes an issue with the alignment of action buttons in the notification template when the align prop is used.

The option to pass align as a prop was introduced in PR #45362. When set to left or right, the action button becomes unreachable as it gets overlaid by a following text element:

screenshot 170

(Screenshot of the PasswordReset notification rendered in Google Chrome; the issue was also reproducible in multiple mail clients.)

This occurs because applying align="left" to a table element basically adds a float: left.

Steps to reproduce:

  • Set up a fresh Laravel project.
  • Publish the email.blade.php file (php artisan vendor:publish --tag=laravel-notifications).
  • Add align="left" to the <x-mail::button>.
  • Send or render a notification (e.g., PasswordReset).

Proposed fix:
We could address this by either removing the inheritance of the align prop for the table in this line and always setting the alignment to center.

However, I propose unsetting the float for the .action class in the default theme, which feels like a less intrusive solution.

@taylorotwell taylorotwell merged commit 1f4d69d into laravel:11.x Sep 12, 2024
33 checks passed
@lpheller lpheller deleted the patch-1 branch September 13, 2024 06:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants