[Discover] Update context app layout to remove extra horizontal margin

elastic · Sep 5, 2023 · 7e59c76 · 7e59c76
1 parent 604d722
commit 7e59c76
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 33 deletions.
diff --git a/src/plugins/discover/public/application/context/components/action_bar/action_bar.tsx b/src/plugins/discover/public/application/context/components/action_bar/action_bar.tsx
@@ -156,6 +156,7 @@ export function ActionBar({
       </EuiFlexGroup>
       {!isSuccessor && showWarning && <EuiSpacer size="s" />}
       {!isSuccessor && showWarning && <ActionBarWarning docCount={docCountAvailable} type={type} />}
+      <EuiSpacer size="s" />
     </form>
   );
 }
diff --git a/src/plugins/discover/public/application/context/context_app.tsx b/src/plugins/discover/public/application/context/context_app.tsx
@@ -10,7 +10,8 @@ import React, { Fragment, memo, useEffect, useRef, useMemo, useCallback } from '
 import './context_app.scss';
 import classNames from 'classnames';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiText, EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui';
+import { EuiText, EuiPage, EuiPageBody, EuiSpacer, useEuiPaddingSize } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { cloneDeep } from 'lodash';
 import { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
@@ -215,6 +216,8 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
     };
   };
 
+  const titlePadding = useEuiPaddingSize('m');
+
   return (
     <Fragment>
       {fetchedState.anchorStatus.value === LoadingStatus.FAILED ? (
@@ -235,12 +238,17 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
           <EuiPage className={classNames({ dscDocsPage: !isLegacy })}>
             <EuiPageBody
               panelled
-              paddingSize="s"
+              paddingSize="none"
               className="dscDocsContent"
               panelProps={{ role: 'main' }}
             >
               <EuiSpacer size="s" />
-              <EuiText data-test-subj="contextDocumentSurroundingHeader">
+              <EuiText
+                data-test-subj="contextDocumentSurroundingHeader"
+                css={css`
+                  padding: ${titlePadding} ${titlePadding} 0;
+                `}
+              >
                 <strong>
                   <FormattedMessage
                     id="discover.context.contextOfTitle"

diff --git a/src/plugins/discover/public/application/context/context_app_content.tsx b/src/plugins/discover/public/application/context/context_app_content.tsx
@@ -8,7 +8,8 @@
 
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiSpacer, EuiText, useEuiPaddingSize } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { SortDirection } from '@kbn/data-plugin/public';
 import type { SortOrder } from '@kbn/saved-search-plugin/public';
@@ -149,26 +150,28 @@ export function ContextAppContent({
 
   return (
     <Fragment>
-      {!!interceptedWarnings?.length && (
-        <>
-          <SearchResponseWarnings
-            variant="callout"
-            interceptedWarnings={interceptedWarnings}
-            data-test-subj="dscContextInterceptedWarnings"
-          />
-          <EuiSpacer size="s" />
-        </>
-      )}
-      <ActionBarMemoized
-        type={SurrDocType.PREDECESSORS}
-        defaultStepSize={defaultStepSize}
-        docCount={predecessorCount}
-        docCountAvailable={predecessors.length}
-        onChangeCount={onChangeCount}
-        isLoading={arePredecessorsLoading}
-        isDisabled={isAnchorLoading}
-      />
-      {loadingFeedback()}
+      <WrapperWithPadding>
+        {!!interceptedWarnings?.length && (
+          <>
+            <SearchResponseWarnings
+              variant="callout"
+              interceptedWarnings={interceptedWarnings}
+              data-test-subj="dscContextInterceptedWarnings"
+            />
+            <EuiSpacer size="s" />
+          </>
+        )}
+        <ActionBarMemoized
+          type={SurrDocType.PREDECESSORS}
+          defaultStepSize={defaultStepSize}
+          docCount={predecessorCount}
+          docCountAvailable={predecessors.length}
+          onChangeCount={onChangeCount}
+          isLoading={arePredecessorsLoading}
+          isDisabled={isAnchorLoading}
+        />
+        {loadingFeedback()}
+      </WrapperWithPadding>
       {isLegacy && rows && rows.length !== 0 && (
         <DocTableContextMemoized
           columns={columns}
@@ -214,15 +217,31 @@ export function ContextAppContent({
           </CellActionsProvider>
         </div>
       )}
-      <ActionBarMemoized
-        type={SurrDocType.SUCCESSORS}
-        defaultStepSize={defaultStepSize}
-        docCount={successorCount}
-        docCountAvailable={successors.length}
-        onChangeCount={onChangeCount}
-        isLoading={areSuccessorsLoading}
-        isDisabled={isAnchorLoading}
-      />
+      <WrapperWithPadding>
+        <ActionBarMemoized
+          type={SurrDocType.SUCCESSORS}
+          defaultStepSize={defaultStepSize}
+          docCount={successorCount}
+          docCountAvailable={successors.length}
+          onChangeCount={onChangeCount}
+          isLoading={areSuccessorsLoading}
+          isDisabled={isAnchorLoading}
+        />
+      </WrapperWithPadding>
     </Fragment>
   );
 }
+
+const WrapperWithPadding: React.FC = ({ children }) => {
+  const padding = useEuiPaddingSize('s');
+
+  return (
+    <div
+      css={css`
+        padding: 0 ${padding};
+      `}
+    >
+      {children}
+    </div>
+  );
+};