Subcategory titles displayed out of place

Hello,

While browsing the forum on my phone, I noticed that some subcategory titles are displayed out of place. It seems that it happens for the Horizon and the Graceful theme and only on mobile (Firefox) but not the desktop variant of the website.
As far as I can tell that is true and for some subcategories in Support (Xfce, KDE, Gnome), Other languages and ARM. (See screenshot)

PS: this time I deleted the cache before reporting. Without success…

Edit: correcting typos

The common denominator of all DE subcategories seems to be they have a description. Seems like a placeholder is left for it but for some reason it is not shown.

Given that those descriptions are very generic and the other categories do not have them anyway i would suggest to the admins to remove those descriptions as a quick workaround.

The mentioned themes are provided by upstream Discourse.

I have checked the default theme that meets the anonymous users.

It displays as expected on a fully up-to-date Samsung XCover7 using Vivaldi, Chrome and Firefox.

All browsers display the Category page as expected.

What the issue might be on your end - I have no idea…

I just tried with the remaining two themes Manjaro and Material Design) and with a private tab.
And it is displayed wrong in all conditions

In addition I tested the browser shipped with the Android, which is a fork of Chromite. I never use it, so it should give me the standard look for a guest. There it is displayed wrong too:

The same on a Google Chrome installed fresh just for the purpose of testing: some categories are displayed out of place

I can replicate this on a desktop system with a narrow browser window (Firefox and Chromium).

Misalignment affects Support subcategories KDE Plasma, Xfce and GNOME

Also ARM subcategories Plasma mobile, Phosh and Lomiri

On mobile devices the browser is identifying itself as a mobile variant - and thus trigger a mobile view.

Usually - the mobile browser will have an option request the desktop version.

There is no guarantee that the css used will match any and all devices - it is how it is - but usually the content displays correct by the device majority.

The theme labellled Manjaro is unmaintained and known to be flawed. It is is not a recommended theme - it is only provided because there was some confusion - by using it you are accepting these possible flaws.

All themes - except Manjaro theme - are provided by upstream

Manjaro uses the default upstream theme - Horizon - apart from the default color theme - we do not alter the default themes.

We have selected the Clover and Clover Dark to be used as default for new visitors.

Please make sure that no extensions are altering css or blocking javascript execution.

If you have issues with the defaults - I suggest you create an issue with upstream

My adblocker is off on manjaro websites in Firefox. The other two browser use standard configuration, as I usually don’t use them.

All of the categories have a description that is not shown.
It seems that the subcategories that have a logo are displayed wrong. That is so far the only difference between correctly displayed and wrongly displayed items I can find..

To be frank, I don’t have the motivation for that. I don’t run a discourse instance and have no chance to properly test potential fixes, so I don’t see myself in the right place to do so…

I am no designer - not at all.

I spotted a pattern - and when I looked at the configuration for the sub categories - found that the affected categories had an image attached.

The images used were a mix of .svg and .png and sizes too.

This may have worked before, but now they skewed the card layout - I know very little of css so I removed the images and now the cards align identically.

So you are right - the three categories was skewed - now they are not.

Thank you. I just identified and edited my post as well.

I also just did some troubleshooting using the web developer tools of Firefox for desktop.
It seems that it also depends on the screen size.

After turning responsive mode on one can change the size of the web page. Below a certain width it switches to the wrong display

And with my limited .css knowledge it seems that the following rule in mobile.scss is the culprit:

.category-logo:not(.no-logo-present) + .category-details {
max-height: 132px;
height: calc(132px - 1em);
padding: 0.5em !important;
}

Specifically the height seems to be the issue…

Now that I found this, I might report it to discourse. But it will probably take a while until I get to it

If that scss is accurate, I’d certainly agree;
what is this random (and misspelled) line of code?:

max-heigth: 132px;

Even if corrected, that would do nothing.

Sorry. that was a typo from my side. I couldn’t copy-paste it, but had to type it by hand :sweat_smile:

I fixed it now in the post above

Firefox Responsive Design Mode shows misalignment if window width < 640px

No misalignment when switching viewport to landscape mode,

No misalignment of Support subcategories since images have been removed

This is how I prefer it. :wink:

Exactly! Although I never noticed an issue if I did turn the phone, probably because the display on mine is 720 pixels wide in that orientation.

I do remember issues a good while back with the desktop browser, though, if the browser window was adjusted beyond a certain point, probably also <640px.

Edited to add:

It’s a simple fact that lower-resolution displays simply don’t have enough pixels to display the content properly, particularly when (as is usual with most people these days) used in a vertical (portrait) orientation for everything.

Often the simplest “fix” for such issues is simply to turn the device round. :wink:

So, the bottom line is that the OP’s problem with regard to the presentation of the category subtitles and the issue on their thread “Forum jumps to first post when changing tab on mobile” are both due to a combination of…

  • using a mobile browser on their phone; and
  • using the broken “Manjaro” forum theme.

I therefore propose that both threads can be closed, given that the issues are non-extant with proper forum usage. :thinking:

Not so sure about the jumping topic…let me test.

That would be a work-around rather than a solution

Original issue with Support subcategories has been resolved

Only if you consider the proper use of the device for reading online content as the device was intended to be used by its manufacturers “a workaround”.

It’s a little bit like the owner of an offroad vehicle complaining that the front of his car gets dented whenever he’s trying to run down a tree, and the issue getting fixed by mounting a battering ram to the front his engine bonnet. In this case, the battering ram is the workaround, whereas the proper solution would be to tell him that running down trees is not what that vehicle was built for.

Anyway, he’s got his battering ram now, so there’s no point in reopening the thread.

This is becoming more of a Disco 'Round.