From aeace7dc821822d9e7d12c2b4973316c17338f18 Mon Sep 17 00:00:00 2001
From: Dmitry Tomashevich <39378793+Dmitriynj@users.noreply.github.com>
Date: Mon, 23 Aug 2021 14:16:51 +0300
Subject: [PATCH] [Discover] Fix discover footer width (#109403)

* [Discover] fix discover footer width

* [Discover] fix types

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../main/components/doc_table/_doc_table.scss |  1 +
 .../doc_table/doc_table_infinite.tsx          | 55 +++++++++++--------
 .../doc_table/doc_table_wrapper.tsx           |  2 +
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/plugins/discover/public/application/apps/main/components/doc_table/_doc_table.scss b/src/plugins/discover/public/application/apps/main/components/doc_table/_doc_table.scss
index add2d4e753c60..d19a1fd042069 100644
--- a/src/plugins/discover/public/application/apps/main/components/doc_table/_doc_table.scss
+++ b/src/plugins/discover/public/application/apps/main/components/doc_table/_doc_table.scss
@@ -5,6 +5,7 @@
 .kbnDocTableWrapper {
   @include euiScrollBar;
   overflow: auto;
+  display: flex;
   flex: 1 1 100%;
   flex-direction: column; /* 1 */
 
diff --git a/src/plugins/discover/public/application/apps/main/components/doc_table/doc_table_infinite.tsx b/src/plugins/discover/public/application/apps/main/components/doc_table/doc_table_infinite.tsx
index 8e9066151b368..778c6c1abe274 100644
--- a/src/plugins/discover/public/application/apps/main/components/doc_table/doc_table_infinite.tsx
+++ b/src/plugins/discover/public/application/apps/main/components/doc_table/doc_table_infinite.tsx
@@ -14,6 +14,8 @@ import { EuiButtonEmpty } from '@elastic/eui';
 import { DocTableProps, DocTableRenderProps, DocTableWrapper } from './doc_table_wrapper';
 import { SkipBottomButton } from '../skip_bottom_button';
 
+const FOOTER_PADDING = { padding: 0 };
+
 const DocTableInfiniteContent = (props: DocTableRenderProps) => {
   const [limit, setLimit] = useState(props.minimumVisibleRows);
 
@@ -74,29 +76,38 @@ const DocTableInfiniteContent = (props: DocTableRenderProps) => {
       <table className="kbn-table table" data-test-subj="docTable">
         <thead>{props.renderHeader()}</thead>
         <tbody>{props.renderRows(props.rows.slice(0, limit))}</tbody>
-      </table>
-      {props.rows.length === props.sampleSize ? (
-        <div
-          className="kbnDocTable__footer"
-          data-test-subj="discoverDocTableFooter"
-          tabIndex={-1}
-          id="discoverBottomMarker"
-        >
-          <FormattedMessage
-            id="discover.howToSeeOtherMatchingDocumentsDescription"
-            defaultMessage="These are the first {sampleSize} documents matching
+        <tfoot>
+          <tr>
+            <td colSpan={(props.columnLength || 1) + 2} style={FOOTER_PADDING}>
+              {props.rows.length === props.sampleSize ? (
+                <div
+                  className="kbnDocTable__footer"
+                  data-test-subj="discoverDocTableFooter"
+                  tabIndex={-1}
+                  id="discoverBottomMarker"
+                >
+                  <FormattedMessage
+                    id="discover.howToSeeOtherMatchingDocumentsDescription"
+                    defaultMessage="These are the first {sampleSize} documents matching
   your search, refine your search to see others."
-            values={{ sampleSize: props.sampleSize }}
-          />
-          <EuiButtonEmpty onClick={onBackToTop} data-test-subj="discoverBackToTop">
-            <FormattedMessage id="discover.backToTopLinkText" defaultMessage="Back to top." />
-          </EuiButtonEmpty>
-        </div>
-      ) : (
-        <span tabIndex={-1} id="discoverBottomMarker">
-          &#8203;
-        </span>
-      )}
+                    values={{ sampleSize: props.sampleSize }}
+                  />
+                  <EuiButtonEmpty onClick={onBackToTop} data-test-subj="discoverBackToTop">
+                    <FormattedMessage
+                      id="discover.backToTopLinkText"
+                      defaultMessage="Back to top."
+                    />
+                  </EuiButtonEmpty>
+                </div>
+              ) : (
+                <span tabIndex={-1} id="discoverBottomMarker">
+                  &#8203;
+                </span>
+              )}
+            </td>
+          </tr>
+        </tfoot>
+      </table>
     </Fragment>
   );
 };
diff --git a/src/plugins/discover/public/application/apps/main/components/doc_table/doc_table_wrapper.tsx b/src/plugins/discover/public/application/apps/main/components/doc_table/doc_table_wrapper.tsx
index c875bf155bd79..4c832d3f6a02c 100644
--- a/src/plugins/discover/public/application/apps/main/components/doc_table/doc_table_wrapper.tsx
+++ b/src/plugins/discover/public/application/apps/main/components/doc_table/doc_table_wrapper.tsx
@@ -81,6 +81,7 @@ export interface DocTableProps {
 }
 
 export interface DocTableRenderProps {
+  columnLength: number;
   rows: DocTableRow[];
   minimumVisibleRows: number;
   sampleSize: number;
@@ -219,6 +220,7 @@ export const DocTableWrapper = ({
     >
       {rows.length !== 0 &&
         render({
+          columnLength: columns.length,
           rows,
           minimumVisibleRows,
           sampleSize,