# Upgrade has broken layout of category view

**URL:** https://meta.discourse.org/t/upgrade-has-broken-layout-of-category-view/81664
**Category:** Bug
**Created:** [27.Февраль.2018 14:31:38 UTC](https://meta.discourse.org/t/upgrade-has-broken-layout-of-category-view/81664 "2018-02-27T14:31:38Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![john-lynch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/john-lynch/32/81514_2.png) [@john-lynch](https://meta.discourse.org/u/john-lynch)
#### Post date: [27.Февраль.2018 14:31:38 UTC](https://meta.discourse.org/t/upgrade-has-broken-layout-of-category-view/81664/1 "2018-02-27T14:31:38Z")

</div>

I run a small forum for friends to hang out and discuss stuff. This morning I upgraded Discourse to the latest, and now the category rendering on the main discourse page is busted. I had added a banner image to each category. Previously, the banner would be displayed underneath the category title. Now it looks like this:

 ![layout%20change](https://global.discourse-cdn.com/meta/original/3X/9/a/9a2e6d361905ab0df300d98cbe7869c889ef06a4.PNG)

Instead of the banner image floating nicely underneath the title, it’s not mashed over to the side. You can also see that the post counts are running into the latest topics.

As best as I can tell (and I am by no means a CSS/layout expert, so I may very well be mistaken), this appears to be related to the work done on these issues:

> [@Regression in UI in default theme](https://meta.discourse.org/t/regression-in-ui-in-default-theme/81592):
>
> On the home page the categories listing is not displayed properly. Here is a screenshot:

> [@Overflow in suggested topics when category name is too long](https://meta.discourse.org/t/overflow-in-suggested-topics-when-category-name-is-too-long/81500):
>
> @awesomerobot Could you have a look at this? slight_smile

If I use Chrome’s developer tools to change the `display` for `.category-list .category-title-link` from `flex` to `block`, that almost seems to fix my issue:

 ![layout%20half%20fix](https://global.discourse-cdn.com/meta/original/3X/2/9/297eb5064b3debc690c738db7cb6ddcbb060bdac.PNG)

The banner images are now below the category titles again and the post counts aren’t running into the latest topic displays. Unfortunately, the lock icons are on a new line, which is undesirable.

I’m not sure what can be done to fix this. Please advise, and thank you.

---

<div class="post-metadata">

### Author: ![schungx](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/schungx/32/70989_2.png) [@schungx](https://meta.discourse.org/u/schungx)
#### Post date: [27.Февраль.2018 14:36:27 UTC](https://meta.discourse.org/t/upgrade-has-broken-layout-of-category-view/81664/2 "2018-02-27T14:36:27Z")

</div>

I updated and see the same problem.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [27.Февраль.2018 14:48:05 UTC](https://meta.discourse.org/t/upgrade-has-broken-layout-of-category-view/81664/3 "2018-02-27T14:48:05Z")

</div>

I’m taking a look at this now and will have a fix shortly.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [27.Февраль.2018 15:48:55 UTC](https://meta.discourse.org/t/upgrade-has-broken-layout-of-category-view/81664/4 "2018-02-27T15:48:55Z")

</div>

Just pushed a fix, this should be available on the tests-passed branch once tests pass.

[https://github.com/discourse/discourse/commit/96b46170941f9ef8f492a993b0fbcbf591a1e9ae](https://github.com/discourse/discourse/commit/96b46170941f9ef8f492a993b0fbcbf591a1e9ae)

I had to slightly rework a fix from yesterday that was meant to prevent long category titles from breaking the layout.

---

<div class="post-metadata">

### Author: ![john-lynch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/john-lynch/32/81514_2.png) [@john-lynch](https://meta.discourse.org/u/john-lynch)
#### Post date: [27.Февраль.2018 16:30:48 UTC](https://meta.discourse.org/t/upgrade-has-broken-layout-of-category-view/81664/5 "2018-02-27T16:30:48Z")

</div>

OK, I’ve pulled the latest fix, and things are definitely better. Viewing the site on my PC via Chrome looks essentially normal. Viewing the site on my phone via Chrome is much improved, but the category names are wrapping much more aggressively than they used to, even though there is plenty of space for them. You can see this here:

 ![aggressive%20mobile%20wrap](https://global.discourse-cdn.com/meta/original/3X/9/5/9501c7ac3eb4fe5d60df93beefd586da7e999025.png)

You can see the top of the banner image below the category title. There should be plenty of room for the category title to flow into, but it’s wrapping very early. On mobile, that space isn’t being used by anything, so it seems it should be safe for the category title to use.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [28.Февраль.2018 14:45:42 UTC](https://meta.discourse.org/t/upgrade-has-broken-layout-of-category-view/81664/6 "2018-02-28T14:45:42Z")

</div>

A post was split to a new topic: [Highlighted user on topic list aligned incorrectly](https://meta.discourse.org/t/highlighted-user-on-topic-list-aligned-incorrectly/81784)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [28.Февраль.2018 14:50:02 UTC](https://meta.discourse.org/t/upgrade-has-broken-layout-of-category-view/81664/7 "2018-02-28T14:50:02Z")

</div>

@john-lynch everything should be working as expected now

 ![20%20AM](https://global.discourse-cdn.com/meta/original/3X/a/e/ae9bb4e8737231603064bd56e4192e85461369cb.png)

---

<div class="post-metadata">

### Author: ![john-lynch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/john-lynch/32/81514_2.png) [@john-lynch](https://meta.discourse.org/u/john-lynch)
#### Post date: [28.Февраль.2018 16:15:27 UTC](https://meta.discourse.org/t/upgrade-has-broken-layout-of-category-view/81664/8 "2018-02-28T16:15:27Z")

</div>

Yup, my category titles look good on mobile now too, thanks. One last (possibly unrelated thing): the site title on mobile is also taking up two lines now, where I’m pretty sure it used only to take up one. There’s certainly ample space for it on my phone, but it’s now wrapping prematurely. Not sure how that would be related to category wrapping though.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [01.Март.2018 23:00:06 UTC](https://meta.discourse.org/t/upgrade-has-broken-layout-of-category-view/81664/9 "2018-03-01T23:00:06Z")

</div>

This topic was automatically closed after 32 hours. New replies are no longer allowed.
