Olivero: Messages can be malformed when JS creates messages and PHP messages already exist

Problem/Motivation

Split off from #3212975: Olivero: Normalize JavaScript selectors in messages.es6.js

I'm noticing something a bit strange regarding the messages.

Everything works fine when messages are added in from PHP or from JS via Drupal.Message, but JS messages added in when PHP messages are already present are not properly placed. Screenshots are attached. All messages close as expected, and "nested" messages close when their parent is closed.

Steps to reproduce

1. Apply patch to latest 9.4.x.

2. Add status/warning/error messages via PHP. In olivero.theme's preprocess_html function:

$messenger = Drupal::messenger();
$messenger->addStatus('PHP Status message');
$messenger->addWarning('PHP Warning message');
$messenger->addError('PHP Error message');

3. Confirm messages display & close properly.

4. Add the core drupal.messages library to Olivero's global libraries (line 3 below)

libraries:
  - olivero/global-styling
  - core/drupal.message

5. Refresh page and add messages via javascript in the console:

const messenger = new Drupal.Message;
messenger.add('js message', {type: 'status'});
messenger.add('js message', {type: 'error'});

6. Confirm all messages are displayed & close properly.

Proposed resolution

Update the code to handle messages coming from both PHP and JavaScript at the same time.

Remaining tasks

1. Create patch
2. Review patch
3. Test patch
4. Commit

User interface changes

API changes

Data model changes

Release notes snippet