From 98bca412f04fd2a82d5ff01345417922f725e614 Mon Sep 17 00:00:00 2001
From: carolineBda <caroline.bourdeu@gmail.com>
Date: Mon, 10 Jul 2023 11:51:11 +0200
Subject: [PATCH] fix(fiche service public): fix image width on mobile

---
 .../src/fiche-service-public/components/Image.tsx      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/code-du-travail-frontend/src/fiche-service-public/components/Image.tsx b/packages/code-du-travail-frontend/src/fiche-service-public/components/Image.tsx
index 8ea8b018a7..ab64d0660f 100644
--- a/packages/code-du-travail-frontend/src/fiche-service-public/components/Image.tsx
+++ b/packages/code-du-travail-frontend/src/fiche-service-public/components/Image.tsx
@@ -37,7 +37,7 @@ function ImageComponent({ data }: ImageProps) {
 
   return (
     <>
-      <figure role="group" aria-label={legendText}>
+      <Figure role="group" aria-label={legendText}>
         <img
           src={`https://www.service-public.fr/webapp/images/vdd/extralarge/${name}`}
           alt={legendText}
@@ -45,7 +45,7 @@ function ImageComponent({ data }: ImageProps) {
         <Figcaption>
           {creditText && <span>Crédits : {creditText}</span>}
         </Figcaption>
-      </figure>
+      </Figure>
       {texteDeRemplacement && (
         <MoreContent noLeftPadding title="Voir en détail">
           <Wrapper variant="dark">{texteDeRemplacement}</Wrapper>
@@ -57,6 +57,12 @@ function ImageComponent({ data }: ImageProps) {
 
 export const Image = memo(ImageComponent) as typeof ImageComponent;
 
+const Figure = styled.figure`
+  img {
+    max-width: 100%;
+  }
+`;
+
 const Figcaption = styled.figcaption`
   display: flex;
   justify-content: flex-end;