From 03d024cbea2df6277984cdc00d9a48b7a8121b92 Mon Sep 17 00:00:00 2001
From: Yohann Gablowski <yohann.gablowski@gmail.com>
Date: Thu, 21 Nov 2024 09:08:33 +0100
Subject: [PATCH 1/2] fix(iframe): enhance responsive

---
 ui/src/iframes/Components/VerbatimsCarousel.js |  8 ++++----
 ui/src/iframes/Components/shared.style.js      |  2 +-
 ui/src/iframes/IframeFormation.style.js        | 16 ++++++++++++----
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/ui/src/iframes/Components/VerbatimsCarousel.js b/ui/src/iframes/Components/VerbatimsCarousel.js
index 7f60073b..fa106cc4 100644
--- a/ui/src/iframes/Components/VerbatimsCarousel.js
+++ b/ui/src/iframes/Components/VerbatimsCarousel.js
@@ -33,7 +33,7 @@ export const VerbatimsCarousel = ({ verbatims, setVerbatimsStep }) => {
     const savedFeedback = localStorage.getItem("usefullFeedback");
     return savedFeedback ? JSON.parse(savedFeedback) : [];
   });
-  const { isMobile, isDesktop } = useBreakpoints();
+  const { isMobile } = useBreakpoints();
   const trackEvent = useMatomoEvent();
 
   const MAX_CHAR = isMobile ? 150 : 300;
@@ -63,8 +63,8 @@ export const VerbatimsCarousel = ({ verbatims, setVerbatimsStep }) => {
   return (
     <Swiper
       rewind={true}
-      spaceBetween={isMobile ? 20 : 15}
-      slidesPerView={isMobile ? 1.3 : 1.3}
+      spaceBetween={isMobile ? 30 : 20}
+      slidesPerView="1.5"
       centeredSlides={true}
       modules={[Controller, Keyboard]}
       controller={{ control: swiperControl }}
@@ -94,7 +94,7 @@ export const VerbatimsCarousel = ({ verbatims, setVerbatimsStep }) => {
                 : null
             }
           >
-            <VerbatimContainer isDesktop={isDesktop}>
+            <VerbatimContainer>
               <img src={Quote} aria-hidden={true} />
               <VerbatimContent>
                 {expandedIndex === index
diff --git a/ui/src/iframes/Components/shared.style.js b/ui/src/iframes/Components/shared.style.js
index 38d8a56d..c54bbd84 100644
--- a/ui/src/iframes/Components/shared.style.js
+++ b/ui/src/iframes/Components/shared.style.js
@@ -21,7 +21,7 @@ export const VerbatimContainer = styled.div`
   align-items: flex-start;
   justify-content: flex-start;
   gap: 1rem;
-  width: ${(props) => (props.isDesktop ? "70%" : "100%")};
+  width: 100%;
   margin: 16px auto 0px auto;
   padding: 0 16px;
 
diff --git a/ui/src/iframes/IframeFormation.style.js b/ui/src/iframes/IframeFormation.style.js
index 8d23332c..d1c25b54 100644
--- a/ui/src/iframes/IframeFormation.style.js
+++ b/ui/src/iframes/IframeFormation.style.js
@@ -2,12 +2,12 @@ import { fr } from "@codegouvfr/react-dsfr";
 import styled from "@emotion/styled";
 
 export const IframeContainer = styled.main`
-  width: 100%;
-  padding: 0 5px;
+  max-width: 800px;
+  padding: 0;
 
   & > p {
     font-size: 16px;
-    line-heihgt: 24px;
+    line-height: 24px;
     margin-bottom: 16px;
   }
 `;
@@ -230,6 +230,13 @@ export const TitleContainer = styled.div`
   justify-content: flex-start;
   gap: 1rem;
   padding: 16px 0;
+  width: 100%;
+
+  ${fr.breakpoints.down("sm")} {
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    gap: 1rem;
+  }
 
   & h3 {
     margin: 0;
@@ -239,13 +246,14 @@ export const TitleContainer = styled.div`
 export const ConstructionNotice = styled.div`
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
   justify-content: flex-start;
   background-color: var(--background-action-low-blue-france);
   padding: 12px;
   gap: 8px;
   border-radius: 4px;
   margin-bottom: 16px;
+  width: 100%;
 
   & span {
     color: var(--background-flat-blue-france);

From 0a8c8d54e3ced7dbd8c01c40097084aa0e58bea9 Mon Sep 17 00:00:00 2001
From: Yohann Gablowski <yohann.gablowski@gmail.com>
Date: Thu, 21 Nov 2024 09:08:55 +0100
Subject: [PATCH 2/2] fix(iframe): enhance graph

---
 ui/src/iframes/Components/ExperienceEnEntrepriseRating.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/src/iframes/Components/ExperienceEnEntrepriseRating.js b/ui/src/iframes/Components/ExperienceEnEntrepriseRating.js
index 4767cd98..e1e370e2 100644
--- a/ui/src/iframes/Components/ExperienceEnEntrepriseRating.js
+++ b/ui/src/iframes/Components/ExperienceEnEntrepriseRating.js
@@ -93,6 +93,7 @@ const chartOptions = (data, isMobile) => {
     yAxis: {
       type: "category",
       data: labels,
+      inverse: true,
       triggerEvent: true,
       axisLabel: {
         margin: isMobile ? 10 : 20,
@@ -118,7 +119,7 @@ const chartOptions = (data, isMobile) => {
         label: {
           show: true,
           position: "inside",
-          formatter: (params) => (params.value === 8 ? "" : params.value + "%"),
+          formatter: (params) => (params.value < 8 ? "" : params.value + "%"),
           fontFamily: "Marianne",
           fontSize: 12,
           color: "#161616",
@@ -135,7 +136,7 @@ const chartOptions = (data, isMobile) => {
         label: {
           show: true,
           position: "inside",
-          formatter: (params) => (params.value === 8 ? "" : params.value + "%"),
+          formatter: (params) => (params.value < 8 ? "" : params.value + "%"),
           fontFamily: "Marianne",
           fontSize: 12,
           color: "#161616",