From c00b9c83f0a92a4abd14a77aaa07080e5f73bacb Mon Sep 17 00:00:00 2001
From: Benoit Marty <benoit@matrix.org>
Date: Mon, 11 Mar 2024 07:30:28 +0100
Subject: [PATCH] Add id to the table rows.

---
 screenshots/html/screenshots.css |  9 +++++++--
 screenshots/html/script.js       | 15 +++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/screenshots/html/screenshots.css b/screenshots/html/screenshots.css
index 5b9fb085f7..9b36b34ece 100644
--- a/screenshots/html/screenshots.css
+++ b/screenshots/html/screenshots.css
@@ -84,8 +84,13 @@ input {
 }
 
 #screenshots_container {
-    margin-top: 80px;
-    margin-bottom: 56px;
+    overflow: scroll;
+    position: absolute;
+    top: 64px;
+    bottom: 40px;
+    width: 100%;
+    padding-top: 16px;
+    padding-bottom: 16px;
 }
 
 .screenshot {
diff --git a/screenshots/html/script.js b/screenshots/html/script.js
index b809452c23..763d4b1abf 100644
--- a/screenshots/html/script.js
+++ b/screenshots/html/script.js
@@ -192,9 +192,15 @@ function addTable() {
   const numVisibleLanguages = languagesHeaderRow.childElementCount
   // Next items are the data
   var currentHeaderValue = "";
+  var screenshotCounter = 0;
   for (let screenshotIndex = 1; screenshotIndex < screenshots.length; screenshotIndex++) {
     let englishFile = screenshots[screenshotIndex][0];
+    let niceName = getNiceName(englishFile);
+    if (niceName != currentHeaderValue) {
+        screenshotCounter = 0;
+    }
     const tr = document.createElement('tr');
+    tr.id = niceName + screenshotCounter;
     let hasTranslatedFiles = false;
     for (let languageIndex = 0; languageIndex < dataLanguages.length; languageIndex++) {
       if (visibleLanguages[languageIndex] == 0) {
@@ -228,20 +234,21 @@ function addTable() {
     }
     if (showAllScreenshots || hasTranslatedFiles) {
       // Add a header for row, if different from previous
-      let name = getNiceName(englishFile);
-      if (name != currentHeaderValue) {
-        currentHeaderValue = name;
+      if (niceName != currentHeaderValue) {
+        currentHeaderValue = niceName;
         const trHead = document.createElement('tr');
+        trHead.id = niceName;
         const tdHead = document.createElement('td');
         tdHead.colSpan = numVisibleLanguages;
         tdHead.className = "view-header";
-        tdHead.textContent = name;
+        tdHead.textContent = niceName;
         trHead.appendChild(tdHead);
         tbody.appendChild(trHead);
         tbody.appendChild(languagesHeaderRow.cloneNode(true));
       }
       tbody.appendChild(tr);
     }
+    screenshotCounter++;
   }
   table.appendChild(thead);
   table.appendChild(tbody);