Fix like/dislike ratio bar offset

Closes [#733](https://github.com/Anarios/return-youtube-dislike/issues/733)

2 files changed, 23 insertions, 14 deletions

diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js
index 930f0f5..4411703 100644
--- a/Extensions/combined/src/bar.js
+++ b/Extensions/combined/src/bar.js
@@ -1,9 +1,10 @@
-import { getButtons, getDislikeButton, getLikeButton } from './buttons';
+import { getButtons, getDislikeButton, getLikeButton } from "./buttons";
 import {
   extConfig,
   isMobile,
   isLikesDisabled,
   isNewDesign,
+  isRoundedDesign,
   isShorts,
 } from "./state";
 import { cLog, getColorFromTheme } from "./utils";
@@ -15,7 +16,7 @@ function createRateBar(likes, dislikes) {
     const widthPx =
       getLikeButton().clientWidth +
       getDislikeButton().clientWidth +
-      8;
+      (isRoundedDesign() ? 0 : 8);
 
     const widthPercent =
       likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
@@ -80,15 +81,22 @@ function createRateBar(likes, dislikes) {
                 <!--css-build:shady-->${tooltipInnerHTML}
               </tp-yt-paper-tooltip>
               </div>
-      `
+      		`
         );
 
-        // Add border between info and comments
         if (isNewDesign()) {
+          // Add border between info and comments
           let descriptionAndActionsElement = document.getElementById("top-row");
           descriptionAndActionsElement.style.borderBottom =
             "1px solid var(--yt-spec-10-percent-layer)";
           descriptionAndActionsElement.style.paddingBottom = "10px";
+
+          // Fix bar offset in new UI
+          document.getElementById("actions-inner").style.width = "revert";
+          if (isRoundedDesign()) {
+            document.getElementById("actions").style.flexDirection =
+              "row-reverse";
+          }
         }
       } else {
         document.getElementById("ryd-bar-container").style.width =
diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js
index 0876e10..42dde2b 100644
--- a/Extensions/combined/src/state.js
+++ b/Extensions/combined/src/state.js
@@ -51,6 +51,10 @@ function isNewDesign() {
   return document.getElementById("comment-teaser") !== null;
 }
 
+function isRoundedDesign() {
+  return document.getElementById("segmented-like-button") !== null;
+}
+
 let mutationObserver = new Object();
 
 if (isShorts() && mutationObserver.exists !== true) {
@@ -96,9 +100,7 @@ function isLikesDisabled() {
       getButtons().children[0].querySelector(".button-renderer-text").innerText
     );
   }
-  return /^\D*$/.test(
-    getButtons().children[0].innerText
-  );
+  return /^\D*$/.test(getButtons().children[0].innerText);
 }
 
 function isVideoLiked() {
@@ -137,7 +139,7 @@ function setLikes(likesCount) {
 }
 
 function setDislikes(dislikesCount) {
-  getDislikeTextContainer()?.removeAttribute('is-empty');
+  getDislikeTextContainer()?.removeAttribute("is-empty");
   if (!isLikesDisabled()) {
     if (isMobile()) {
       getButtons().children[1].querySelector(
@@ -166,15 +168,13 @@ function getLikeCountFromButton() {
       return false;
     }
     let likesStr = getLikeButton()
-    .querySelector("yt-formatted-string#text")
-    .getAttribute("aria-label")
-    .replace(/\D/g, "");
+      .querySelector("yt-formatted-string#text")
+      .getAttribute("aria-label")
+      .replace(/\D/g, "");
     return likesStr.length > 0 ? parseInt(likesStr) : false;
-  }
-  catch {
+  } catch {
     return false;
   }
-
 }
 
 function processResponse(response, storedData) {
@@ -362,6 +362,7 @@ export {
   isVideoDisliked,
   isVideoLiked,
   isNewDesign,
+  isRoundedDesign,
   getState,
   setState,
   setInitialState,