Admin: Use flex layout for Community Events form to improve alignment and wrapping

[hmbashar]

Trac ticket: https://core.trac.wordpress.org/ticket/64753

Summary

• Convert the Community Events form to a flex layout for better alignment, Ved spacing, and wrapping in the Dashboard widget.

• LTR only. No markup or JS changes.
  Context

• The current inline flow can crowd controls and misalign labels/inputs at narrower widths or with longer localized labels.

• A flex container with gap, vertical centering, and wrapping provides consistent alignment and improves responsiveness.
  Changes

• .community-events-form:

  • display: flex
  • gap: 5px
  • align-items: center
  • flex-wrap: wrap
    Files Changed (source only)

• src/wp-admin/css/dashboard.css

Accessibility

• Improves visual clarity and grouping without altering semantics or focus order.

• Works with zoom and longer localized strings due to wrapping.

• No change to keyboard navigation or focus indicators.
  Backward Compatibility

• CSS-only change scoped to .community-events-form.

• No markup/JS changes.

• Uses well-supported flexbox and gap properties.

Screenshots

Testing Instructions

• Dashboard → “Events and News” widget.
• Verify vertical alignment and even spacing of form controls.
• Reduce viewport to ~800px; controls wrap cleanly without overlap.
• Confirm typing in the input doesn’t push buttons off-screen.
• Keyboard navigate; focus order and styles remain correct.
• Test in recent Chrome, Firefox, Safari, and Edge.

Implementation Notes

• Only source files are included; no minified or compiled assets are committed.
• Built locally for verification only.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props hmbashar, joedolson, shailu25, huzaifaalmesbah.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[shail-mehta]

Before	After

[shail-mehta]

LGTM 👍

[joedolson]

Changing to a flex layout also allows us to remove a number of parameters that are now irrelevant; I've just committed those removals to this PR. Should probably be re-tested.

[huzaifaalmesbah]

Looks good just need this changes 5px to 0px margin for fix spinner

[huzaifaalmesbah]

Now Looks Good.

[github-actions]

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 61761
GitHub commit: 6d407c1

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.