From 096829091a0313b7bfb4ff7461c1ea6af0573c29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eneko=20Uru=C3=B1uela?= <e.urunuela@icloud.com>
Date: Wed, 4 Dec 2024 13:01:24 -0700
Subject: [PATCH] Enforce equal figure widths in HTML report and make them
 adjustable by window size (#1154)

---
 .../data/html/report_body_template.html          | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/tedana/reporting/data/html/report_body_template.html b/tedana/reporting/data/html/report_body_template.html
index 65c68edf2..6cf812ba3 100644
--- a/tedana/reporting/data/html/report_body_template.html
+++ b/tedana/reporting/data/html/report_body_template.html
@@ -176,36 +176,36 @@ <h1>Carpet plots</h1>
   <div class="carpet-wrapper">
     <div class="carpet-buttons">$buttons</div>
     <div class="carpet-plots-image">
-      <img id="imgCarpetPlot" src="$initialCarpet" />
+      <img id="imgCarpetPlot" src="$initialCarpet" style="width: 95%; max-width: 1200px; height: auto;" />
     </div>
   </div>
 </div>
 <div class="carpet-plots">
   <h1>Adaptive mask</h1>
-  <img id="adaptiveMask" src="$adaptiveMask" style="height: 500px" />
+  <img id="adaptiveMask" src="$adaptiveMask" style="width: 95%; max-width: 1200px; height: auto;" />
 </div>
 <div class="carpet-plots">
   <h1>T2* and S0</h1>
   <h2>T2*</h2>
   <div class="carpet-plots-image">
-    <img id="t2starBrainPlot" src="$t2starBrainPlot" style="height: 500px" />
+    <img id="t2starBrainPlot" src="$t2starBrainPlot" style="width: 95%; max-width: 1200px; height: auto;" />
   </div>
   <div class="carpet-plots-image">
-    <img id="t2starHistogram" src="$t2starHistogram" style="height: 500px" />
+    <img id="t2starHistogram" src="$t2starHistogram" style="width: 95%; max-width: 1200px; height: auto;" />
   </div>
   <h2>S0</h2>
   <div class="carpet-plots-image">
-    <img id="s0BrainPlot" src="$s0BrainPlot" style="height: 500px" />
+    <img id="s0BrainPlot" src="$s0BrainPlot" style="width: 95%; max-width: 1200px; height: auto;" />
   </div>
   <div class="carpet-plots-image">
-    <img id="s0Histogram" src="$s0Histogram" style="height: 500px" />
+    <img id="s0Histogram" src="$s0Histogram" style="width: 95%; max-width: 1200px; height: auto;" />
   </div>
   <h2>T2* and S0 model fit (RMSE). (Scaled between 2nd and 98th percentiles)</h2>
   <div class="carpet-plots-image">
-    <img id="rmseBrainPlot" src="$rmseBrainPlot" style="height:500px;" />
+    <img id="rmseBrainPlot" src="$rmseBrainPlot" style="width: 95%; max-width: 1200px; height: auto;" />
   </div>
   <div class="carpet-plots-image">
-    <img id="rmseTimeseries" src="$rmseTimeseries" style="height:500px;" />
+    <img id="rmseTimeseries" src="$rmseTimeseries" style="width: 95%; max-width: 1200px; height: auto;" />
   </div>
 </div>
 </div>