From b4a145afb5ca8a842501f1c4ded8b57bb0c83b5b Mon Sep 17 00:00:00 2001
From: Maciej Olko <maciej.olko@gmail.com>
Date: Sat, 18 Jan 2025 18:47:56 +0100
Subject: [PATCH 1/5] Display progress out of progress bar when low

---
 style.css           | 7 ++++++-
 template.html.jinja | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/style.css b/style.css
index de929f2a0..28198b66d 100644
--- a/style.css
+++ b/style.css
@@ -15,6 +15,7 @@ th {
   background-color: #f4f4f4;
 }
 .progress-bar {
+  display: inline-block;
   background-color: #4caf50;
   color: white;
   height: 20px;
@@ -22,9 +23,13 @@ th {
   text-align: center;
   overflow: hidden;
   white-space: nowrap;
-  min-width: 50px;
   box-sizing: border-box;
 }
+.progress-bar.appendix {
+  background-color: inherit;
+  color: inherit;
+  padding-left: .5em;
+}
 td[data-label="visitors"], td[data-label="translators"] {
   text-align: right;
 }
diff --git a/template.html.jinja b/template.html.jinja
index f88fe363f..ab2eefbda 100644
--- a/template.html.jinja
+++ b/template.html.jinja
@@ -47,7 +47,8 @@
     {% if translators_link %}</a>{% endif %}
   </td>
   <td data-label="completion">
-    <div class="progress-bar" style="width: {{ completion | round(2) }}%;">{{ completion | round(2) }}%</div>
+    <div class="progress-bar" style="width: {{ completion | round(2) }}%;">{% if completion >= 0.05 %}{{ completion | round(2) }}{% endif %}%</div>
+    {% if completion < 0.05 %}<div class="progress-bar appendix">{{ completion | round(2) }}</div>{% endif %}
   </td>
 </tr>
 {% endfor %}

From 30687f614bae0760ad48af5e30ebb28e65d8a12e Mon Sep 17 00:00:00 2001
From: Maciej Olko <maciej.olko@gmail.com>
Date: Sat, 18 Jan 2025 18:56:02 +0100
Subject: [PATCH 2/5] Fix percent sign

---
 template.html.jinja | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/template.html.jinja b/template.html.jinja
index ab2eefbda..accd9490d 100644
--- a/template.html.jinja
+++ b/template.html.jinja
@@ -47,8 +47,8 @@
     {% if translators_link %}</a>{% endif %}
   </td>
   <td data-label="completion">
-    <div class="progress-bar" style="width: {{ completion | round(2) }}%;">{% if completion >= 0.05 %}{{ completion | round(2) }}{% endif %}%</div>
-    {% if completion < 0.05 %}<div class="progress-bar appendix">{{ completion | round(2) }}</div>{% endif %}
+    <div class="progress-bar" style="width: {{ completion | round(2) }}%;">{% if completion >= 0.05 %}{{ completion | round(2) }}%{% endif %}</div>
+    {% if completion < 0.05 %}<div class="progress-bar appendix">{{ completion | round(2) }}%</div>{% endif %}
   </td>
 </tr>
 {% endfor %}

From 92b5e8f8a116e801fb412cc56bea92c1e30f7702 Mon Sep 17 00:00:00 2001
From: Maciej Olko <maciej.olko@gmail.com>
Date: Sat, 18 Jan 2025 18:58:26 +0100
Subject: [PATCH 3/5] Fix treshold

---
 template.html.jinja | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/template.html.jinja b/template.html.jinja
index accd9490d..4e84e05ca 100644
--- a/template.html.jinja
+++ b/template.html.jinja
@@ -47,8 +47,8 @@
     {% if translators_link %}</a>{% endif %}
   </td>
   <td data-label="completion">
-    <div class="progress-bar" style="width: {{ completion | round(2) }}%;">{% if completion >= 0.05 %}{{ completion | round(2) }}%{% endif %}</div>
-    {% if completion < 0.05 %}<div class="progress-bar appendix">{{ completion | round(2) }}%</div>{% endif %}
+    <div class="progress-bar" style="width: {{ completion | round(2) }}%;">{% if completion >= 5 %}{{ completion | round(2) }}%{% endif %}</div>
+    {% if completion < 5 %}<div class="progress-bar appendix">{{ completion | round(2) }}%</div>{% endif %}
   </td>
 </tr>
 {% endfor %}

From ed4f749f63c2a68eb360c9107faae0a8df0e2ef4 Mon Sep 17 00:00:00 2001
From: Maciej Olko <maciej.olko@gmail.com>
Date: Sun, 19 Jan 2025 23:32:24 +0100
Subject: [PATCH 4/5] Add script, add progress-bar-outer-label class

---
 style.css           | 16 +++++++++++++---
 template.html.jinja |  4 ++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/style.css b/style.css
index 28198b66d..3a67a64ad 100644
--- a/style.css
+++ b/style.css
@@ -25,16 +25,26 @@ th {
   white-space: nowrap;
   box-sizing: border-box;
 }
-.progress-bar.appendix {
-  background-color: inherit;
-  color: inherit;
+.progress-bar-outer-label {
+  display: none;
   padding-left: .5em;
+  height: 20px;
+  line-height: 20px;
+  overflow: hidden;
+}
+.progress-bar.low {
+  color: transparent;
+  user-select: none;
+}
+.progress-bar.low + .progress-bar-outer-label {
+  display: inline-block;
 }
 td[data-label="visitors"], td[data-label="translators"] {
   text-align: right;
 }
 td[data-label="completion"] {
   width: 100%;
+  line-height: 0;
 }
 @media screen and (max-width: 600px) {
   table, thead, tbody, th, td, tr {
diff --git a/template.html.jinja b/template.html.jinja
index 4e84e05ca..230a5f74f 100644
--- a/template.html.jinja
+++ b/template.html.jinja
@@ -47,8 +47,8 @@
     {% if translators_link %}</a>{% endif %}
   </td>
   <td data-label="completion">
-    <div class="progress-bar" style="width: {{ completion | round(2) }}%;">{% if completion >= 5 %}{{ completion | round(2) }}%{% endif %}</div>
-    {% if completion < 5 %}<div class="progress-bar appendix">{{ completion | round(2) }}%</div>{% endif %}
+    <div class="progress-bar" style="width: {{ completion }}%;">{{ completion | round(2) }}%</div>
+    <div class="progress-bar-outer-label">{{ completion | round(2) }}%</div>
   </td>
 </tr>
 {% endfor %}

From 5e7971504a372d90b3f4925748e5021acba8e4e3 Mon Sep 17 00:00:00 2001
From: Maciej Olko <maciej.olko@gmail.com>
Date: Mon, 20 Jan 2025 06:31:13 +0100
Subject: [PATCH 5/5] Add the script

---
 template.html.jinja | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/template.html.jinja b/template.html.jinja
index 230a5f74f..bf951b161 100644
--- a/template.html.jinja
+++ b/template.html.jinja
@@ -56,4 +56,22 @@
 </table>
 <p>Last updated at {{ generation_time.strftime('%A, %d %B %Y, %X %Z') }}.</p>
 </body>
+<script>
+  function updateProgressBarVisibility() {
+    document.querySelectorAll('.progress-bar').forEach(progressBar => {
+      const textWidth = progressBar.scrollWidth;
+      const barWidth = progressBar.offsetWidth;
+
+      if (barWidth < textWidth) {
+        progressBar.classList.add('low');
+      } else {
+        progressBar.classList.remove('low');
+      }
+    });
+  }
+
+  updateProgressBarVisibility();
+
+  window.addEventListener('resize', updateProgressBarVisibility);
+</script>
 </html>