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 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 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 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 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 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 at 21:44

You must log in to answer this question.

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