59

In the Top Questions page (homepage), the asked/modified X mins ago text was left-aligned next to the tags. Previously the text was right-aligned. Seems some alignment issue introduced on that page recently.

Screenshot for reference:

top questions

Configuration Version
Operating System Windows 10 Pro
Mozilla Firefox 89.0 (64-bit)
Google Chrome 91.0.4472.101 (Official Build) (64-bit)

Update: I see the same alignment issue in all other Stack Exchange site's "Top Questions" page too.

Improve this question
10
  • 8
    There was this other, pretty related issue recently. The persistence of this kind of issues may suggest at a fragmented, hard-to-manage codebase: to me it seems like a proper overhaul and tidy-up of this component could be beneficial? While working as a dev, I used to like these tasks: hunting down pieces of code related to a component scattered around here and there, and unifying them in a tidied-up, canonical component definition... (Such refactors and tidy-ups are a kind of repaying technical debt: a normal part of developing any codebase.)
    – Levente
    Commented Jun 14, 2021 at 12:47
  • @Levente there is lack of testing, for sure. It is "Publish and let the users find the bugs" design.
    – Shadow Wizard
    Commented Jun 14, 2021 at 14:21
  • @ShadowTheVaccinatedWizard that is pretty much common in the industry. And we are cheap testers :) The only thing we (SO and us) could be concerned with is SO's reputation...
    – Levente
    Commented Jun 14, 2021 at 14:23
  • 7
    @Levente true. What bugs me here is that this one is super trivial to see. Nobody in the chain bothered to even take a look in the homepage during the process of publishing the changes, and this annoys me. They all just went ahead with the changes, approving them all the way to g̶l̶o̶r̶y̶ bugged homepage.
    – Shadow Wizard
    Commented Jun 14, 2021 at 14:25
  • It also breaks the "Newest" on the questions page too, when there is too much space used by the tags.
    – Luuklag
    Commented Jun 14, 2021 at 14:33
  • It's not just on Meta.SE and it's not just the "Active" tab. The problem exists with most tabs on Stack Overflow, for example.
    – 41686d6564
    Commented Jun 14, 2021 at 16:17
  • As I have learned from @Luuklag, the new generation of this component is already in the works, as can be observed here: stackoverflow.design/product/components/post-summary/… Apparently we just need to survive until the frontend gets migrated to the new framework.
    – Levente
    Commented Jun 14, 2021 at 19:43
  • 2
    Also reported on MSO: Updates/creation info of a post on the Home page seems to be broken.
    – Sebastian Simon
    Commented Jun 15, 2021 at 5:10
  • @Levente Don’t hold your breath. It’s been in the works for years, and likely will take further years before it will get live here.
    – Emil Jeřábek
    Commented Jun 15, 2021 at 9:16
  • 1
    It seems to be fixed now.
    – Emil Jeřábek
    Commented Jun 17, 2021 at 13:54

3 Answers 3

Reset to default
10

The breaking change was adding class named tags to the parent element of the tags, which has CSS rule float: left;.

Removing the float left rule from the tags class, or removing the class from the tags parent element would solve the issue.

Improve this answer
7
  • The usercard class class="started mt0" that sits nested within has a float: right; property, but is overruled by the tags class.
    – Luuklag
    Commented Jun 14, 2021 at 14:23
  • 1
    Well, I would say in the first place, probably it could be beneficial trying to avoid both floats and flexbox to manage the same layout...
    – Levente
    Commented Jun 14, 2021 at 14:24
  • @Levente meh, that's their choice, won't meddle in it. Just found the breaking change.
    – Shadow Wizard
    Commented Jun 14, 2021 at 14:27
  • Regarding the code you pointed out in the answer: SO frontenders also could / should embrace the "block, element, modifier" selector pattern, achieving control of what they are actually doing. Seeing this generic selector with this massively impactful declaration on it: .tags { float: left; }, I can imagine that touching CSS on this project currently is a nightmare.
    – Levente
    Commented Jun 14, 2021 at 15:02
  • @Levente embracing BEM would be a huge regression.
    – TylerH
    Commented Jun 14, 2021 at 15:16
  • 3
    In all fairness they are building a "design system", named stacks Hopefully that will clear a lot of tech debt on the CSS side.
    – Luuklag
    Commented Jun 14, 2021 at 19:15
  • @Luuklag that's a very useful reveal! Here is the new generation of the same component (called "Post summary"), with as far as I can tell flawless responsive layout: stackoverflow.design/product/components/post-summary/… (also, it's using some consciously structured classnames). Looks like much of today's struggle is just keeping legacy code alive until migrating over to the new one becomes a possibility. This paints an entirely different picture!
    – Levente
    Commented Jun 14, 2021 at 19:38
5

The alignment issue has been fixed.

Screenshot for reference:

Bug fixed

Improve this answer
0

I noticed something similar here, but while in your screenshot at lest the names are visible, here we have a question with apparently no author at all (see screenshot below)! It seems in this case we only get the name appearing in the right place when the tags take up so much space that the username has to appear on the next line:

enter image description here

As the comments on this thread's question suggest, the bug may be related to these MSE questions which were recently posed as bug reports:

Improve this answer
3
  • 1
    Something else is happening here. The top highlighted question is by a deleted user, that is what sets it apart. The third question in your list also displays the author, while still being on the same line as the tags.
    – Luuklag
    Commented Jun 15, 2021 at 19:23
  • I can only reproduce this on one question and it was migrated and posted by a user who doesn't have an account on the linked site.
    – hyper-neutrino
    Commented Jun 15, 2021 at 19:23
  • 1
    @user1271772 it is, because it is centred to the left, instead of the right.
    – Luuklag
    Commented Jun 15, 2021 at 19:29

You must log in to answer this question.

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