[Discover] Fix discover footer width (#109403) (#109620)

* [Discover] fix discover footer width * [Discover] fix types Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Dmitry Tomashevich <[email protected]>
elastic · Aug 23, 2021 · 1bb95ac · 1bb95ac
1 parent cf41ad6
commit 1bb95ac
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 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
@@ -5,6 +5,7 @@
 .kbnDocTableWrapper {
   @include euiScrollBar;
   overflow: auto;
+  display: flex;
   flex: 1 1 100%;
   flex-direction: column; /* 1 */
 

diff --git a/...plugins/discover/public/application/apps/main/components/doc_table/doc_table_infinite.tsx b/...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
@@ -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,