common/static/common/styles/_extension.sass

@@ -278,6 +278,7 @@
   align-items: center
   color: var(--color-text-secondary)
   font-size: var(--fs-sm)
+  line-height: var(--lh-sm)
   margin: auto 0 0 0
 
   &+.ext-list-details

extensions/templates/extensions/components/card.html

@@ -33,7 +33,7 @@
     <ul class="ext-list-details mt-1">
       {% if extension.average_score %}
       <li>
-        <a href="{{ extension.get_ratings_url }}">
+        <a class="align-items-center d-flex" href="{{ extension.get_ratings_url }}">
         {% include "ratings/components/average.html" with score=extension.average_score %}
         ({{ extension.text_ratings_count|int_compact }})
         </a>

extensions/templates/extensions/detail.html

@@ -129,7 +129,7 @@
                   <dt>{% trans 'Rating' %}</dt>
                   <dd>
                     {% if extension.average_score %}
-                    <a href="{{ extension.get_ratings_url }}" class="text-decoration-none">
+                    <a href="{{ extension.get_ratings_url }}" class="align-items-center d-flex stars-helper-detail text-decoration-none">
                       {% include "ratings/components/average.html" with score=extension.average_score %}
                       ({{ extension.ratings.listed.count }})
                     </a>

ratings/static/ratings/styles/_stars.sass

@@ -51,6 +51,7 @@
   -webkit-mask-size: var(--star-size) var(--star-size)
   mask-size: var(--star-size) var(--star-size)
   text-align: left
+  transform: translateY(-.2rem)
   width: var(--stars-number)
 
   span

ratings/templates/ratings/components/average.html

@@ -2,6 +2,6 @@
 
 {% blocktranslate asvar title with score=score %}Rated {{ score }} out of 5{% endblocktranslate %}
 
-<span class="stars{% if size %} {{ size }}{% endif %}" title="{{ title }}">
+<span class="stars me-1 {% if size %} {{ size }}{% endif %}" title="{{ title }}">
   <span style="width: {% widthratio score 5 100 %}%"></span>
 </span>