Extra padding makes it hard for users to click on tag and category under topic title

Bug
1

image
image736×184 53.1 KB

In mobile view, the topic list has extra padding around the title, when users try to click on the tag, it’s hard to click on the tag itself.

2 Likes
3

At one point we intentionally increased the title padding to make it a larger click target (large enough to cover the category/title so those click through to the topic instead)… but it seems that has regressed.

Might be worth trying to make the category/tag bigger targets so they’re actually usable instead. I’ll take a look.

4 Likes
5

This was intentional. @schleifer said he never ever tapped on those fields (tag, category) on mobile so we made the title basically the only thing you can tap on in the topic list for mobile. If we’re changing this, we should discuss it first…

2 Likes
6

I think it’s a bit weird if the categories and tags can be clicked through on desktop but not on mobile. And if there are users who want to check it on mobile they will think the site is buggy, since when you tap and hold on the title it’s obvious that when active the padding turns to grey and cover the title and half of the categories/tags line. It’s an unusual UI design from my point of view.

Besides, from my GA analysis, over 80% users access my community through mobile, I can’t say the same for meta but I believe there is a high chance my user would click those tags on mobile.

1 Like
7

Yeah definitely, it still might not make sense but I figured I’d take a look again and see if it’s workable.

3 Likes
8

Yeah so I fiddled around with this a little and those links are just too small to be clickable by most mobile usability standards.

That said, we can do a better job at capturing these clicks and stop relying on this CSS overlap we’ve been doing… it’s always been a little fragile depending on content and doesn’t work well on all themes.

I’ve made an attempt to use JS instead (based on Clickable Topic):

This will also add the ability to make those bottom row items clickable again with a little CSS:

old CSS for reference 
.mobile-view .topic-list .topic-item-stats {
    pointer-events: all;
}

Update: this CSS has changed a bit

.topic-list .topic-item-stats__category-tags { 
  .discourse-tag,
  .badge-wrapper {
    pointer-events: all; 
  }
}
9 Likes