Issue #3033100 by seanB, lauriii: Media library field widget styles are broken on initial page load

core/modules/media_library/css/media_library.theme.css

@@ -246,6 +246,16 @@
   position: relative;
 }
 
+.media-library-widget-empty-text {
+  margin-bottom: 0;
+}
+
+/* @todo Change to .media-library-open-button when styles are moved to the
+     seven theme in https://www.drupal.org/project/drupal/issues/2980769 */
+.button.media-library-open-button {
+  margin-left: 0;
+}
+
 .media-library-widget__toggle-weight {
   position: absolute;
   top: 5px;

core/modules/media_library/media_library.libraries.yml

@@ -29,6 +29,7 @@ widget:
   dependencies:
     - core/jquery.ui.sortable
     - core/jquery.once
+    - media_library/style
 
 ui:
   version: VERSION
@@ -36,5 +37,5 @@ ui:
     js/media_library.ui.js: {}
   dependencies:
     - core/drupal.ajax
-    - media_library/view
     - core/jquery.once
+    - media_library/view

core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php

@@ -287,7 +287,14 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
 
     if (empty($referenced_entities)) {
       $element['empty_selection'] = [
-        '#markup' => $this->t('<p>No media items are selected.</p>'),
+        '#type' => 'html_tag',
+        '#tag' => 'p',
+        '#value' => $this->t('No media items are selected.'),
+        '#attributes' => [
+          'class' => [
+            'media-library-widget-empty-text',
+          ],
+        ],
       ];
     }
     else {