diff --git a/core/profiles/demo_umami/themes/umami/templates/components/messages/status-messages.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/messages/status-messages.html.twig
index f39301587b..e4423e1378 100644
--- a/core/profiles/demo_umami/themes/umami/templates/components/messages/status-messages.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/components/messages/status-messages.html.twig
@@ -21,6 +21,7 @@
  *   - class: HTML classes.
  */
 #}
+<div data-drupal-messages>
 {% block messages %}
 {% for type, messages in message_list %}
   {%
@@ -55,3 +56,4 @@
   {% set attributes = attributes.removeClass(classes) %}
 {% endfor %}
 {% endblock messages %}
+</div>
diff --git a/core/themes/bartik/css/components/messages.css b/core/themes/bartik/css/components/messages.css
index bc9001167d..7018da3a00 100644
--- a/core/themes/bartik/css/components/messages.css
+++ b/core/themes/bartik/css/components/messages.css
@@ -7,12 +7,12 @@
   padding: 0 0 0 8px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-.messages__wrapper .messages:first-child {
+[dir="rtl"] .messages__wrapper {
+  padding: 0 8px 0 0;
+}
+.messages:first-child {
   margin-top: 28px;
 }
-.messages__wrapper .messages:last-child {
+.messages:last-child {
   margin-bottom: 13px;
 }
-[dir="rtl"] .messages__wrapper {
-  padding: 0 8px 0 0;
-}