fixed the UI for the impersonation User menu

nonpacks/static/css/style.css

@@ -2628,10 +2628,13 @@ a.deletelink {
 
 /* ========== Impersonation ========== */
 .impersonate-chip {
+    position: absolute;
+    right: 56px;                 /* 48px avatar + 8px gap */
+    top: 50%;
+    transform: translateY(-50%);
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    margin-right: 8px;
     padding: 3px 10px 3px 4px;
     border-radius: 999px;
     background: var(--md-sys-color-surface-variant);
@@ -2640,7 +2643,7 @@ a.deletelink {
     font-size: 0.72rem;
     font-weight: 500;
     text-decoration: none;
-    vertical-align: middle;
+    white-space: nowrap;
 }
 .impersonate-chip:hover {
     border-color: var(--md-sys-color-primary);
@@ -2659,14 +2662,6 @@ a.deletelink {
     font-size: 0.65rem;
     flex: none;
 }
-.user-info {
-    padding: 4px 12px;
-    font-size: 0.75rem;
-    color: var(--md-sys-color-on-surface-variant);
-}
-.user-info a {
-    color: var(--md-sys-color-primary);
-}
 
 /* Users directory */
 .user-grid {

nonpacks/templates/base.html

@@ -74,12 +74,7 @@
                 <a href="{% url 'profiles:user_profile' request.user.username %}" class="user-edit">
                     <i class="fas fa-user-circle"></i> {{ user.username }}
                 </a>
-                <div class="user-info">
-                    {% if impersonating %}
-                        <i class="fas fa-mask"></i> acting from
-                        <a href="{% url 'profiles:user_profile' impersonator.username %}"><strong>{{ impersonator.username }}</strong></a>
-                    {% endif %}
-                </div>
+                <div class="user-info"></div>
                 <a href="{% url 'profiles:account' %}">
                     <i class="fas fa-user-cog"></i> Account Settings
                 </a>