0

When I zoom in on my browser past 100%, the reputation graph disappears, even though there's plenty of room for it.

In this image, the browser is at 100%:

enter image description here

And in this image, the browser is at 110%:

enter image description here

Can we fix this error so that the reputation graph scales up with the rest of the page instead of just disappearing? The data for the next tag badge doesn't really need to take up all that space, and the graph is more interesting anyway.

5
  • I'd assume downvotes are because zoom 100% is what the team works with, they don't test all zoom levels. You're losing the chart because the width threshold has been met such that it gets hidden. aka, by-design
    – Kevin B
    Jan 25, 2022 at 21:02
  • 2
    Most likely not a bug, but an intended change from this re-design: New responsive Activity page. You're reducing the size of the available space and the responsive design gives more priority to other stuff than the graph.
    – Tom
    Jan 25, 2022 at 21:03
  • 2
    "Doctor, it hurts when I do this." "Then don't do that." Solid medical advice. Solid software usage advice too ;-) Jan 25, 2022 at 22:46
  • 2
    @HereticMonkey "Doc, but I really want/need to do this." - "Here are some painkillers, knock yourself out" :) Jan 25, 2022 at 22:47
  • 1
    @HereticMonkey "Doc, but you're supposed to fix this" - "I wouldn't have to fix anything if you didn't keep finding problems" :-) Jan 25, 2022 at 23:13

1 Answer 1

4

The reputation graph is wrapped in a div that gets hidden via a media query matching the lg:d-none (if you want to learn about what it means, see the Stacks docs on responsiveness) class:

<div class="flex--item ps-relative lg:d-none"></div>

And here is the media query that applies display: none rule to the wrapper:

@media (max-width: 1264px)
html.html__responsive:not(.html__unpinned-leftnav) .lg\:d-none {
    display: none !important;
}

Note that the query only matches if you do not have the "Hide left navigation" setting enabled (the :not(.html__unpinned-leftnav) pseudo-class). If you enable it, the graph will stay visible until the second media query matches (its selector explicitly requires the setting to be enabled via the .html__unpinned-leftnav):

@media (max-width: 1100px)
html.html__responsive.html__unpinned-leftnav .lg\:d-none {
    display: none !important;
}

Whether the graph should be hidden on smaller viewports is debatable, but in the meantime, if you want to get the graph back, just remove the lg:d-none from the wrapper <div> element, and lo and behold, here it is in all its glory:

reputation graph on a smaller viewport after removing the lg:d-none class

4
  • 1
    Wish you could get real reputation for this answer :-). Just one question: is there a way to make it so that the browser always applies this change to this page when it loads, or would that require a whole answer's worth of explanation? I'm using Firefox, in case you're wondering. Jan 25, 2022 at 23:02
  • @SylvesterKruin flexing a CSS muscle is worth a thousand points :) As for applying it permanently, I guess you could use something like Stylus or local overrides to make the change persist (each with its own caveats) or use a userscript manager like Tampermonkey/Greasemonkey/Violentmonkey + a bit of JS to achieve the same result. I can throw together a simple userscript for ya a bit later if you want Jan 25, 2022 at 23:08
  • 1
    No thanks, that would be a little unnecessary, since I don't really need the graph to work in 100%+ zoom sizes. Thanks for the recommendations, though! The question was really about what I thought was a bug, but since it's not a bug, the question is that much less relevant. "Doctor, my eye moves when I look to the left" (although I hope this case was a little less obvious) :-). Jan 25, 2022 at 23:12
  • 1
    @SylvesterKruin NP - I will probably throw one regardless, though, since I am a part of the userscripting community. P.S. Depending on which direction the eye moves when you look to the left, it might be a serious medical condition :) Jan 25, 2022 at 23:18

You must log in to answer this question.

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