feat: fix iframe dimensions

SocialGouv · Mar 27, 2024 · 138bad3 · 138bad3
1 parent 4540425
commit 138bad3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/client/src/components/HomePage/homePage.scss b/src/client/src/components/HomePage/homePage.scss
@@ -63,6 +63,13 @@
             padding: $spacing-4 !important;
         }
     }
+    &__section-iframe {
+        padding: $spacing-4;
+        @media (max-width: 600px) {
+            padding: $spacing-4 !important;
+            margin: auto !important;
+        }
+    }
 
     &__summary {
         color: $dark-blue;

diff --git a/src/client/src/components/HomePage/sections.js b/src/client/src/components/HomePage/sections.js
@@ -26,21 +26,21 @@ export const IconItems = () => {
   return (
     <div className="home-page__section ">
       {/* <h2 className="home-page__blue-title">FCE en chiffres</h2> */}
-      <div className="columns icons" style={{ height: "60vh" }}>
+      <div
+        className="columns icons "
+        style={{ height: "28VW", margin: "auto" }}
+      >
         <iframe
           title="Report Section"
           width="100%"
-          height="100%"
-          userScalable="no"
+          // height="90%"
           src="https://app.powerbi.com/view?r=eyJrIjoiNzdiNjg5YzgtNzk2OC00ZTkwLWEwOWYtNTBlOGM1ODc2ZjFlIiwidCI6IjAzNWU1MjkyLTVhMjUtNDUwOS1iYjA4LWE1NTVmN2QzMWE4YiJ9"
-          frameBorder="0"
           allowFullScreen="true"
           style={{
             backgroundColor: "#ffffff !important",
             filter: "drop-shadow(0 1px 3px rgba(0, 0, 18, 0.16))",
             overflow: "hidden",
             padding: 0,
-            color: "black",
           }}
         />
       </div>
@@ -181,7 +181,7 @@ export const DailyUse = () => {
   ];
 
   return (
-    <div className="home-page__daily-use home-page__section ">
+    <div className="home-page__daily-use home-page__section-iframe ">
       <h2 className="home-page__blue-title">Quels usages au quotidien ?</h2>
       <div className="columns home-page__daily-use__items">
         {items.map((item) => (