General Questions/New to Joomla! 5.x • List All Categories in an Article Category Tree - is not showing the correct hierarchy

I am battling with the layout on a menu with this menu item type: List All Categories in an Article Category Tree

What I did to get this error on my menu page:

Create Article master category "Faculties"
with six sub-categories:
Each of these sub-categories have a sub-sub-categories.
Then create a "Faculty" menu with this menu item type: List All Categories in an Article Category Tree
Set all to show even if empty (no articles)

Expected result

The expected tree for Faculty is
[Faculties]
---16px--->[Applied Sciences]
------32px------>[Biotechnology]
------32px------>[Horticulture]
------32px------>[Etc..]
------32px------>[Etc..]
---16px--->[Business]
------32px------>[Law-of-contracts]
------32px------>[Etc...]
------32px------>[Etc..]
------32px------>[Etc..]
---16px--->[Education]
------32px------>[Sociolinguistics]
------32px------>[Etc...]
------32px------>[Etc..]
------32px------>[Etc..]
---16px--->[Engineering]
------32px------>[Mechanical Engineering]
------32px------>[Etc...]
------32px------>[Etc...]
------32px------>[Etc...]
etc.

With each sub Category with a padding-left: 16px ;
and each Sub Sub Category with a padding-left: 32px ;
with the next sub menu going back to a padding-left: 16px ;

Which is the same hierarchy as they were set up

Actual result

[Faculties]
---16px--->[Applied Sciences]
------32px------>[Biotechnology]
------32px------>[Horticulture]
------32px------>[Etc..]
------32px------>[Etc..]
------32px------>[Business]
---------48px--------->[Law-of-contracts]
---------48px--------->[Etc...]
---------48px--------->[Etc..]
---------48px--------->[Etc..]
---------48px--------->[Education]
------------64px------------>[Sociolinguistics]
------------64px------------>[Etc...]
------------64px------------>[Etc..]
------------64px------------>[Etc..]
------------64px------------>[Engineering]
---------------80px--------------->[Mechanical Engineering]
---------------80px--------------->[Etc...]
---------------80px--------------->[Etc...]
---------------80px--------------->[Etc...]
etc.
as you can see the next sub menu has the same padding left as the previous sub sub menu which keeps pushing the the list left instead of jumping back to show the correct placement hierarchy

This makes it look like we have sub-categories
followed sub sub-categories
followed by sub-sub-sub-categories
and the sub-sub-sub-sub-categories etc.
Hence continually indenting further which is not accurate to the category hierarchy.

System information (as much as possible)

The currently installed Joomla! version is "‎5.1.0"‎5.1.0
Template is shaper_helixultimate - Default]

download link to screenshot of inspector:
https://mega.nz/file/ZRpGCToA#J_KdBWKMV ... MaghOlvtYw

download link to screenshot of page with red text showing what the hierarchy should be:
https://mega.nz/file/BcYEnAjK#5kWlzKO-9 ... I0dU5jz5Xg

Statistics: Posted by DiGwork — Thu Jun 20, 2024 5:55 pm

---