Dislike margins and DOM tree are messed up

[lunaisnotaboy]

Browser

Google Chrome

Browser Version

Version 105.0.5195.127 (Official Build) (64-bit)

Extension or Userscript?

Extension

Extension/Userscript Version

v3.0.0.6

Video link where you see the problem

All of them.

What happened?

The dislike text is displaying like this (missing the margin-right: 6px style):

Instead of this:

The text is also in the wrong position in the DOM; it should be something like:

<button
  class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-button yt-spec-button-shape-next--segmented-end"
  aria-pressed="false"
  aria-label="Dislike this video"
  style="width: auto"
>
  <!-- the styles of this div should be `margin-left: -6px; margin-right: 6px;` like the like button is -->
  <div class="yt-spec-button-shape-next__icon" aria-hidden="true">
    <yt-icon style="width: 24px; height: 24px"
      ><svg
        viewBox="0 0 24 24"
        preserveAspectRatio="xMidYMid meet"
        focusable="false"
        class="style-scope yt-icon"
        style="pointer-events: none; display: block; width: 100%; height: 100%"
      >
        <g class="style-scope yt-icon">
          <path
            d="M17,4h-1H6.57C5.5,4,4.59,4.67,4.38,5.61l-1.34,6C2.77,12.85,3.82,14,5.23,14h4.23l-1.52,4.94C7.62,19.97,8.46,21,9.62,21 c0.58,0,1.14-0.24,1.52-0.65L17,14h4V4H17z M10.4,19.67C10.21,19.88,9.92,20,9.62,20c-0.26,0-0.5-0.11-0.63-0.3 c-0.07-0.1-0.15-0.26-0.09-0.47l1.52-4.94l0.4-1.29H9.46H5.23c-0.41,0-0.8-0.17-1.03-0.46c-0.12-0.15-0.25-0.4-0.18-0.72l1.34-6 C5.46,5.35,5.97,5,6.57,5H16v8.61L10.4,19.67z M20,13h-3V5h3V13z"
            class="style-scope yt-icon"
          ></path>
        </g></svg
      ><!--css-build:shady--></yt-icon
    >
  </div>
  <div class="cbox yt-spec-button-shape-next--button-text-content">
    <span
      class="yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap"
      role="text"
      >879</span
    > <!-- dislike counter goes in this span -->
  </div>
  <yt-touch-feedback-shape style="border-radius: inherit"
    ><div
      class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response"
      aria-hidden="true"
    >
      <div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
      <div class="yt-spec-touch-feedback-shape__fill" style=""></div></div
  ></yt-touch-feedback-shape>
</button>

Instead of what it is now:

<button
  class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-button yt-spec-button-shape-next--segmented-end"
  aria-pressed="false"
  aria-label="Dislike this video"
  style="width: auto"
>
  <div class="yt-spec-button-shape-next__icon" aria-hidden="true">
    <yt-icon style="width: 24px; height: 24px"
      ><svg
        viewBox="0 0 24 24"
        preserveAspectRatio="xMidYMid meet"
        focusable="false"
        class="style-scope yt-icon"
        style="pointer-events: none; display: block; width: 100%; height: 100%"
      >
        <g class="style-scope yt-icon">
          <path
            d="M17,4h-1H6.57C5.5,4,4.59,4.67,4.38,5.61l-1.34,6C2.77,12.85,3.82,14,5.23,14h4.23l-1.52,4.94C7.62,19.97,8.46,21,9.62,21 c0.58,0,1.14-0.24,1.52-0.65L17,14h4V4H17z M10.4,19.67C10.21,19.88,9.92,20,9.62,20c-0.26,0-0.5-0.11-0.63-0.3 c-0.07-0.1-0.15-0.26-0.09-0.47l1.52-4.94l0.4-1.29H9.46H5.23c-0.41,0-0.8-0.17-1.03-0.46c-0.12-0.15-0.25-0.4-0.18-0.72l1.34-6 C5.46,5.35,5.97,5,6.57,5H16v8.61L10.4,19.67z M20,13h-3V5h3V13z"
            class="style-scope yt-icon"
          ></path>
        </g></svg
      ><!--css-build:shady--></yt-icon
    >
  </div>
  <yt-touch-feedback-shape style="border-radius: inherit"
    ><div
      class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response"
      aria-hidden="true"
    >
      <div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
      <div
        class="yt-spec-touch-feedback-shape__fill"
        style=""
      ></div></div></yt-touch-feedback-shape
  ><span id="text">795</span>
</button>

How to reproduce/recreate?

Go to any video and look at the dislike button.

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

Yes

[ErykDarnowski]

Hey, there's also an alternative solution proposed by @Ansh4011 -> here!

[lunaisnotaboy]

@ErykDarnowski while that is a temporary fix, it does not fix the issue of the DOM tree being messed up in the first place.

[ErykDarnowski]

@lunaisnotaboy Sure! I actually haven't looked in this issue myself, just wanted to forward something which was posted in the wrong issue (the one I was working on)!

[lunaisnotaboy]

Ah, okay.