UX: Some category page style adjustments for sub-sub categories

app/assets/javascripts/discourse/templates/components/categories-only.hbs

@@ -14,17 +14,23 @@
         <tr data-category-id={{c.id}} class="{{if c.description_excerpt 'has-description' 'no-description'}} {{if c.uploaded_logo.url 'has-logo' 'no-logo'}}">
           <td class="category" style={{border-color c.color}}>
             {{category-title-link category=c}}
+            {{#if c.description_excerpt}}
               <div class="category-description">
                 {{{dir-span c.description_excerpt}}}
               </div>
-
+            {{/if}}
             {{#if c.isGrandParent}}
-              <table class="category-list">
+              <table class="category-list subcategories-with-subcategories">
                 {{#each c.subcategories as |subcategory|}}
                   <tr data-category-id={{subcategory.id}} class="{{if subcategory.description_excerpt 'has-description' 'no-description'}} {{if subcategory.uploaded_logo.url 'has-logo' 'no-logo'}}">
                     <td class="category" style={{border-color subcategory.color}}>
                       {{category-title-link tagName="h4" category=subcategory}}
-
+                      {{log subcategory}}
+                      {{#if subcategory.description_excerpt}}
+                        <div class="category-description subcategory-description">
+                          {{{dir-span subcategory.description_excerpt}}}
+                        </div>
+                      {{/if}}
                       {{#if subcategory.subcategories}}
                         <div class='subcategories'>
                           {{#each subcategory.subcategories as |subsubcategory|}}
@@ -37,10 +43,12 @@
                           {{/each}}
                         </div>
                       {{else}}
-                        <div class="category-description">
+                        {{#if subcategory.description_excerpt}}
+                          <div class="category-description subcategory-description">
                             {{{dir-span subcategory.description_excerpt}}}
                           </div>
                         {{/if}}
+                      {{/if}}
                     </td>
                   </tr>
                 {{/each}}

app/assets/stylesheets/common/base/category-list.scss

@@ -11,6 +11,13 @@
     vertical-align: text-top;
     line-height: $line-height-medium;
   }
+  &.with-topics {
+    .subcategories-with-subcategories {
+      .category-description {
+        display: none;
+      }
+    }
+  }
 }
 
 .category-boxes,
@@ -195,14 +202,26 @@
 }
 
 .categories-list .category {
-  h3 .d-icon {
+  h3,
-    color: $primary-medium;
+  h4 {
+    margin-bottom: 0;
+    .d-icon {
+      color: $primary-high;
       height: 0.76em;
       width: 0.76em;
       vertical-align: baseline;
       margin-right: 0.15em;
     }
   }
+  .category-description {
+    margin-top: 0.5em;
+    overflow: hidden;
+    color: $primary-high;
+  }
+  .category-logo.aspect-image {
+    margin-top: 0.5em;
+  }
+}
 
 .category-boxes-with-topics,
 .category-boxes {
@@ -210,3 +229,15 @@
     margin-right: 0;
   }
 }
+
+.category-list.subcategories-with-subcategories {
+  margin-top: 1em;
+  margin-bottom: 0;
+  border-top: 1px solid $primary-low;
+  .category-description {
+    font-size: $font-down-1;
+  }
+  .category-logo.aspect-image {
+    --max-height: 75px;
+  }
+}

app/assets/stylesheets/desktop/category-list.scss

@@ -151,4 +151,10 @@
   .topic-featured-link {
     padding-left: 8px;
   }
+
+  .subcategories-with-subcategories {
+    .category-description {
+      display: none;
+    }
+  }
 }

app/assets/stylesheets/mobile/topic-list.scss

@@ -218,7 +218,6 @@
 // Category list
 // --------------------------------------------------
 .categories-list .category-list {
-  margin-left: -10px;
   margin-bottom: 2em;
 
   td {
@@ -265,10 +264,22 @@
 }
 
 .subcategory-list-item.category {
+  display: block;
+  width: calc(100% + 20px);
+  margin: 1.25em 10px 0;
+  border-bottom: none !important;
+  border-top: 1px solid $primary-low !important;
+  &:last-of-type {
+    margin-top: 0;
+    margin-bottom: 1.25em;
+    border-bottom: 1px solid $primary-low !important;
+  }
   td:first-of-type {
     padding: 12px 0px;
   }
-
+  .category-logo.aspect-image {
+    display: none;
+  }
   .subcategories {
     padding-left: 10px;
   }
@@ -283,9 +294,8 @@ tr.category-topic-link {
 
 .category-list-item,
 .subcategory-list-item {
-  padding: 5px 0 2px 3px;
+  padding: 0 0 0 3px;
   border-left: 6px solid;
-  border-top: 1px solid;
 
   h3,
   h4 {
@@ -326,9 +336,12 @@ tr.category-topic-link {
     padding-bottom: 15px;
   }
 
-  .subcategories-list td {
+  .subcategories-list {
+    border-bottom: none;
+    td {
       padding-top: 15px;
     }
+  }
 
   .topic-list > tbody > tr {
     &:nth-child(odd) {
@@ -376,6 +389,13 @@ tr.category-topic-link {
   }
 }
 
+.category-list-item {
+  padding: 0.5em 0 0.25em;
+  border-top: 1px solid $primary-low !important;
+  border-bottom: 1px solid $primary-low !important;
+  margin-bottom: 2em;
+}
+
 .category-box {
   h3 {
     margin: 0 0 0.5em 0;