From 850822db80517254d6a6f1c7ffc27b486f4c2ba3 Mon Sep 17 00:00:00 2001
From: Send_Nukez <erikjulius2701@yahoo.de>
Date: Thu, 28 Oct 2021 18:36:27 +0200
Subject: [PATCH] Fix update message stacking

---
 CHANGELOG.md         |  2 ++
 src/js/main.js       | 17 +++++++++++------
 src/styles/main.scss | 12 ++++++++++++
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e69de29..19a058f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,2 @@
+Fixed:
+- Update message stacking
\ No newline at end of file
diff --git a/src/js/main.js b/src/js/main.js
index 1f4747f..87f389e 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -651,18 +651,23 @@ waitForElement([".main-userWidget-box"], ([userWidget]) => {
                 return response.json();
             })
             .then((data) => {
-                const upd = document.createElement("div");
-                upd.classList.add("ellipsis-one-line", "main-type-finale");
-                upd.setAttribute("title", `Changes: ${data.name}`);
-                upd.style.setProperty("color", "var(--spice-button-active)");
+                let upd;
+                if (!document.getElementById("dribbblish-update")) {
+                    upd = document.createElement("div");
+                    upd.id = "dribbblish-update";
+                    //upd.setAttribute("title", `Changes: ${data.name}`);
+                    userWidget.append(upd);
+                    userWidget.classList.add("update-avail");
+                } else {
+                    upd = document.getElementById("dribbblish-update");
+                }
+
                 if (process.env.DRIBBBLISH_VERSION == "Dev") {
                     upd.innerText = "Dev version!";
                 } else if (data.tag_name > process.env.DRIBBBLISH_VERSION) {
                     upd.innerText = `Theme UPD v${data.tag_name} avail.`;
                     new Spicetify.Menu.Item("Update Dribbblish", false, () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/releases/latest", "_blank")).register();
                 }
-                userWidget.append(upd);
-                userWidget.classList.add("update-avail");
             })
             .catch((err) => {
                 // Do something for an error here
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 8204044..e127342 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -812,6 +812,18 @@ li.GlueDropTarget {
     pointer-events: none;
 }
 
+#dribbblish-update {
+    color: var(--spice-button-active);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 11px;
+    font-weight: 400;
+    letter-spacing: normal;
+    line-height: 16px;
+    text-transform: none;
+}
+
 /** Rearrange player bar */
 .main-nowPlayingBar-left {
     order: 1;