[Fleet] add max width to markdown img tag (elastic#178937)

## Summary

Fix elastic#177749

Fixed weird formatting for some integrations overview page, where there
were some big resolution images part of the readme, e.g.
https://github.com/elastic/integrations/tree/main/packages/cribl

Added a max width on the image tag (took inspiration from the github
readme).

To verify:
- Go to kibana integrations
- Enable beta integrations
- Search on Cribl, and click on it to go to overview page
- Verify that the page is not weirdly wrapped, the images should be
fully visible
- Same for Amazon Kinesis Data Firehose integration

Cribl integration:
<img width="1785" alt="image"
src="https://github.com/elastic/kibana/assets/90178898/7eeb89d6-d08f-4ce9-bc35-56a7bc5d9bf1">

Amazon Kinesis Data Firehose:
<img width="1754" alt="image"
src="https://github.com/elastic/kibana/assets/90178898/cb00d03f-15b1-408b-94c9-16841964f019">

<img width="1756" alt="image"
src="https://github.com/elastic/kibana/assets/90178898/2067dc1d-0dcf-45b2-96a7-f2325c3958fd">


### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/markdown_renderers.tsx

@@ -111,5 +111,10 @@ export const markdownRenderers = (
         </EuiCodeBlock>
       );
     },
+    img: (
+      props: React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement>
+    ) => {
+      return <img style={{ maxWidth: '100%' }} {...props} alt={props.alt} />;
+    },
   };
 };

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/readme.test.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { createIntegrationsTestRendererMock } from '../../../../../../../mock';
+
+import { Readme } from './readme';
+
+describe('Readme', () => {
+  function render() {
+    const refs = {
+      current: {
+        set: jest.fn(),
+        get: jest.fn(),
+      },
+    } as any;
+    const testRenderer = createIntegrationsTestRendererMock();
+    return testRenderer.render(
+      <Readme
+        packageName="test"
+        version="1.0.0"
+        markdown="# Test ![Image](../img/image.png)>"
+        refs={refs}
+      />
+    );
+  }
+  it('should render img tag with max width', () => {
+    const result = render();
+
+    const img = result.getByAltText('Image');
+
+    expect(img).toHaveStyle('max-width: 100%');
+    expect(img).toHaveAttribute('src', '/mock/api/fleet/epm/packages/test/1.0.0//img/image.png');
+  });
+});