fix link flow in large mobile screens (#6178)

elastic · Aug 25, 2022 · d40e9e9 · d40e9e9
1 parent bef3dfe
commit d40e9e9
Showing 1 changed file with 21 additions and 11 deletions.
diff --git a/src-docs/src/components/guide_page/guide_page_header.tsx b/src-docs/src/components/guide_page/guide_page_header.tsx
@@ -1,16 +1,18 @@
 import React, { useState } from 'react';
 
 import {
-  EuiHeaderLogo,
+  EuiBadge,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiHeader,
+  EuiHeaderLogo,
   EuiHeaderSectionItemButton,
-} from '../../../../src/components/header';
-import { EuiBadge } from '../../../../src/components/badge';
-import { EuiIcon } from '../../../../src/components/icon';
-import { EuiToolTip } from '../../../../src/components/tool_tip';
-import { EuiPopover } from '../../../../src/components/popover';
+  EuiIcon,
+  EuiPopover,
+  EuiToolTip,
+} from '../../../../src/components';
 import { useIsWithinBreakpoints } from '../../../../src/services';
-import { EuiButtonEmpty } from '../../../../src/components/button';
 
 // @ts-ignore Not TS
 import { CodeSandboxLink } from '../../components/codesandbox/link';
@@ -101,14 +103,22 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
 
     return (
       <EuiPopover
-        id="guidePageChromeThemePopover"
         button={button}
         isOpen={mobilePopoverIsOpen}
         closePopover={() => setMobilePopoverIsOpen(false)}
       >
-        {renderGithub()}
-        <GuideFigmaLink />
-        {renderCodeSandbox()}
+        <EuiFlexGroup
+          direction="column"
+          alignItems="flexStart"
+          gutterSize="none"
+          responsive={false}
+        >
+          <EuiFlexItem>{renderGithub()}</EuiFlexItem>
+          <EuiFlexItem>
+            <GuideFigmaLink />
+          </EuiFlexItem>
+          <EuiFlexItem>{renderCodeSandbox()}</EuiFlexItem>
+        </EuiFlexGroup>
       </EuiPopover>
     );
   }