From bf083afc2e7e083f64e4ae46a3b2938ef3bd9ed9 Mon Sep 17 00:00:00 2001
From: Antal Orcsik <antal.orcsik@bitrise.io>
Date: Tue, 13 Feb 2024 14:03:24 +0100
Subject: [PATCH] fix ui glitches

---
 src/css/changelog.css             |  4 ++++
 src/js/changelog/ChangelogList.js | 10 +++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/css/changelog.css b/src/css/changelog.css
index 9ac1932..c3547a6 100644
--- a/src/css/changelog.css
+++ b/src/css/changelog.css
@@ -11,6 +11,10 @@
   display: none;
 }
 
+.changelog-topic-content img {
+  height: auto;
+}
+
 .changelog-topic-content h1 {
   font-size: 2rem;
   margin-bottom: 1rem;
diff --git a/src/js/changelog/ChangelogList.js b/src/js/changelog/ChangelogList.js
index cfd11d1..d54e783 100644
--- a/src/js/changelog/ChangelogList.js
+++ b/src/js/changelog/ChangelogList.js
@@ -24,7 +24,10 @@ class ChangelogList
     this.timestampListItemTemplate.id = "";
     this.timestampListItemTemplate.remove();
 
+    this.list.innerHTML = "";
+    this.list.append(this.renderLoadingTimestampListItem());
     this.list.append(this.renderLoadingListItem());
+    this.list.append(this.renderLoadingTimestampListItem());
     this.list.append(this.renderLoadingListItem());
     this.list.append(this.renderLoadingListItem());
   }
@@ -33,10 +36,15 @@ class ChangelogList
     const listItem = this.readListItemTemplate.cloneNode(true);
     listItem.querySelector(".changelog-timestamp").innerHTML = "<span class='changelog-loading'>Loading</span>";
     listItem.querySelector(".changelog-title").innerHTML = "<span class='changelog-loading'>Loading</span>";
-    listItem.querySelectorAll(".display-inline .display-inline").forEach(elem => elem.remove());
     return listItem;
   }
 
+  renderLoadingTimestampListItem() {
+    const timestampListItem = this.readListItemTemplate.cloneNode(true);
+    timestampListItem.innerHTML = "<span class='changelog-loading'>Loading</span>";
+    return timestampListItem;
+  }
+
 
   /**
    * @param {ChangelogTopic} topic