fix

oauth/src/App.css

@@ -44,7 +44,7 @@ body {
 
 .oauth-header-content {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   max-width: 800px;
   margin: 0 auto;
@@ -52,10 +52,6 @@ body {
   width: 100%;
 }
 
-.oauth-header-content:has(.oauth-user-profile) {
-  justify-content: space-between;
-}
-
 .oauth-app-title {
   font-size: 20px;
   font-weight: 800;
@@ -67,11 +63,7 @@ body {
   gap: 8px;
   align-items: center;
   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;
+  justify-content: flex-end;
 }
 
 /* OAuth User Profile in Header */

oauth/src/App.jsx

@@ -47,6 +47,16 @@ export default function App() {
       }
     }
 
+    // Notify blog about authentication status
+    const dispatchAuthStatus = () => {
+      window.dispatchEvent(new CustomEvent('oauthAuthStatus', {
+        detail: {
+          isAuthenticated: !!user,
+          user: user
+        }
+      }))
+    }
+
     // Listen for questions from blog
     window.addEventListener('postAIQuestion', handleAIQuestion)
 
@@ -55,6 +65,9 @@ export default function App() {
       dispatchAIProfileLoaded()
     }
 
+    // Dispatch auth status whenever user changes
+    dispatchAuthStatus()
+
     return () => {
       window.removeEventListener('postAIQuestion', handleAIQuestion)
     }

oauth/src/components/AuthButton.jsx

@@ -25,27 +25,9 @@ export default function AuthButton({ user, onLogin, onLogout, loading }) {
 
   if (user) {
     return (
-      <div className="user-section" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-        {user.avatar && (
-          <img 
-            src={user.avatar} 
-            alt="Profile" 
-            className="user-avatar"
-            style={{ width: '24px', height: '24px' }}
-          />
-        )}
-        <div>
-          <div className="user-display-name" style={{ fontSize: '14px', fontWeight: '700' }}>
-            {user.displayName}
-          </div>
-          <div className="user-handle" style={{ fontSize: '12px' }}>
-            @{user.handle}
-          </div>
-        </div>
-        <button onClick={onLogout} className="btn btn-danger btn-sm">
-          ログアウト
-        </button>
-      </div>
+      <button onClick={onLogout} className="btn btn-danger btn-sm">
+        ログアウト
+      </button>
     )
   }