Offset Like/Dislike ratio bar with updated youtube UI

[chloe-burbank]

Browser

Firefox

Browser Version

Firefox 103.0.2

Extension or Userscript?

Extension

Extension/Userscript Version

Version v3.0.0.5

Video link where you see the problem

https://www.youtube.com/watch?v=SrcupdKGvBs

What happened?

Like/dislike ratio bar is offset to the left of the like/dislike buttons instead of right below them

How to reproduce/recreate?

1. Go to youtube.com
2. Click on any video

Will you be available for follow-up questions to help developers diagnose & fix the issue?

Yes

[taikonaut001]

[cjfaquino]

Got the same results with Chrome and Edge. It seems like you have to be logged in to see the new UI too, otherwise it functions like normal.

[sreejith-aj]

I have the same issue on both Firefox and Brave. But like @cjfaquino said, if I'm logged out of Youtube, the alignment works just fine.

[ErykDarnowski]

Hey, I've actually only managed to reproduce this issue on Firefox, and funnily enough, in my case it happened the other way around (meaning, when I was logged out instead of logged in).

Anyway, I've found out that it's caused by the #actions-inner element stretching:

https://user-images.githubusercontent.com/81530705/194659895-dfdc386d-e0f4-45c1-8904-7acd6dd76d35.mp4

This can be fixed by removing the ytd-watch-metadata from its classList:

document.getElementById('actions-inner').classList.remove('ytd-watch-metadata');

---

I'll probably work on implementing this fix tomorrow.

[ErykDarnowski]

Ok, after further testing (which also included the new rounded UI) I've improved my solution to something along the lines of this:

if (isNewDesign()) {
  document.getElementById("actions-inner").style.width = "revert";
					
  // Checking if it's the new (rounded) UI
  if (!!document.getElementById("segmented-like-button")) {						 
    document.getElementById("actions").style.flexDirection = "row-reverse";
  }
}

[ariskoutris]

Still not fixed for me.. Do we have any news?

[ErykDarnowski]

I've opened up a PR with a fix for this issue: here