Notice icon and text are not aligned on the Meetup Tracker handbook page

[valani9099]

On the Meetup Tracker handbook page, the icon and text inside the yellow notice are not aligned correctly.

The icon appears above the notice text instead of being displayed inline and vertically centered with it. This creates unnecessary spacing and affects the notice layout.

Page URL:

​https://make.wordpress.org/community/handbook/community-deputy/meetup-tracker/

Steps to Reproduce

1. Open the Meetup Tracker handbook page.
2. View the yellow notice below the page title.
3. Observe the alignment of the icon and notice text.

Expected Result

The icon and notice text should be displayed inline and vertically centered.

See this screenshot: ​https://prnt.sc/fa6vQJsuhsId

Actual Result

The icon appears above the text and is not vertically aligned with the notice content.

[valani9099]

I found an additional issue in the same Notice block.

The “Let us know!” link currently uses support@wordcamp.org as a relative URL. As a result, it opens the following invalid URL and returns a 404 error:

​https://make.wordpress.org/community/handbook/community-deputy/meetup-tracker/support@wordcamp.org

The link should use:

mailto:support@wordcamp.org

Both issues can be corrected in the same handbook content update.

See this screenshot: ​https://prnt.sc/uMVJd7aPokSs

[dineshinau]

I have forked [wporg-make]​https://github.com/dineshinau/wporg-make and was able to reproduce the issue locally and identify the cause of both reported problems.

The Notice on the Meetup Tracker page is wrapped in an <em> element, which prevents the Notice icon and content from being direct grid children and causes the icon to appear above the text. Removing the <em> wrapper restores the intended alignment.

See this screenshot: ​https://www.awesomescreenshot.com/image/63711053?key=cf362e49497c1bde440d6b1072052d

After removing the <em> wrapper: ​https://www.awesomescreenshot.com/image/63711007?key=6109de158a8926a99905341517f62df07

I also verified the same Notice block on the [Virtual Events handbook page] ​https://make.wordpress.org/community/handbook/virtual-events/. The Notice is not wrapped in an <em> element there, and the icon and text are aligned correctly. I have attached a screenshot for reference.

See this screenshot: ​https://www.awesomescreenshot.com/image/637111702?key=3a2436d5729964acd28794b6d6ac63

I also confirmed that the “Let us know!” link on the Meetup Tracker page currently has href="support@wordcamp.org" and should instead use href="mailto:support@wordcamp.org".

I’d be happy to make these content changes. Could someone please grant me the required editor access to the Community site so I can update the page and submit the changes for review?

[coreyhall93]

The Meetup Tracker page content has been updated: the Notice is no longer wrapped in a paragraph and <em>, so the icon and text line up, and "Let us know" now links to mailto:support@…. Thanks @valani9099 for the report and @dineshinau for tracking down the cause!

[valani9099]

@coreyhall93 Thank you for fixing the alignment issue. I’ve verified the update, and it looks good now! If applicable, could you please add props for @valani9099?

[dineshinau]

Thanks for fixing this! I’ve verified the update, and it looks good now.

@coreyhall93, could you please add props for me for the investigation/reproduction as well? Thanks!

[coreyhall93]

Props to @dineshinau and @valani9099 are posted in #props on Slack: ​https://wordpress.slack.com/archives/C0FRG66LR/p1790368738636719. Thank you both.