Fix discussion counter display for Flarum 2.x

Capybara

On Flarum 2.x, if a discussion title is too long, the discussion counter shifts to the right. The following code fixes this issue:

@media (max-width: 768px) {
  .DiscussionListItem-content {
    position: relative;
  }

  .DiscussionListItem-stats {
    position: absolute;
    top: 12px;
    right: 12px;

    display: flex;
    align-items: center;
    gap: 6px;
  }

  .DiscussionListItem-main {
    padding-right: 48px;
  }
}

Flarum has a discussion sidebar that can be opened inside any discussion. The counters are hardly visible there. They’re actually not needed in this sidebar — it’s just for quick access to discussions, so it’s simpler to remove them.

.DiscussionListPane .DiscussionListItem-stats,
.DiscussionListPane .item-discussion-views {
  display: none !important;
}

Also, on the mobile version of the all-discussions page, I’d like to restore the icon to the left of the posts count, so it looks consistent with the view counter. I haven’t found a way to do this yet, but if anyone knows, I’d really appreciate it if you could share 👀

Capybara

@IanM Since we’re now on Flarum 2.x, could you check Discuss on the mobile version? My fix addresses exactly this issue. I’ll also share my fixes for the following quirks: the Flarum logo has shifted upward, and fof/links shows all tabs as active (highlighted in orange) at the same time.

.Header-logo {
    display: block;
    width: 50px;
    height: 50px;
    max-height: none;
}

#header-primary .LinksButton {
  color: var(--header-control-color);
  text-decoration: none !important;
  border-bottom: none !important;
}

#header-primary .LinksButton.active {
  color: var(--header-color) !important; 
}

I’m using the beta in production, so I’ve probably clicked through all the pages trying to find any quirks 😅

IanM

Capybara thanks! I've modified your suggestions slightly, but the issues here are addressed in

I'll release fof/links in a moment, the core change will be bundled in 2.0.0-beta.5 later today/tomorrow

IanM

Both of these fixes are now deployed here on discuss 👍️