fix: [AA-1079] space separators for related programs (#29350)

fix css for spacing between related programs in course descriptions.

lms/static/sass/multicourse/_dashboard.scss

@@ -1173,38 +1173,43 @@
       padding: $baseline/2;
       margin-bottom: 0;
 
-      .related-programs-preface {
+      .related-programs-preface  {
         @include float(left);
 
         margin: 0 $baseline/2;
         font-weight: bold;
       }
 
-      ul {
+      .related-program-container {
         display: inline;
         padding: 0;
         margin: 0;
       }
 
-      li {
-        @include float(left);
-
-        display: inline;
-        padding: 0 0.5em;
-        border-right: 1px solid;
-
-        .category-icon {
+      .related-program-element {
+        &.important-element {
           @include float(left);
-          @include margin-right($baseline/4);
 
-          margin-top: ($baseline/10);
-          background-color: transparent;
-          background-size: 100%;
-          width: ($baseline*0.7);
-          height: ($baseline*0.7);
+          display: inline;
+          padding: 0 0.5em !important;
+
+          .category-icon {
+            @include float(left);
+            @include margin-right($baseline/4);
+
+            margin-top: ($baseline/10);
+            background-color: transparent;
+            background-size: 100%;
+            width: ($baseline*0.7);
+            height: ($baseline*0.7);
+          }
         }
       }
 
+      li {
+        border-right: 1px solid;
+      }
+
       // Remove separator from last list item.
       li:last-child {
         border: 0;

lms/templates/dashboard/_dashboard_course_listing.html

@@ -345,9 +345,10 @@ from lms.djangoapps.experiments.utils import UPSELL_TRACKING_FLAG
       % if related_programs:
         <div class="message message-related-programs is-shown">
           <span class="related-programs-preface" tabindex="0">${_('Related Programs')}:</span>
-          <ul>
+          <ul class="related-program-container" >
             % for program in related_programs:
-            <li>
+              ## intentionally using multiple classnames here to bump up specificity
+            <li class="related-program-element important-element">
               <span class="category-icon ${program['type'].lower()}-icon" aria-hidden="true"></span>
               <span><a href="${program['detail_url']}">${u'{title} {type}'.format(title=program['title'], type=program['type'])}</a></span>
             </li>