Improve layout for mobile browsers

elastic · Sep 30, 2022 · 76cca8a · 76cca8a
1 parent 9eb4ed0
commit 76cca8a
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/...es/policy/view/ingest_manager_integration/endpoint_policy_create_multi_step_extension.tsx b/...es/policy/view/ingest_manager_integration/endpoint_policy_create_multi_step_extension.tsx
@@ -21,7 +21,7 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => {
       <MediumCustomSpacer />
 
       <EuiFlexGroup>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={false} style={{ alignItems: 'center' }}>
           <LargeSecurityLogo />
         </EuiFlexItem>
 
@@ -33,15 +33,15 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => {
       </EuiFlexGroup>
 
       <MediumCustomSpacer />
-
       <Details />
+      <LargeCustomSpacer />
     </Container>
   );
 });
 EndpointPolicyCreateMultiStepExtension.displayName = 'EndpointPolicyCreateMultiStepExtension';
 
 const Container = styled('div')`
-  width: 820px;
+  padding: 0 23px;
 `;
 
 const Title = () => (
@@ -74,7 +74,7 @@ const LargeSecurityLogo = () => (
 );
 
 const Features = () => (
-  <EuiFlexGroup alignItems="center" gutterSize="s">
+  <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
     <EuiFlexItem grow={false}>
       <EuiIcon type="check" />
     </EuiFlexItem>