Issue #3397291 by Utkarsh_33, rkoller, smustgrave: Improve the readability of...

Issue #3397291 by Utkarsh_33, rkoller, smustgrave: Improve the readability of the view mode and form mode page

(cherry picked from commit 005c0e91)

core/modules/field_ui/css/field_ui_display_mode_table.css

+.display-mode-table th:first-child {
+  width: 30%;
+}
+.display-mode-table th:nth-child(2) {
+  width: 50%;
+}
+.display-mode-table th:last-child {
+  width: 20%;
+}
+.display-mode-table td {
+  max-width: 50px;
+  word-wrap: break-word;
+}

core/modules/field_ui/field_ui.libraries.yml

@@ -21,3 +21,9 @@ drupal.field_ui.manage_fields:
     theme:
       css/field_ui_add_field.theme.css: {}
       css/field_ui.icons.theme.css: {}
+
+drupal.field_ui_table:
+  version: VERSION
+  css:
+    theme:
+      css/field_ui_display_mode_table.css: {}

core/modules/field_ui/src/EntityDisplayModeListBuilder.php

@@ -129,6 +129,9 @@ public function render() {
         '#type' => 'table',
         '#header' => $this->buildHeader(),
         '#rows' => [],
+        '#attributes' => [
+          'class' => ['display-mode-table'],
+        ],
       ];
       foreach ($entities as $entity) {
         if ($row = $this->buildRow($entity)) {
@@ -158,6 +161,7 @@ public function render() {
           '#attached' => [
             'library' => [
               'core/drupal.dialog.ajax',
+              'field_ui/drupal.field_ui_table',
             ],
           ],
         ],

core/themes/stable9/css/field_ui/field_ui_display_mode_table.css

+.display-mode-table th:first-child {
+  width: 30%;
+}
+.display-mode-table th:nth-child(2) {
+  width: 50%;
+}
+.display-mode-table th:last-child {
+  width: 20%;
+}
+.display-mode-table td {
+  max-width: 50px;
+  word-wrap: break-word;
+}

core/themes/stable9/stable9.info.yml

@@ -296,6 +296,10 @@ libraries-override:
       theme:
         css/views_ui.admin.theme.css: css/views_ui/views_ui.admin.theme.css
         css/views_ui.contextual.css: css/views_ui/views_ui.contextual.css
+  field_ui/drupal.field_ui_table:
+    css:
+      theme:
+        css/field_ui_display_mode_table.css: css/field_ui/field_ui_display_mode_table.css
 
 libraries-extend:
   tour/tour: