[Fleet] Remove unwanted overflow on Integrations screenshots

elastic · Feb 8, 2022 · bc561ed · bc561ed
1 parent 28d8bc8
commit bc561ed
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/...eet/public/applications/integrations/sections/epm/screens/detail/overview/screenshots.tsx b/...eet/public/applications/integrations/sections/epm/screens/detail/overview/screenshots.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 import React, { useState, useMemo, memo } from 'react';
+import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiFlexGroup, EuiFlexItem, EuiImage, EuiText, EuiPagination } from '@elastic/eui';
@@ -17,6 +18,9 @@ interface ScreenshotProps {
   packageName: string;
   version: string;
 }
+const Pagination = styled(EuiPagination)`
+  max-width: 130px;
+`;
 
 export const Screenshots: React.FC<ScreenshotProps> = memo(({ images, packageName, version }) => {
   const { toPackageImage } = useLinks();
@@ -48,7 +52,7 @@ export const Screenshots: React.FC<ScreenshotProps> = memo(({ images, packageNam
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiPagination
+            <Pagination
               aria-label={i18n.translate('xpack.fleet.epm.screenshotPaginationAriaLabel', {
                 defaultMessage: '{packageName} screenshot pagination',
                 values: {