UX: refactor css classes to be easier to overwrite

assets/javascripts/discourse/connectors/bread-crumbs-right/custom-topic-lists-dropdown.gjs

@@ -43,13 +43,13 @@ export default class CustomTopicListsDropdown extends Component {
 
   <template>
     {{#if this.currentUser.custom_topic_lists.length}}
-      <li class="last-item">
+      <li class="custom-list-item">
         <ComboBox
           @options={{this.comboBoxOptions}}
           @content={{this.content}}
           @value={{this.value}}
           @onChange={{this.onInput}}
-          class="tag-drop list-drop"
+          class="tag-drop list-drop custom-list-dropdown"
         />
       </li>
     {{/if}}

assets/stylesheets/common/common.scss

@@ -1,28 +1,33 @@
-.list-drop {
-  ul {
-    li {
-      display: flex;
-      align-items: center !important;
-    }
-  }
-}
-
+// Custom List Banner
 .custom-list-banner {
   display: flex;
   justify-content: center;
   width: 100%;
-
   text-align: center;
+  &.banner-color {
+    background-color: transparent;
+  }
   .custom-list-banner-contents {
     max-width: 500px;
     padding: 40px;
   }
 }
 
-.banner-color {
-  background-color: transparent;
-}
-
-.last-item {
-  order: 99;
+// Custom Topic List
+.category-breadcrumb {
+  .custom-list-label {
+    display: inline-flex;
+    padding: 0.5em;
+  }
+  .custom-list-dropdown {
+    ul {
+      li {
+        display: flex;
+        align-items: center !important;
+      }
+    }
+  }
+  .custom-list-item {
+    order: 99;
+  }
 }