fix: adds conditional small class to price ranges

src/components/course/CourseSidebarPrice.jsx

@@ -27,6 +27,7 @@ const CourseSidebarPrice = () => {
     return <Skeleton containerTestId="course-price-skeleton" height={24} />;
   }
   const originalPriceDisplay = getContentPriceDisplay(coursePrice.listRange);
+  const hasPriceRange = coursePrice.listRange.length > 1;
   const showOrigPrice = !enterpriseCustomer.hideCourseOriginalPrice;
   const crossedOutOriginalPrice = (
     <del>
@@ -36,7 +37,8 @@ const CourseSidebarPrice = () => {
           defaultMessage="Priced reduced from:"
           description="Message to indicate that the price has been reduced."
         />
-      </span>${originalPriceDisplay} {currency}
+      </span>
+      ${originalPriceDisplay} {currency}
     </del>
   );
 
@@ -66,7 +68,9 @@ const CourseSidebarPrice = () => {
   if (!hasDiscountedPrice && canRequestSubsidy) {
     return (
       <span style={{ whiteSpace: 'pre-wrap' }} data-testid="browse-and-request-pricing">
-        <s>${originalPriceDisplay} {currency}</s><br />
+        <s>
+          ${originalPriceDisplay} {currency}
+        </s><br />
         <FormattedMessage
           id="enterprise.course.about.course.sidebar.price.free.when.approved"
           defaultMessage="Free to me{br}(when approved)"
@@ -112,6 +116,7 @@ const CourseSidebarPrice = () => {
     }
   }
   const discountedPriceDisplay = `${getContentPriceDisplay(coursePrice.discounted)} ${currency}`;
+  const hasDiscountedPriceRange = coursePrice.discounted.length > 1;
   return (
     <>
       <div className={classNames({ 'mb-2': coursePrice.discounted > 0 || showOrigPrice })}>
@@ -125,7 +130,8 @@ const CourseSidebarPrice = () => {
                 defaultMessage="Discounted price:"
                 description="Message to indicate that the price has been discounted."
               />
-            </span>${discountedPriceDisplay}
+            </span>
+            ${discountedPriceDisplay}
           </>
         )}
       </div>