From 9f4ab579586589730e1ddca6bf2289dc26344ef6 Mon Sep 17 00:00:00 2001
From: Frank Niessink <frank@niessink.com>
Date: Tue, 9 Jul 2024 13:40:49 +0200
Subject: [PATCH] Give measurement entity tables sticky headers.

Give measurement entity tables sticky headers, like the metric tables already have.

Closes #8879.
---
 .../frontend/src/header_footer/Menubar.css    |  2 +-
 .../frontend/src/source/SourceEntities.css    |  7 +++++++
 .../frontend/src/source/SourceEntities.js     |  4 +++-
 components/frontend/src/subject/Subject.css   |  2 +-
 .../frontend/src/subject/SubjectTable.css     | 12 ++---------
 .../frontend/src/subject/SubjectTable.js      |  3 +--
 .../frontend/src/subject/SubjectTitle.js      | 21 ++++++++++---------
 docs/src/changelog.md                         | 10 +++++++++
 8 files changed, 36 insertions(+), 25 deletions(-)
 create mode 100644 components/frontend/src/source/SourceEntities.css

diff --git a/components/frontend/src/header_footer/Menubar.css b/components/frontend/src/header_footer/Menubar.css
index ae1daf0abf..18f8aec0ff 100644
--- a/components/frontend/src/header_footer/Menubar.css
+++ b/components/frontend/src/header_footer/Menubar.css
@@ -22,5 +22,5 @@
     position: fixed;
     top: 64px;
     width: 100%;
-    z-index: 2;
+    z-index: 4;
 }
diff --git a/components/frontend/src/source/SourceEntities.css b/components/frontend/src/source/SourceEntities.css
new file mode 100644
index 0000000000..18efe1a647
--- /dev/null
+++ b/components/frontend/src/source/SourceEntities.css
@@ -0,0 +1,7 @@
+.ui.sortable.table.entities.stickyHeader > thead {
+    /* Make thead sticky by positioning the th's */
+    position: sticky;
+    /* Leave room for the menu bar, the subject title, and the subject table header row */
+    top: 187px;
+    z-index: 1;
+}
diff --git a/components/frontend/src/source/SourceEntities.js b/components/frontend/src/source/SourceEntities.js
index b5bc2f094b..ffa35e1642 100644
--- a/components/frontend/src/source/SourceEntities.js
+++ b/components/frontend/src/source/SourceEntities.js
@@ -1,3 +1,5 @@
+import "./SourceEntities.css"
+
 import { func, string } from "prop-types"
 import { useContext, useState } from "react"
 
@@ -181,7 +183,7 @@ export function SourceEntities({ metric, metric_uuid, reload, report, source })
         />
     ))
     return (
-        <Table sortable size="small">
+        <Table className="entities stickyHeader" sortable size="small">
             <Table.Header>{headers}</Table.Header>
             <Table.Body>{rows}</Table.Body>
         </Table>
diff --git a/components/frontend/src/subject/Subject.css b/components/frontend/src/subject/Subject.css
index 1bc885e783..1957375822 100644
--- a/components/frontend/src/subject/Subject.css
+++ b/components/frontend/src/subject/Subject.css
@@ -1,5 +1,5 @@
 div.sticky {
     position: sticky; /* Make the div sticky */
     top: 15px; /* The menu bar is about 60px high, move the top margin under it */
-    z-index: 2;
+    z-index: 3;
 }
diff --git a/components/frontend/src/subject/SubjectTable.css b/components/frontend/src/subject/SubjectTable.css
index 7bbc0aa2fb..925a569965 100644
--- a/components/frontend/src/subject/SubjectTable.css
+++ b/components/frontend/src/subject/SubjectTable.css
@@ -2,16 +2,8 @@
     /* Make thead sticky by positioning the th's */
     position: sticky;
     /* Leave room for the menu bar and the subject title */
-    top: 129px;
-    z-index: 1;
-}
-
-.ui.sortable.table.stickyHeader.subjectHasSubTitle > thead {
-    /* Make thead sticky by positioning the th's */
-    position: sticky;
-    /* Leave room for the menu bar, the subject title, and the subtitle */
-    top: 142px;
-    z-index: 1;
+    top: 143px;
+    z-index: 2;
 }
 
 .ui.sortable.table.stickyHeader > thead > tr > th {
diff --git a/components/frontend/src/subject/SubjectTable.js b/components/frontend/src/subject/SubjectTable.js
index ee77e3cdb6..48457c3402 100644
--- a/components/frontend/src/subject/SubjectTable.js
+++ b/components/frontend/src/subject/SubjectTable.js
@@ -30,11 +30,10 @@ export function SubjectTable({
     subject,
     subject_uuid,
 }) {
-    const className = "stickyHeader" + (subject.subtitle ? " subjectHasSubTitle" : "")
     // Sort measurements in reverse order so that if there multiple measurements on a day, we find the most recent one:
     const reversedMeasurements = measurements.slice().sort((m1, m2) => (m1.start < m2.start ? 1 : -1))
     return (
-        <Table sortable className={className} style={{ marginTop: "0px" }}>
+        <Table sortable className="stickyHeader" style={{ marginTop: "0px" }}>
             <SubjectTableHeader columnDates={dates} handleSort={handleSort} settings={settings} />
             <SubjectTableBody
                 changed_fields={changed_fields}
diff --git a/components/frontend/src/subject/SubjectTitle.js b/components/frontend/src/subject/SubjectTitle.js
index 8f91619829..67a0c14943 100644
--- a/components/frontend/src/subject/SubjectTitle.js
+++ b/components/frontend/src/subject/SubjectTitle.js
@@ -100,7 +100,10 @@ export function SubjectTitle({
             item_uuid={`${subject_uuid}:${tabIndex}`}
             level="h2"
             settings={settings}
-            style={{ marginTop: 50 }}
+            style={{
+                marginTop: 50 /* Whitespace between dashboard or previous subject and this subject */,
+                height: 50 /* Ensure that the header takes the same amount of vertical space with or without subtitle */,
+            }}
             subheader={subject.subtitle}
         >
             <SubjectHeader subjectType={subjectType} />
@@ -109,15 +112,13 @@ export function SubjectTitle({
                 onTabChange={tabChangeHandler(settings.expandedItems, subject_uuid)}
                 panes={panes}
             />
-            <div style={{ marginTop: "20px" }}>
-                <ButtonRow
-                    subject_uuid={subject_uuid}
-                    firstSubject={firstSubject}
-                    lastSubject={lastSubject}
-                    reload={reload}
-                    url={subjectUrl}
-                />
-            </div>
+            <ButtonRow
+                subject_uuid={subject_uuid}
+                firstSubject={firstSubject}
+                lastSubject={lastSubject}
+                reload={reload}
+                url={subjectUrl}
+            />
         </HeaderWithDetails>
     )
 }
diff --git a/docs/src/changelog.md b/docs/src/changelog.md
index e6581caee1..d485b9ef70 100644
--- a/docs/src/changelog.md
+++ b/docs/src/changelog.md
@@ -8,6 +8,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 <!-- The line "## <square-bracket>Unreleased</square-bracket>" is replaced by the release/release.py script with the new release version and release date. -->
 
+## [Unreleased]
+
+### Deployment notes
+
+If your currently installed *Quality-time* version is not v5.14.0, please first check the upgrade path in the [versioning policy](versioning.md).
+
+### Added
+
+- Give measurement entity tables sticky headers, like the metric tables already have. Closes [#8879](https://github.com/ICTU/quality-time/issues/8879).
+
 ## v5.14.0 - 2024-07-05
 
 ### Deployment notes