Grid layout fixes (#80305) (#80324)

* fixes to make grid layout a bit more solid.

* Changed the spacing a bit more.

* Updated snapshot.

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/index.stories.tsx

@@ -8,6 +8,7 @@ import { Provider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 import { storiesOf } from '@storybook/react';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { EuiHorizontalRule } from '@elastic/eui';
 
 import { KibanaContextProvider } from '../../../../../../../../../../src/plugins/kibana_react/public';
 
@@ -27,7 +28,11 @@ const renderGrid = (store: ReturnType<typeof createGlobalNoMiddlewareStore>) =>
   <Provider store={store}>
     <KibanaContextProvider services={{ uiSettings: { get: () => 'MMM D, YYYY @ HH:mm:ss.SSS' } }}>
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <EuiHorizontalRule margin="none" />
+
         <TrustedAppsGrid />
+
+        <EuiHorizontalRule margin="none" />
       </ThemeProvider>
     </KibanaContextProvider>
   </Provider>

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/index.tsx

@@ -4,14 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { memo, useCallback, useEffect } from 'react';
+import React, { FC, memo, useCallback, useEffect } from 'react';
 import {
   EuiTablePagination,
   EuiFlexGroup,
   EuiFlexItem,
   EuiProgress,
   EuiIcon,
   EuiText,
+  EuiSpacer,
 } from '@elastic/eui';
 
 import { Pagination } from '../../../state';
@@ -64,6 +65,14 @@ const PaginationBar = ({ pagination, onChange }: PaginationBarProps) => {
   );
 };
 
+const GridMessage: FC = ({ children }) => (
+  <div className="euiTextAlign--center">
+    <EuiSpacer size="m" />
+    {children}
+    <EuiSpacer size="m" />
+  </div>
+);
+
 export const TrustedAppsGrid = memo(() => {
   const pagination = useTrustedAppsSelector(getListPagination);
   const listItems = useTrustedAppsSelector(getListItems);
@@ -80,35 +89,41 @@ export const TrustedAppsGrid = memo(() => {
   }));
 
   return (
-    <EuiFlexGroup direction="column">
+    <EuiFlexGroup direction="column" gutterSize="none">
       {isLoading && (
         <EuiFlexItem grow={false}>
           <EuiProgress size="xs" color="primary" />
         </EuiFlexItem>
       )}
       <EuiFlexItem>
         {error && (
-          <div className="euiTextAlign--center">
+          <GridMessage>
             <EuiIcon type="minusInCircle" color="danger" /> {error}
-          </div>
+          </GridMessage>
+        )}
+        {!error && listItems.length === 0 && (
+          <GridMessage>
+            <EuiText size="s">{NO_RESULTS_MESSAGE}</EuiText>
+          </GridMessage>
         )}
-        {!error && (
-          <EuiFlexGroup direction="column">
-            {listItems.map((item) => (
-              <EuiFlexItem grow={false} key={item.id}>
-                <TrustedAppCard trustedApp={item} onDelete={handleTrustedAppDelete} />
-              </EuiFlexItem>
-            ))}
-            {listItems.length === 0 && (
-              <EuiText size="s" className="euiTextAlign--center">
-                {NO_RESULTS_MESSAGE}
-              </EuiText>
-            )}
-          </EuiFlexGroup>
+        {!error && listItems.length > 0 && (
+          <>
+            <EuiSpacer size="l" />
+
+            <EuiFlexGroup direction="column">
+              {listItems.map((item) => (
+                <EuiFlexItem grow={false} key={item.id}>
+                  <TrustedAppCard trustedApp={item} onDelete={handleTrustedAppDelete} />
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGroup>
+          </>
         )}
       </EuiFlexItem>
       {!error && pagination.totalItemCount > 0 && (
         <EuiFlexItem grow={false}>
+          <EuiSpacer size="l" />
+
           <PaginationBar pagination={pagination} onChange={handlePaginationChange} />
         </EuiFlexItem>
       )}