fix(2285): move star next to name in user profile

Author: ycanales

core/views.py

@@ -1798,7 +1798,6 @@ def get_context_data(self, **kwargs):
                 "role": "Maintainer",
                 "avatar_url": f"{settings.STATIC_URL}img/v3/demo_page/Avatar.png",
                 "badge": BadgeToken.STAR_TIER_5,
-                "achievement_count": 22,
                 "bio": "",
             },
             {
@@ -1807,7 +1806,6 @@ def get_context_data(self, **kwargs):
                 "role": "Author",
                 "avatar_url": f"{settings.STATIC_URL}img/v3/demo_page/Avatar.png",
                 "badge": BadgeToken.BOOST_DAY,
-                "achievement_count": 7,
                 "bio": "Boost Day contributor.",
             },
         ]

static/css/v3/user-profile.css

@@ -33,11 +33,14 @@
 
 /* ── Header: flex row with wrap ─────────────── */
 /*
-  Default (no bio): name takes full width,
+  Default (no bio): the name group takes full width,
   forcing role + badge to wrap onto a second line.
 
-  With bio: name shrinks to fit-content,
+  With bio: the name group shrinks to fit-content,
   so all items sit inline on one row.
+
+  The name group keeps the name and any star badge together,
+  so the star always stays next to the name.
 */
 
 .user-profile__header {
@@ -48,11 +51,15 @@
   row-gap: var(--space-s);
 }
 
-.user-profile__name {
+.user-profile__name-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-default);
+  min-width: 0;
   width: 100%;
 }
 
-.user-profile--has-bio .user-profile__name {
+.user-profile--has-bio .user-profile__name-group {
   width: auto;
 }
 

templates/v3/includes/_user_profile.html

@@ -25,17 +25,22 @@
 
   <div class="user-profile__content">
     <div class="user-profile__header">
-      {% if author.name %}
-        {% if author.profile_url %}
-          <a href="{{ author.profile_url }}" class="user-profile__name">{{ author.name }}</a>
-        {% else %}
-          <span class="user-profile__name">{{ author.name }}</span>
+      <span class="user-profile__name-group">
+        {% if author.name %}
+          {% if author.profile_url %}
+            <a href="{{ author.profile_url }}" class="user-profile__name">{{ author.name }}</a>
+          {% else %}
+            <span class="user-profile__name">{{ author.name }}</span>
+          {% endif %}
         {% endif %}
-      {% endif %}
+        {% if author.badge|slice:":5" == "star-" %}
+          {% include "v3/includes/_badge_v3.html" with token=author.badge label=author.badge_label size="small" only %}
+        {% endif %}
+      </span>
       {% if author.role %}
         <span class="user-profile__role">{{ author.role }}</span>
       {% endif %}
-      {% if author.badge %}
+      {% if author.badge and author.badge|slice:":5" != "star-" %}
         {% include "v3/includes/_badge_v3.html" with token=author.badge label=author.badge_label size="small" only %}
       {% endif %}
       {% if author.achievement_count %}