From cc5792a4643b8ee32fe9e62c380439a9795a4b30 Mon Sep 17 00:00:00 2001
From: Marie Backman <backmanma@ornl.gov>
Date: Thu, 16 Jan 2025 14:46:28 -0500
Subject: [PATCH] adjust REF_M reduction configuration form layout

---
 src/webmon_app/reporting/static/tables.css    |  1 +
 .../reduction/configuration_ref_m.html        | 22 +++++++++----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/webmon_app/reporting/static/tables.css b/src/webmon_app/reporting/static/tables.css
index 0c2cc629..d2ee7187 100755
--- a/src/webmon_app/reporting/static/tables.css
+++ b/src/webmon_app/reporting/static/tables.css
@@ -114,6 +114,7 @@ thead th a:link, thead th a:visited { color: #5B4729; display: block; }
 .property_table input[type!="submit"] { width:300px; }
 .property_table th { width: 100px; vertical-align:middle;}
 .short_label { display: inline-block; text-align:right; min-width:60px; width:60px; }
+.long_label { display: inline-block; text-align:right; min-width:150px; width:150px; }
 .tiny_input input { min-width:80px; width:80px; }
 .short_input input { min-width:80px; width:150px; }
 .icon_input { min-width:10px; width:20px; }
diff --git a/src/webmon_app/reporting/templates/reduction/configuration_ref_m.html b/src/webmon_app/reporting/templates/reduction/configuration_ref_m.html
index abe57013..d3f4c1ff 100644
--- a/src/webmon_app/reporting/templates/reduction/configuration_ref_m.html
+++ b/src/webmon_app/reporting/templates/reduction/configuration_ref_m.html
@@ -123,19 +123,19 @@
     </tr>
 
     <!-- Divider line -->
-    <td colspan="2"><hr></td>
+    <td><hr></td>
 
     <!-- Number of Peaks in the run -->
       <tr class='tiny_input'>
         <td>
-            <span class='short_label' title="Number of peaks in the run"><strong>Peak count</strong></span>
+            <span title="Number of peaks in the run"><strong>Peak count</strong></span>
             {{ options_form.peak_count }}
         </td>
     </tr>
 
 
     <!-- Divider line -->
-    <td colspan="2"><hr></td>
+    <td><hr></td>
     <tr>
         <td style="font-size: 18px; text-decoration: underline;"><strong>Peak # 1</strong></td>
     </tr>
@@ -144,7 +144,7 @@
       <tr class='tiny_input'>
         <td>
             {{ options_form.force_peak }}
-            <span class='short_label' title="You can choose to replace the ROI in the data by your own range.
+            <span title="You can choose to replace the ROI in the data by your own range.
 Check the following box if you want to define your own ROI and
 use it for peak selection."><strong>Force peak ROI</strong></span>
             <label class='short_label' for='peak_min'>Pixel<sub>min</sub></label>
@@ -191,13 +191,13 @@
 if you want to use the region on each side of the peak to estimate your background.">
                 <strong>Use side background</strong>
             </span>
-            <label for='bck_width'>Pixels on each side</label> {{ options_form.bck_width }}
+            <label class='long_label' for='bck_width'>Pixels on each side</label> {{ options_form.bck_width }}
         </td>
     </tr>
 
 
     <!-- Divider line -->
-    <td colspan="2"><hr></td>
+    <td><hr></td>
     <tr>
         <td style="font-size: 18px; text-decoration: underline;" title="Peak 2 options ignored if Peak count is 1">
             <strong>Peak # 2</strong>
@@ -208,7 +208,7 @@
       <tr class='tiny_input'>
         <td>
             {{ options_form.force_peak_s2 }}
-            <span class='short_label' title="You can choose to replace the ROI in the data by your own range.
+            <span title="You can choose to replace the ROI in the data by your own range.
 Check the following box if you want to define your own ROI and
 use it for peak selection."><strong>Force peak ROI</strong></span>
             <label class='short_label' for='peak_min_s2'>Pixel<sub>min</sub></label>
@@ -255,13 +255,13 @@
 if you want to use the region on each side of the peak to estimate your background.">
                 <strong>Use side background</strong>
             </span>
-            <label for='bck_width_s2'>Pixels on each side</label> {{ options_form.bck_width_s2 }}
+            <label class='long_label' for='bck_width_s2'>Pixels on each side</label> {{ options_form.bck_width_s2 }}
         </td>
     </tr>
 
 
     <!-- Divider line -->
-    <td colspan="2"><hr></td>
+    <td><hr></td>
     <tr>
         <td style="font-size: 18px; text-decoration: underline;" title="Peak 3 options ignored if Peak count smaller than 3">
             <strong>Peak # 3</strong>
@@ -273,7 +273,7 @@
       <tr class='tiny_input'>
         <td>
             {{ options_form.force_peak_s3 }}
-            <span class='short_label' title="You can choose to replace the ROI in the data by your own range.
+            <span title="You can choose to replace the ROI in the data by your own range.
 Check the following box if you want to define your own ROI and
 use it for peak selection."><strong>Force peak ROI</strong></span>
             <label class='short_label' for='peak_min_s3'>Pixel<sub>min</sub></label>
@@ -320,7 +320,7 @@
 if you want to use the region on each side of the peak to estimate your background.">
                 <strong>Use side background</strong>
             </span>
-            <label for='bck_width_s3'>Pixels on each side</label> {{ options_form.bck_width_s3 }}
+            <label class='long_label' for='bck_width_s3'>Pixels on each side</label> {{ options_form.bck_width_s3 }}
         </td>
     </tr>