3

See the image. The "badges" section is smaller and wrongly italic and doesn't fit the screen.

Example of the incorrect rendering

It has a significantly higher 100% chance of shrinking if the user has no visible posts.

I can reproduce this issue on Android 5.1 and 7.1, with Google Chrome version 52, 54, 57, 60, 61, 62 (all from Play Store).

This is what it should look like, with no left/right margin:

What it should look like

If you want to see it yourself, here's Jeff Atwood's profile on Spanish.SE (bugged) and my profile on Meta (unbugged).

Improve this question
8
  • 2
    I don't understand this question... specifically the reference to something on your view "panicking". By the way, my view is different, with the badges left-aligned... – Werner Jan 4 '18 at 18:34
  • 1
    When reporting bugs better describe the actual bug, highlight relevant section in screenshot, etc. Not let us guess. I still don't really understand what bug you try to report. – Shadow The Vaccinated Wizard Jan 4 '18 at 23:27
  • Why still downvotes??? – iBug says Reinstate Monica Jan 5 '18 at 13:04
  • Why still upvotes??? ;) – Patrick Hofman Jan 5 '18 at 13:06
  • @PatrickHofman Not a right place and right time to play this joke, though. I'm very depressed for being downvoted for such a (hopefully) good bug report. – iBug says Reinstate Monica Jan 5 '18 at 14:05
  • If it helps: I have upvoted you. I noted this bug ages ago, but I stopped reporting them because there seems to be no one fixing those issues. Maybe therefore the community isn't that interested either. – Patrick Hofman Jan 5 '18 at 14:09
  • @PatrickHofman Then why not vote the answer up altogether? ;) – iBug says Reinstate Monica Jan 5 '18 at 14:36
  • Because I didn't feel like testing it if it works, which I usually do when I upvote. – Patrick Hofman Jan 5 '18 at 14:37
1

Here's my own analysis about the issue, with a practical solution supplied.

Maybe the badges section shouldn't belong to "empty posts"?

<div class="empty">
  <h3>Keeping a low profile.</h3>
  <p>This user hasn&#39;t posted... yet.</p>

  <!-- MARK: div class="empty" should have ended here -->
  <!-- The following part belongs to another div -->

  <div class="user-panel _card">
    <div class="subheader _level-2">
      <div class="-title">
        <h2>Rarest badges <span>(1)</span></h2>
      </div>
    </div>

    <!-- Badges section here -->
    ...

  </div>
</div><!-- / empty -->

<!-- Bug? "empty" shouldn't end here. It should be moved to MARK above -->

And this is the CSS part that's probably causing bad padding and wrong italic:

.empty{padding:30px;text-align:center;font-style:italic;color:#848d95;font-size:11px}
       ^~~~~~~~~~~~                   ^~~~~~~~~~~~~~~~~

This is the correct code from a not affected page (where a user has at least a visible post):

<div class="user-panel _card js-top-posts">
  <!-- "Newest Posts" section -->
</div><!-- / user-panel card -->

<!-- The above div is correctly ended there and doesn't affect badges section -->

<div class="user-panel _card">
  <div class="subheader _level-2">
    <div class="-title">
      <h2>Rarest badges <span>(27)</span></h2>

      <!-- Continuing badges -->
      ...

So, a simple fix would be moving the closing </div> tag to the right place:

<div class="empty">
  <h3>Keeping a low profile.</h3>
  <p>This user hasn&#39;t posted... yet.</p>
</div><!-- / empty -->
<!-- ^ Just move it there -->

<div class="user-panel _card">
  <div class="subheader _level-2">
Improve this answer

You must log in to answer this question.

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