UX: Sub-sub categories in "Boxes with subcategories" + consistency

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

@@ -26,8 +26,27 @@
         <div class='description'>
           {{{text-overflow class="overflow" text=c.description_excerpt}}}
         </div>
-
-        {{#if c.subcategories}}
+        {{#if c.isGrandParent}}
+          {{#each c.subcategories as |subcategory|}}
+            <div data-category-id={{subcategory.id}}  style={{border-color subcategory.color}} class="subcategory with-subcategories {{if subcategory.uploaded_logo.url 'has-logo' 'no-logo'}}">
+              <div class="subcategory-box-inner">
+                {{category-title-link tagName="h4" category=subcategory}}
+                {{#if subcategory.subcategories}}
+                  <div class='subcategories'>
+                    {{#each subcategory.subcategories as |subsubcategory|}}
+                      {{#unless subsubcategory.isMuted}}
+                        <span class='subcategory'>
+                          {{category-title-before category=subsubcategory}}
+                          {{category-link subsubcategory hideParent="true"}}
+                        </span>
+                      {{/unless}}
+                    {{/each}}
+                  </div>
+                {{/if}}
+            </div>
+           </div>
+          {{/each}}
+        {{else if c.subcategories}}
           <div class='subcategories'>
             {{#each c.subcategories as |sc|}}
               <a class="subcategory" href={{sc.url}}>
@@ -38,7 +57,7 @@
                       width=sc.uploaded_logo.width
                       height=sc.uploaded_logo.height}}
                 </span>
-                <span class="subcategory-link">{{sc.name}}</span>
+                {{category-link sc hideParent="true"}}
               </a>
             {{/each}}
           </div>
@@ -46,4 +65,4 @@
       </div>
     </div>
   </div>
-{{/each}}
+{{/each}}

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

@@ -57,6 +57,7 @@
     @supports (--custom: property) {
       .logo.aspect-image img {
         --height: 40px;
+        height: var(--height);
         width: calc(var(--height) * var(--aspect-ratio));
         max-width: 100%;
       }
@@ -128,6 +129,46 @@
     overflow: hidden;
   }
 
+  h4 a {
+    color: $primary;
+  }
+
+  .subcategory.with-subcategories {
+    border: none;
+    border-left-width: 4px;
+    border-left-style: solid;
+    margin-bottom: 0.25em;
+
+    .category-title-link {
+      display: flex;
+      .category-logo {
+        flex: 1 0 auto;
+        margin: 0.25em 0.5em 0.5em 0;
+        --max-height: 40px;
+      }
+      .category-text-title {
+        order: 2;
+        line-height: $line-height-medium;
+        overflow: hidden;
+        word-wrap: break-word;
+      }
+    }
+
+    .subcategory-box-inner {
+      border: 1px solid $primary-low;
+      border-left: none;
+      padding: 0.75em 0.5em 0.4em 0.5em;
+    }
+
+    &:not(:last-of-type) {
+      margin-bottom: 1em;
+    }
+
+    .subcategory {
+      margin-bottom: 0.25em;
+    }
+  }
+
   .subcategories {
     display: flex;
     flex-flow: wrap;
@@ -135,11 +176,14 @@
       display: flex;
       align-items: center;
       @include ellipsis;
-      margin-right: 1em;
       margin-bottom: 0.6em;
+      .badge-wrapper {
+        overflow: hidden;
+      }
       .subcategory-image-placeholder {
         display: inline-block;
         margin-right: 0.6em;
+        flex: 1 0 auto;
       }
       .subcategory-link {
         min-width: 0;
@@ -147,8 +191,9 @@
       }
       .logo img {
         display: inline-block;
-        height: 20px;
-        width: 20px;
+        --height: 20px;
+        height: var(--height);
+        width: calc(var(--height) * var(--aspect-ratio));
         margin: 0;
       }
     }
@@ -210,7 +255,7 @@
       height: 0.76em;
       width: 0.76em;
       vertical-align: baseline;
-      margin-right: 0.15em;
+      margin-right: 0.1em;
     }
   }
   .category-description {