fix hugo callback

oauth/src/App.css

@@ -44,7 +44,7 @@ body {
 
 .oauth-header-content {
   display: flex;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: center;
   max-width: 800px;
   margin: 0 auto;
@@ -52,6 +52,10 @@ body {
   width: 100%;
 }
 
+.oauth-header-content:has(.oauth-user-profile) {
+  justify-content: space-between;
+}
+
 .oauth-app-title {
   font-size: 20px;
   font-weight: 800;
@@ -62,7 +66,80 @@ body {
   display: flex;
   gap: 8px;
   align-items: center;
-  width: 100%;
+  flex: 1;
+}
+
+/* When user is logged in, actions take normal space */
+.oauth-header-content:has(.oauth-user-profile) .oauth-header-actions {
+  flex: 0 0 auto;
+}
+
+/* OAuth User Profile in Header */
+.oauth-user-profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.profile-avatar-section {
+  flex-shrink: 0;
+}
+
+.profile-avatar-section .profile-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--border);
+}
+
+.profile-avatar-fallback {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--background-secondary);
+  border: 2px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-secondary);
+}
+
+.profile-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.profile-display-name {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profile-handle {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profile-did {
+  font-size: 11px;
+  color: var(--text-secondary);
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0.7;
 }
 
 /* Buttons */
@@ -128,6 +205,7 @@ body {
   padding: 0;
   gap: 0;
   width: 100%;
+  max-width: 400px;
 }
 
 .auth-section.search-bar-layout .handle-input {
@@ -465,7 +543,7 @@ body {
 }
 
 .user-message .message-content {
-  color: white;
+  color: #000;
 }
 
 .question-form {
@@ -647,6 +725,41 @@ body {
   .chat-container {
     height: 300px;
   }
+  
+  /* OAuth User Profile Mobile */
+  .oauth-user-profile {
+    gap: 8px;
+  }
+  
+  .profile-avatar-section .profile-avatar,
+  .profile-avatar-fallback {
+    width: 36px;
+    height: 36px;
+    font-size: 14px;
+  }
+  
+  .profile-display-name {
+    font-size: 14px;
+  }
+  
+  .profile-handle {
+    font-size: 12px;
+  }
+  
+  .profile-did {
+    font-size: 9px;
+  }
+  
+  .oauth-header-content {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+  
+  .oauth-header-actions {
+    width: 100%;
+    justify-content: center;
+  }
 }
 
 /* Avatar Styles */