Fix overflow problem of detailed doc

Signed-off-by: Miki <miki@amazon.com>
opensearch-project · Feb 2, 2024 · ee23011 · ee23011
1 parent 0bbcde1
commit ee23011
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss
@@ -2,6 +2,11 @@
   border-top: none !important;
 }
 
+// stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+.euiFlexItem.osdDocTable__detailsIconContainer {
+  margin-right: 0;
+}
+
 .osd-table td.osdDocTableCell__toggleDetails {
   padding: 5px 0 0 4px;
 }

diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx
@@ -132,8 +132,8 @@ export const TableRow = ({
   const expandedTableRow = (
     <tr key={'x' + row._id}>
       <td className="osdDocTable__detailsParent" colSpan={columnIds.length + 1}>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
+        <EuiFlexGroup gutterSize="m" alignItems="center">
+          <EuiFlexItem grow={false} className="osdDocTable__detailsIconContainer">
             <EuiIcon type="folderOpen" />
           </EuiFlexItem>
           <EuiFlexItem>
@@ -150,7 +150,7 @@ export const TableRow = ({
             <DocViewerLinks hit={row} indexPattern={indexPattern} columns={columns} />
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiFlexGroup>
+        <EuiFlexGroup gutterSize="m">
           <EuiFlexItem>
             <DocViewer
               hit={row}