Merge pull request #6 from walterra/ml-transform-fix-messages-tab-walterra

alvarezmelissa87 · web-flow · commit 4e37032a0f20 · 2024-07-19T07:42:35.000-06:00
CSS fixes to keep fixed widths instead of percentages
diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx
@@ -8,7 +8,7 @@
 import React, { type FC } from 'react';
 import { css } from '@emotion/react';
 
-import { EuiTabbedContent } from '@elastic/eui';
+import { useEuiTheme, EuiTabbedContent } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 import { stringHash } from '@kbn/ml-string-hash';
@@ -30,6 +30,7 @@ interface Props {
 }
 
 export const ExpandedRow: FC<Props> = ({ item, onAlertEdit }) => {
+  const { euiTheme } = useEuiTheme();
   const tabId = stringHash(item.id);
 
   const tabs = [
@@ -112,7 +113,8 @@ export const ExpandedRow: FC<Props> = ({ item, onAlertEdit }) => {
       onTabClick={() => {}}
       expand={false}
       css={css`
-        width: 100%;
+        margin-left: -${euiTheme.size.xl};
+        width: calce(100% + ${euiTheme.size.xl});
 
         .euiTable {
           background-color: transparent;
diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx
@@ -8,7 +8,7 @@
 import type { MouseEvent } from 'react';
 import React, { useState, type FC } from 'react';
 
-import type { EuiBasicTableProps } from '@elastic/eui';
+import { useEuiTheme, type EuiBasicTableProps } from '@elastic/eui';
 import { formatDate, EuiPanel, EuiBasicTable, EuiToolTip, EuiButtonIcon } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -30,6 +30,7 @@ interface Sorting {
 }
 
 export const ExpandedRowMessagesPane: FC<ExpandedRowMessagesPaneProps> = ({ transformId }) => {
+  const { euiTheme } = useEuiTheme();
   const { showNodeInfo } = useEnabledFeatures();
 
   const [pageIndex, setPageIndex] = useState(0);
@@ -79,8 +80,12 @@ export const ExpandedRowMessagesPane: FC<ExpandedRowMessagesPaneProps> = ({ tran
       ) : (
         ''
       ),
-      render: (message: TransformMessage) => <JobIcon message={message} />,
-      width: '6%',
+      render: (message: TransformMessage) => (
+        <div css={{ marginLeft: `-${euiTheme.base * 1.75}px` }}>
+          <JobIcon message={message} />
+        </div>
+      ),
+      width: euiTheme.size.xl,
     },
     {
       field: 'timestamp',
