24

When clicking the "share" button below questions and answers I get the following layout: Share a link to this question popover. Copy link, CC BY-SA 4.0, Facebook and Twitter displayed on 3 separate rows

These elements used to be positioned horizontally across the bottom on the popover.

It looks like a <div class="d-flex jc-space-between ai-center mbn4"></div> just ends prematurely.

<div class="d-flex jc-space-between ai-center mbn4"></div>
<button class="js-copy-link-btn s-btn s-btn__link js-gps-track"
        data-gps-track="">Copy link
</button>
<a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="license"
   class="js-license s-block-link w-auto" target="_blank"
   title="The current license for this post: CC BY-SA 4.0">CC BY-SA 4.0</a>
<div class="js-social-container">
    <button class="s-btn p4" role="button"
            title="Share link to this question on Facebook"
            aria-label="Share on Facebook">
        <svg class="native svg-icon iconFacebook" aria-hidden="true"
             width="18" height="18" viewBox="0 0 18 18">
            <path d="M3 1a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H3Zm6.55 16v-6.2H7.46V8.4h2.09V6.61c0-2.07 1.26-3.2 3.1-3.2.88 0 1.64.07 1.87.1v2.16h-1.29c-1 0-1.19.48-1.19 1.18V8.4h2.39l-.31 2.42h-2.08V17h-2.5Z"
                  fill="#4167B2"></path>
        </svg>
    </button>
    <button class="s-btn p4" role="button"
            title="Share link to this question on Twitter"
            aria-label="Share on Twitter">
        <svg class="native svg-icon iconTwitter" aria-hidden="true"
             width="18" height="18" viewBox="0 0 18 18">
            <path d="M17 4.04c-.59.26-1.22.44-1.88.52a3.3 3.3 0 0 0 1.44-1.82c-.64.37-1.34.64-2.09.79a3.28 3.28 0 0 0-5.6 2.99A9.3 9.3 0 0 1 2.12 3.1a3.28 3.28 0 0 0 1.02 4.38 3.28 3.28 0 0 1-1.49-.4v.03a3.29 3.29 0 0 0 2.64 3.22 3.34 3.34 0 0 1-1.48.06 3.29 3.29 0 0 0 3.07 2.28 6.58 6.58 0 0 1-4.85 1.36 9.33 9.33 0 0 0 5.04 1.47c6.04 0 9.34-5 9.34-9.33v-.42a6.63 6.63 0 0 0 1.63-1.7L17 4.04Z"
                  fill="#2AA3EF"></path>
        </svg>
    </button>
</div>

Moving the button, link and social container into that div seems to restore the old layout:

<div class="d-flex jc-space-between ai-center mbn4">
    <button class="js-copy-link-btn s-btn s-btn__link js-gps-track"
            data-gps-track="">Copy link
    </button>
    <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="license"
       class="js-license s-block-link w-auto" target="_blank"
       title="The current license for this post: CC BY-SA 4.0">CC BY-SA
        4.0</a>
    <div class="js-social-container">
        <button class="s-btn p4" role="button"
                title="Share link to this question on Facebook"
                aria-label="Share on Facebook">
            <svg class="native svg-icon iconFacebook" aria-hidden="true"
                 width="18" height="18" viewBox="0 0 18 18">
                <path d="M3 1a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H3Zm6.55 16v-6.2H7.46V8.4h2.09V6.61c0-2.07 1.26-3.2 3.1-3.2.88 0 1.64.07 1.87.1v2.16h-1.29c-1 0-1.19.48-1.19 1.18V8.4h2.39l-.31 2.42h-2.08V17h-2.5Z"
                      fill="#4167B2"></path>
            </svg>
        </button>
        <button class="s-btn p4" role="button"
                title="Share link to this question on Twitter"
                aria-label="Share on Twitter">
            <svg class="native svg-icon iconTwitter" aria-hidden="true"
                 width="18" height="18" viewBox="0 0 18 18">
                <path d="M17 4.04c-.59.26-1.22.44-1.88.52a3.3 3.3 0 0 0 1.44-1.82c-.64.37-1.34.64-2.09.79a3.28 3.28 0 0 0-5.6 2.99A9.3 9.3 0 0 1 2.12 3.1a3.28 3.28 0 0 0 1.02 4.38 3.28 3.28 0 0 1-1.49-.4v.03a3.29 3.29 0 0 0 2.64 3.22 3.34 3.34 0 0 1-1.48.06 3.29 3.29 0 0 0 3.07 2.28 6.58 6.58 0 0 1-4.85 1.36 9.33 9.33 0 0 0 5.04 1.47c6.04 0 9.34-5 9.34-9.33v-.42a6.63 6.63 0 0 0 1.63-1.7L17 4.04Z"
                      fill="#2AA3EF"></path>
            </svg>
        </button>
    </div>
</div>

Share a link to this question popover. Copy link, CC BY-SA 4.0, Facebook and Twitter displayed horizontally in 1 row across the bottom of the popover

Reproduced on Meta Stack Exchange and Stack Overflow whether logged in or logged out.

Reproduced on Windows 10 with Browsers:

  • Chrome Version 99.0.4844.51 (64-bit)
  • Firefox Version 97.0.2 (64-bit)
3
  • 1
    Seems like it happens for [*].stackexchange.com. Too hasty to conclude, but here I am. Mar 7, 2022 at 5:41
  • Looks like new design, it's very common for SE to push small design changes without notice, it's just one of them. Agree it's ugly but doubt it's a bug. They only moved the cheese around a bit. :) (So, best case we'll get status-bydesign on this report.) Mar 7, 2022 at 8:12
  • 1
    I'd be more inclined to believe it were status-bydesign if there weren't a random empty div that has no visible styles without children, but CSS classes specifically configured to establish an evenly spaced flex layout for these elements. Mar 7, 2022 at 17:41

1 Answer 1

5

Just your run of the mill bug / UI regression. It's been fixed and will go out in the next build. Thanks for calling it out!

3
  • Which hasn't rolled out yet?
    – Luuklag
    Mar 8, 2022 at 5:46
  • @Luuklag can take few days, see version in footer currently it's 2022.3.7.41613 meaning last build was sometime yesterday. :) Mar 8, 2022 at 6:31
  • Our builds are still quite manual. It's often far easier to say a bug is fixed than to wait until that build went out, specifically. Especially when we're on to the 4th thing since then, hope that makes sense! Mar 8, 2022 at 21:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .