From e66a4ca27954a439af26ffee12778bfe810ce792 Mon Sep 17 00:00:00 2001
From: Cristina Amico <criamico@users.noreply.github.com>
Date: Tue, 8 Feb 2022 18:28:48 +0100
Subject: [PATCH] [Fleet] Remove unwanted overflow on Integrations screenshots
 (#124975)

(cherry picked from commit 30350fc9def38c0adf97ea25a875e23f5900e197)
---
 .../sections/epm/screens/detail/overview/screenshots.tsx    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/screenshots.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/screenshots.tsx
index d368b07b62e41..a6f11a40bc3b7 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/screenshots.tsx
+++ b/x-pack/plugins/fleet/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: {