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}}
-            <div class="category-description">
+            {{#if c.description_excerpt}}
-              {{{dir-span c.description_excerpt}}}
+              <div class="category-description">
-            </div>
+                {{{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,9 +43,11 @@
                           {{/each}}
                         </div>
                       {{else}}
-                        <div class="category-description">
+                        {{#if subcategory.description_excerpt}}
-                          {{{dir-span subcategory.description_excerpt}}}
+                          <div class="category-description subcategory-description">
-                        </div>
+                            {{{dir-span subcategory.description_excerpt}}}
+                          </div>
+                        {{/if}}
                       {{/if}}
                     </td>
                   </tr>

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,12 +202,24 @@
 }
 
 .categories-list .category {
-  h3 .d-icon {
+  h3,
-    color: $primary-medium;
+  h4 {
-    height: 0.76em;
+    margin-bottom: 0;
-    width: 0.76em;
+    .d-icon {
-    vertical-align: baseline;
+      color: $primary-high;
-    margin-right: 0.15em;
+      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;
   }
 }
 
@@ -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,8 +336,11 @@ tr.category-topic-link {
     padding-bottom: 15px;
   }
 
-  .subcategories-list td {
+  .subcategories-list {
-    padding-top: 15px;
+    border-bottom: none;
+    td {
+      padding-top: 15px;
+    }
   }
 
   .topic-list > tbody > tr {
@@ -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;