Form Block: buttons are being shown in full width on the live website

[zyousafi]

Impacted plugin

Jetpack

Quick summary

The form block is showing normally in the editor, but when displayed on the live website the button is shown in full width. Here's what the form looks like in the editor:

Here's what the form looks like on the live website:

Steps to reproduce

1. Open page or post editor, add Form Block. Save changes
2. View page or post on live website

A clear and concise description of what you expected to happen.

I expected the form on the live website to look the same as the form in the editor

What actually happened

The Form Block is showing normally in the editor, but when displayed on the live website the button is shown in full width

Impact

All

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

The following custom CSS resets the width of the button, and it's no longer being shown in full width:

.wp-block-jetpack-contact-form button {
    width: inherit;
}

Platform (Simple and/or Atomic)

Simple

Logs or notes

No response

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Content Management: The issue pertains to how forms and blocks are displayed and managed within the WordPress content editor and live site.
• [Feature] Contact Form: The problem is specifically related to the Form Block functionality, which includes contact forms.
• [Feature] Custom CSS: The proposed workaround involves the use of custom CSS to adjust the display of the button in the Form Block.
• [Feature] Forms Blocks: The issue directly relates to the Forms Blocks feature, indicating a problem with its implementation.