From 079e503c68deb25c61208e136ffe54e922830021 Mon Sep 17 00:00:00 2001
From: James Collier <james.collier@vib.be>
Date: Wed, 10 Sep 2025 17:02:07 +0200
Subject: [PATCH 1/2] Make the summary previews "sticky" when scrolling.

---
 server/static/styles.css         | 5 ++++-
 server/templates/_base.html      | 1 +
 server/templates/atoms-view.html | 1 -
 server/templates/empty.html      | 1 -
 server/templates/gauge.html      | 1 -
 server/templates/index.html      | 1 -
 server/templates/list.html       | 2 --
 server/templates/results.html    | 1 -
 server/templates/table.html      | 2 --
 9 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/server/static/styles.css b/server/static/styles.css
index 6963f03a..f9696ac2 100644
--- a/server/static/styles.css
+++ b/server/static/styles.css
@@ -133,6 +133,9 @@ span.marked {
     margin-bottom: 2rem;
     padding-left: 3rem;
     padding-right: 3rem;
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
 }
 
 .ttfd-bottom-nav {
@@ -153,7 +156,7 @@ span.marked {
     gap: 5px;
     position: absolute;
     left: 20px;
-    top: 170px;
+    top: 20px;
 }
 
 .ttfd-button {
diff --git a/server/templates/_base.html b/server/templates/_base.html
index 621e059e..1236f78e 100644
--- a/server/templates/_base.html
+++ b/server/templates/_base.html
@@ -82,6 +82,7 @@
       {% if ttfd.maintenance_mode %}
       <div class="ttfd-warning" role="alert">The application is in maintenance mode.</div>
       {% else %}
+      {% include "_summary.html" %}
       <div class="ttfd-main-app" id="ttfd-main-app">
         {% block main required %}
         {% endblock %}
diff --git a/server/templates/atoms-view.html b/server/templates/atoms-view.html
index b513f268..c7c7dabf 100644
--- a/server/templates/atoms-view.html
+++ b/server/templates/atoms-view.html
@@ -1,5 +1,4 @@
 {% from "_stepper.html" import stepper %}
-{% include '_summary.html' %}
 {{ stepper(current=step.current, history=step.history) }}
 <div class="flex-center ttfd-metabolite-container">
   {{ image | safe }}
diff --git a/server/templates/empty.html b/server/templates/empty.html
index b85d95a0..a8013227 100644
--- a/server/templates/empty.html
+++ b/server/templates/empty.html
@@ -2,7 +2,6 @@
 {% extends "_base.html" %}
 {% set step = step %}
 {% block main %}
-{% include '_summary.html' %}
 {{ stepper(current=step.current, history=step.history) }}
 
 <p>{{ message }}</p>
diff --git a/server/templates/gauge.html b/server/templates/gauge.html
index 901a2600..e551831e 100644
--- a/server/templates/gauge.html
+++ b/server/templates/gauge.html
@@ -1,7 +1,6 @@
 {% from "_stepper.html" import stepper %}
 {% extends "_base.html" %}
 {% block main %}
-{% include '_summary.html' %}
 {{ stepper(current=step.current, history=step.history) }}
 <ul class="ttfd-grid">
 {% for gauge in gauges %}
diff --git a/server/templates/index.html b/server/templates/index.html
index 025d4437..4ad1e0dd 100644
--- a/server/templates/index.html
+++ b/server/templates/index.html
@@ -1,7 +1,6 @@
 {% from "_stepper.html" import stepper %}
 {% extends "_base.html" %}
 {% block main %}
-{% include '_summary.html' %}
 {{ stepper(current=step.current, history=step.history) }}
 <ul class="ttfd-grid">
 {% for tracer in tracers %}
diff --git a/server/templates/list.html b/server/templates/list.html
index 95f55809..87d9baea 100644
--- a/server/templates/list.html
+++ b/server/templates/list.html
@@ -3,8 +3,6 @@
 {% set step = step %}
 {% block main %}
 
-{% include '_summary.html' %}
-
 {{ stepper(current=step.current, history=step.history) }}
 
 <div class="ttfd-list">
diff --git a/server/templates/results.html b/server/templates/results.html
index a0c37f5f..5bb32005 100644
--- a/server/templates/results.html
+++ b/server/templates/results.html
@@ -1,7 +1,6 @@
 {% from "_stepper.html" import stepper %}
 {% extends "_base.html" %}
 {% block main %}
-{% include "_summary.html" %}
 {{ stepper(current=step.current, history=step.history) }}
 
 <div class="ttfd-results-container">
diff --git a/server/templates/table.html b/server/templates/table.html
index 2a531ad3..c16e4474 100644
--- a/server/templates/table.html
+++ b/server/templates/table.html
@@ -25,7 +25,5 @@
   {% endfor %}
 </div>
 
-{% include '_summary.html' %}
-
 {% include '_bottom_nav_buttons.html' %}
 {% endblock %}

From 7ebe1e0431b2821cff12a70516cb87b081708557 Mon Sep 17 00:00:00 2001
From: James Collier <james.collier@vib.be>
Date: Wed, 10 Sep 2025 17:06:41 +0200
Subject: [PATCH 2/2] Correct margin between the summary and the edges of the
 page.

---
 server/static/styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/static/styles.css b/server/static/styles.css
index f9696ac2..0adb0416 100644
--- a/server/static/styles.css
+++ b/server/static/styles.css
@@ -155,8 +155,8 @@ span.marked {
     align-items: center;
     gap: 5px;
     position: absolute;
-    left: 20px;
-    top: 20px;
+    left: 0;
+    top: 1rem;
 }
 
 .ttfd-button {