Google Search experiments with a new UI, which minimally breaks the styling

[tadwohlrapp]

One of my Google accounts seems to have been selected for A/B testing Google's new serp UI.

Besides introducing hideous gray bars to search results it also breaks uBlacklist's styling a bit. See screenshots.

Expected Behavior

Old UI: "Block this site" is nicely centered vertically.

Actual Behavior

New UI: "Block this site" sits at the search result title's bottom. Also gets cut off by website's og:image thumbnail.

Steps to Reproduce the Problem

1. Have bad luck and get chosen for an A/B test I guess

Specifications

• Browsers:
  • Brave Version 1.70.123 Chromium: 129.0.6668.89 (Official Build) (arm64)
  • Google Chrome Version 129.0.6668.90 (Official Build) (arm64)
• Other extensions/add-ons: none

• Search engine: Google.com
• Language: English
• Region: Germany

[tadwohlrapp]

Alright, so I dug in and compared the old and new markup.
Unfortunately this time there is no simple new attribute on the body tag (which would make reproducing the issue a bit easier), but rather some changed and new CSS as well as tiny changes in the search result title's HTML markup.

Here's how to reproduce it:

1. Visit google.com and add the following CSS (I'm using the Stylebot extension):
This includes all changes to the existing classes

.new-shitty-ui {
  .DKV0Md {
    padding-top: 4px;
  }

  .DKV0Md,
  .Z3xoIb {
    margin-top: 20px;
  }

  .ojE3Fb .q0vns {
    background-color: #f4f6f7;
    border-radius: 100px;
    display: inline-flex;
    padding: 4px 16px 4px 4px;
    max-width: 520px;
    overflow: hidden;
    align-items: center;
  }

  .GvPZzd {
    font-size: 12px;
    line-height: 18px;
    font-family: Google Sans, sans-serif;
  }

  .iG7WGe {
    color: var(--IXoxUe);
    font-family: Google Sans, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .VuuXrf {
    color: #202124;
    font-size: 14px;
    max-width: 370px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 20px;
    white-space: nowrap;
    font-family: Google Sans, sans-serif;
    font-weight: 500;
  }

  .CA5RN {
    display: inline-flex;
    flex-direction: row;
    overflow: hidden;
  }

  .DDKf1c {
    margin-right: 8px;
  }

  .csDOgf .MJ8UF {
    padding-left: 0;
    top: -10px;
  }
}

Diff screenshot of Google's old and new CSS

2. Search for ublacklist > find the search result for the play store listing > open DevTools, find this search result's title div <div class="yuRUbf"> > Edit as HTML:

3. Replace it completely with the following HTML:

<div class="new-shitty-ui yuRUbf">
  <div><span jscontroller="msmzHf" jsaction="rcuQ6b:npT2md;PYDNKe:bLV6Bd;mLt3mc"><a jsname="UWckNb"
        href="https://chromewebstore.google.com/detail/ublacklist/pncfbmialoiaghdehhbnbhkkgmjanfhe?hl=en"
        ping="/url?sa=t&amp;source=web&amp;rct=j&amp;opi=89978449&amp;url=https://chromewebstore.google.com/detail/ublacklist/pncfbmialoiaghdehhbnbhkkgmjanfhe%3Fhl%3Den"><br>
        <h3 class="LC20lb MBeuO DKV0Md">uBlacklist - Chrome Web Store</h3>
        <div class="notranslate HGLrXd NJjxre iUh30 ojE3Fb">
          <div class="q0vns"><span class="DDKf1c">
              <div class="eqA2re UnOTSe Vwoesf" aria-hidden="true"><img class="XNo5Ab"
                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAe1BMVEWwvLDZ2dnj4+PY2Njk5OTk4+Pl395HcEzm5ubv7+/o6Onm5ubn5+fl5eXn5ubx8vLdSz/aPjP/zkRHiPQPoV7r7e3dTkE9hPT/zTX4uU/hm5bgf3jz1MPbbWRrnPTQ0Mf61YtLjFCYuve91PmJsfebc00qo2S4Wzxvu5LoXaG4AAAADXRSTlMFNoMyZm34AOHhULCwgh+baAAAAOxJREFUKJGV0utOhDAQhmHcNbi7CtNhW7qWctij3v8V+tkDNqZgfBMS0icz8KPFy0rFOhaLAcsaVZlK4K5OS3CX4mb7hLabHFbxN7KTb8+u1yz+/rF/YbWAFR6F6uykKo3pOmPK6A7dmxp7ZhZ4uB/VjHsiRWRYtCHBBkdK7R3COp4JcY+zGaMJZ9CO4iSNHPb9ZOMkyfv3B1kYa6f3UJwc5UOIFquut9uVplODTpY8fkqMip4GjQZqHE4BH1LKlu1FH5G+WDfa+LUKJs9MxxD5vQnKD9LedIoHj+d68DaosPbg7u3CxfzzUq/0BeI8KWT7MN/WAAAAAElFTkSuQmCC"
                  style="height:26px;width:26px" alt="" data-atf="1">
              </div>
            </span>
            <div class="CA5RN">
              <div><span class="VuuXrf">Chrome Web Store</span></div><span class="iG7WGe">·</span>
              <div class="byrV5b" style="overflow:auto"><cite class="qLRx3b tjvcx GvPZzd cHaqb"
                  role="text">https://chromewebstore.google.com<span class="ylgVCe ob9lvb" role="text"> ›
                    detail › ublacklist</span></cite></div>
            </div>
          </div>
        </div><span jscontroller="IX53Tb" jsaction="rcuQ6b:npT2md" style="display:none"></span>
      </a></span>
    <div class="B6fmyf byrV5b Mg1HEd">
      <div class="HGLrXd iUh30 ojE3Fb">
        <div class="q0vns"><span class="DDKf1c">
            <div class="eqA2re UnOTSe" style="height:26px;width:26px"></div>
          </span>
          <div class="CA5RN">
            <div><span class="VuuXrf">Chrome Web Store</span></div><span class="iG7WGe">·</span>
            <div class="byrV5b" style="overflow:auto"><cite class="qLRx3b tjvcx GvPZzd cHaqb"
                role="text">https://chromewebstore.google.com<span class="ylgVCe ob9lvb" role="text"> › detail
                  › ublacklist</span></cite></div>
          </div>
        </div>
      </div><span class="go828442299" lang="en-US"><span class="ub-button go786762153" role="button" tabindex="0">Block
          this site</span></span>
      <div class="csDOgf BCF2pd ezY6nb L48a4c">
        <div jscontroller="gOTY1"
          data-id="atritem-https://chromewebstore.google.com/detail/ublacklist/pncfbmialoiaghdehhbnbhkkgmjanfhe?hl=en"
          data-viewer-group="1" jsaction="rcuQ6b:npT2md;aevozb:T2P31d;vcOT6c:C6KsF;k7WJpc:beCLof">
          <div>
            <div jscontroller="PbHo4e" jsshadow="" jsaction="rcuQ6b:npT2md;h5M12e;jGQF0b:kNqZ1c;"
              data-viewer-entrypoint="1">
              <div jsslot="">
                <div jsname="I3kE2c" class="MJ8UF iTPLzd rNSxBe eY4mx lUn2nc" style="position:absolute"
                  aria-label="About this result" role="button" tabindex="0"><span jsname="czHhOd"
                    class="D6lY4c mBswFe"><span jsname="Bil8Ae" class="xTFaxe z1asCe"
                      style="height:18px;line-height:18px;width:18px"><svg focusable="false"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                          d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
                        </path>
                      </svg></span></span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Diff screenshot of Google's old and new HTML

The changes in the HTML markup are really minimal, basically just adding a divider dot <span class="iG7WGe">·</span> to the title and a new style="overflow:auto" attribute.
The main changes happen in the CSS.

[tadwohlrapp]

For now this CSS plays nice with the new version without affecting the old one:

div:has(> span.go828442299) > div:has(div.CA5RN > span.iG7WGe) ~ span.go828442299 {
  line-height: 1.3;
  margin-top: 0;
}