[transform] Fix EuiTabbedContent width for JSON views.

Author: walterra

x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx

@@ -103,13 +103,20 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
     },
     */
   ];
+
+  // Using `expand=false` here so the tabs themselves don't spread
+  // across the full width. The 100% width is used so the bottom line
+  // as well as the tab content spans across the full width.
+  // EuiTabbedContent would do that usually anyway,
+  // it just doesn't seem to work within certain layouts.
   return (
     <EuiTabbedContent
       size="s"
       tabs={tabs}
       initialSelectedTab={tabs[0]}
       onTabClick={() => {}}
       expand={false}
+      style={{ width: '100%' }}
     />
   );
 };

x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/expanded_row.test.tsx.snap

@@ -156,13 +156,19 @@ export const ExpandedRow: SFC<Props> = ({ item }) => {
       content: <ExpandedRowPreviewPane transformConfig={item.config} />,
     },
   ];
+
+  // Using `expand=false` here so the tabs themselves don't spread
+  // across the full width. The 100% width is used so the bottom line
+  // as well as the tab content spans across the full width,
+  // even if the tab content wouldn't extend to the full width.
   return (
     <EuiTabbedContent
       size="s"
       tabs={tabs}
       initialSelectedTab={tabs[0]}
       onTabClick={() => {}}
       expand={false}
+      style={{ width: '100%' }}
     />
   );
 };