From 81571d5fbfbb50012947477628551fddec000e15 Mon Sep 17 00:00:00 2001
From: Bryan Hilbert <hilbert@stsci.edu>
Date: Thu, 30 May 2024 14:26:55 -0400
Subject: [PATCH 1/2] view_image looks good. view_exposure needs num detector
 dependent width

---
 jwql/website/apps/jwql/static/css/jwql.css          |  5 +++++
 jwql/website/apps/jwql/templates/view_exposure.html | 10 +++++-----
 jwql/website/apps/jwql/templates/view_image.html    |  4 ++--
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/jwql/website/apps/jwql/static/css/jwql.css b/jwql/website/apps/jwql/static/css/jwql.css
index bc8520faf..c11e6c81e 100644
--- a/jwql/website/apps/jwql/static/css/jwql.css
+++ b/jwql/website/apps/jwql/static/css/jwql.css
@@ -365,6 +365,11 @@
       display: inline-block;
   }
 
+  .image_views {
+      margin-left: 2%;
+      margin-right: 2%;
+  }
+
   #loading {
     text-align:center;
     margin: 0 auto;
diff --git a/jwql/website/apps/jwql/templates/view_exposure.html b/jwql/website/apps/jwql/templates/view_exposure.html
index 76dca636b..45e31ddb4 100644
--- a/jwql/website/apps/jwql/templates/view_exposure.html
+++ b/jwql/website/apps/jwql/templates/view_exposure.html
@@ -8,7 +8,7 @@
 
 {% block content %}
 
-    <main role="main" class="container">
+    <main role="main" class="image_views">
     	<!-- Show exposure group name -->
     	<h3>Exposure {{ group_root }}</h3>
 
@@ -119,7 +119,7 @@ <h3>Exposure {{ group_root }}</h3>
                             <a href="{{ base_url }}/{{ inst }}/{{ group_root }}_{{ detector1 }}/">
                                 <img class="image_preview_viewer" id="image_viewer_{{ detector1 }}"
                                      title="Preview image for {{ group_root }}, detector {{ detector1 }}"
-                                     data-detector="{{ detector1 }}" style="width:100%">
+                                     data-detector="{{ detector1 }}" style="width:125%">
                             </a>
                         </span>
                     </div>
@@ -145,7 +145,7 @@ <h3>Exposure {{ group_root }}</h3>
                             <a href="{{ base_url }}/{{ inst }}/{{ group_root }}_{{ detector2 }}/">
                                 <img class="image_preview_viewer" id="image_viewer_{{ detector2 }}"
                                      title="Preview image for {{ group_root }}, detector {{ detector2 }}"
-                                     data-detector="{{ detector2 }}" style="width:100%">
+                                     data-detector="{{ detector2 }}" style="width:125%">
                             </a>
                         </span>
                     </div>
@@ -171,7 +171,7 @@ <h3>Exposure {{ group_root }}</h3>
                             <a href="{{ base_url }}/{{ inst }}/{{ group_root }}_{{ detector3 }}/">
                                 <img class="image_preview_viewer" id="image_viewer_{{ detector3 }}"
                                      title="Preview image for {{ group_root }}, detector {{ detector3 }}"
-                                     data-detector="{{ detector3 }}" style="width:100%">
+                                     data-detector="{{ detector3 }}" style="width:125%">
                             </a>
                         </span>
                     </div>
@@ -197,7 +197,7 @@ <h3>Exposure {{ group_root }}</h3>
                             <a href="{{ base_url }}/{{ inst }}/{{ group_root }}_{{ detector }}/">
                                 <img class="image_preview_viewer" id="image_viewer_{{ detector }}"
                                      title="Preview image for {{ group_root }}, detector {{ detector }}"
-                                     data-detector="{{ detector }}" style="width:100%">
+                                     data-detector="{{ detector }}" style="width:125%">
                             </a>
                         </span>
                     </div>
diff --git a/jwql/website/apps/jwql/templates/view_image.html b/jwql/website/apps/jwql/templates/view_image.html
index 80bc5e58e..e11170018 100644
--- a/jwql/website/apps/jwql/templates/view_image.html
+++ b/jwql/website/apps/jwql/templates/view_image.html
@@ -8,7 +8,7 @@
 
 {% block content %}
 
-    <main role="main" class="container">
+    <main role="main" class="image_views">
     	<!-- Show image group name -->
     	<h3>{{ file_root }}</h3>
 
@@ -85,7 +85,7 @@ <h3>{{ file_root }}</h3>
     		    <span class="image_preview">
     		    	<img class="image_preview_viewer" id="image_viewer"
                          onerror="image_error(this, true);"
-                         title="Preview image for {{ file_root }}">
+                         title="Preview image for {{ file_root }}" width=1000rem height=auto>
     		    </span>
 
                 <div class="int_changer">

From f7b27491cd092031a4885bb58945a5a8586d13fa Mon Sep 17 00:00:00 2001
From: Bryan Hilbert <hilbert@stsci.edu>
Date: Thu, 30 May 2024 17:48:11 -0400
Subject: [PATCH 2/2] After comparing image sizes using new and old style
 preview images, 100pct is about the best you can do

---
 jwql/website/apps/jwql/templates/view_exposure.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/jwql/website/apps/jwql/templates/view_exposure.html b/jwql/website/apps/jwql/templates/view_exposure.html
index 45e31ddb4..1ae5a7e46 100644
--- a/jwql/website/apps/jwql/templates/view_exposure.html
+++ b/jwql/website/apps/jwql/templates/view_exposure.html
@@ -119,7 +119,7 @@ <h3>Exposure {{ group_root }}</h3>
                             <a href="{{ base_url }}/{{ inst }}/{{ group_root }}_{{ detector1 }}/">
                                 <img class="image_preview_viewer" id="image_viewer_{{ detector1 }}"
                                      title="Preview image for {{ group_root }}, detector {{ detector1 }}"
-                                     data-detector="{{ detector1 }}" style="width:125%">
+                                     data-detector="{{ detector1 }}" style="width:100%">
                             </a>
                         </span>
                     </div>
@@ -145,7 +145,7 @@ <h3>Exposure {{ group_root }}</h3>
                             <a href="{{ base_url }}/{{ inst }}/{{ group_root }}_{{ detector2 }}/">
                                 <img class="image_preview_viewer" id="image_viewer_{{ detector2 }}"
                                      title="Preview image for {{ group_root }}, detector {{ detector2 }}"
-                                     data-detector="{{ detector2 }}" style="width:125%">
+                                     data-detector="{{ detector2 }}" style="width:100%">
                             </a>
                         </span>
                     </div>
@@ -171,7 +171,7 @@ <h3>Exposure {{ group_root }}</h3>
                             <a href="{{ base_url }}/{{ inst }}/{{ group_root }}_{{ detector3 }}/">
                                 <img class="image_preview_viewer" id="image_viewer_{{ detector3 }}"
                                      title="Preview image for {{ group_root }}, detector {{ detector3 }}"
-                                     data-detector="{{ detector3 }}" style="width:125%">
+                                     data-detector="{{ detector3 }}" style="width:100%">
                             </a>
                         </span>
                     </div>
@@ -197,7 +197,7 @@ <h3>Exposure {{ group_root }}</h3>
                             <a href="{{ base_url }}/{{ inst }}/{{ group_root }}_{{ detector }}/">
                                 <img class="image_preview_viewer" id="image_viewer_{{ detector }}"
                                      title="Preview image for {{ group_root }}, detector {{ detector }}"
-                                     data-detector="{{ detector }}" style="width:125%">
+                                     data-detector="{{ detector }}" style="width:100%">
                             </a>
                         </span>
                     </div>