@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.34 → 0.2.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rakeyshgidwani/roger-ui-bank-theme-stan-design",
-  "version": "0.2.34",
+  "version": "0.2.36",
   "description": "Roger UI stan-design theme - Complete design system with components, styles, and utilities",
   "keywords": [
     "design-system",

package/src/components/ui/navigation/user-menu.tsx

@@ -36,19 +36,21 @@ const UserMenuHeader: React.FC<{
         <UserAvatar user={user} size="lg" />
       </div>
       <div className="user-menu__header-info">
-        <div className="user-menu__header-name">
-          {user.fullName || user.firstName || 'User'}
+        <div className="user-menu__header-name-row">
+          <div className="user-menu__header-name">
+            {user.fullName || user.firstName || 'User'}
+          </div>
+          {subscription && (
+            <div className="user-menu__header-subscription">
+              <SubscriptionBadge subscription={subscription} size="sm" />
+            </div>
+          )}
         </div>
         {user.email && (
           <div className="user-menu__header-email">
             {user.email}
           </div>
         )}
-        {subscription && (
-          <div className="user-menu__header-subscription">
-            <SubscriptionBadge subscription={subscription} size="sm" />
-          </div>
-        )}
       </div>
     </div>
   );

package/src/index.css

@@ -1,13 +1,16 @@
 /* Import organized design system */
 @import './styles/index.css';
 
-/* Existing CSS styles are included inline below */
+/* Direct import of design system variables to test */
+@import './styles/generated-theme-variables.css';
 
-/* Tailwind CSS */
+/* Tailwind CSS - Load after imports */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/* Existing CSS styles are included inline below */
+
 /* Advanced Border Radius System */
 :root {
   --radius: 0.5rem;

package/src/styles/components/navigation/user-menu.css

@@ -189,28 +189,36 @@
   min-width: 0;
 }
 
+.user-menu__header-name-row {
+  display: flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-sm);
+  margin-bottom: var(--cs-spacing-scale-xs);
+}
+
 .user-menu__header-name {
   font-size: var(--cs-fonts-primary-sizes-md);
   font-weight: var(--cs-fonts-primary-weights-semibold);
   color: var(--user-menu-text-primary);
-  margin-bottom: var(--cs-spacing-scale-xs);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
 }
 
 .user-menu__header-email {
   font-size: var(--cs-fonts-primary-sizes-sm);
   color: var(--user-menu-text-muted);
-  margin-bottom: var(--cs-spacing-scale-sm);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .user-menu__header-subscription {
+  flex-shrink: 0;
   display: flex;
-  justify-content: flex-start;
+  align-items: center;
 }
 
 /* ============================================================================