From 34770a3145c5667fe4130e67c9d03dea1eb6af7b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 1 Jun 2025 11:00:39 -0500
Subject: [PATCH] LoginArea display and context improvements

---
 CONTEXT.md                        |  6 ++++--
 src/components/auth/LoginArea.tsx | 13 +++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/CONTEXT.md b/CONTEXT.md
index 61dd5e2..5861318 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -210,13 +210,15 @@ function MyComponent() {
     <div>
       {/* other components ... */}
 
-      <LoginArea />
+      <LoginArea className="max-w-60" />
     </div>
   );
 }
 ```
 
-The `LoginArea` component displays a "Log in" button when the user is logged out, and changes to an account switcher once the user is logged in. It handles all the login-related UI and interactions internally, including displaying login dialogs and switching between accounts. It should not be wrapped in any conditional logic.
+The `LoginArea` component handles all the login-related UI and interactions, including displaying login dialogs and switching between accounts. It should not be wrapped in any conditional logic.
+
+`LoginArea` displays a "Log in" button when the user is logged out, and changes to an account switcher once the user is logged in. It is an inline-flex element by default. To make it expand to the width of its container, you can pass a className like `flex` (to make it a block element) or `w-full`. If it is left as inline-flex, it's recommended to set a max width.
 
 ### `npub`, `naddr`, and other Nostr addresses
 
diff --git a/src/components/auth/LoginArea.tsx b/src/components/auth/LoginArea.tsx
index 09fdf83..40d2f53 100644
--- a/src/components/auth/LoginArea.tsx
+++ b/src/components/auth/LoginArea.tsx
@@ -1,15 +1,20 @@
 // NOTE: This file is stable and usually should not be modified.
 // It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { User } from 'lucide-react';
 import { Button } from '@/components/ui/button.tsx';
 import LoginDialog from './LoginDialog';
 import SignupDialog from './SignupDialog';
 import { useLoggedInAccounts } from '@/hooks/useLoggedInAccounts';
 import { AccountSwitcher } from './AccountSwitcher';
+import { cn } from '@/lib/utils';
 
-export function LoginArea() {
+export interface LoginAreaProps {
+  className?: string;
+}
+
+export function LoginArea({ className }: LoginAreaProps) {
   const { currentUser } = useLoggedInAccounts();
   const [loginDialogOpen, setLoginDialogOpen] = useState(false);
   const [signupDialogOpen, setSignupDialogOpen] = useState(false);
@@ -20,7 +25,7 @@ export function LoginArea() {
   };
 
   return (
-    <div className="flex items-center justify-center max-w-60">
+    <div className={cn("inline-flex items-center justify-center", className)}>
       {currentUser ? (
         <AccountSwitcher onAddAccountClick={() => setLoginDialogOpen(true)} />
       ) : (
@@ -29,7 +34,7 @@ export function LoginArea() {
           className='flex items-center gap-2 px-4 py-2 rounded-full bg-primary text-primary-foreground w-full font-medium transition-all hover:bg-primary/90 animate-scale-in'
         >
           <User className='w-4 h-4' />
-          <span>Log in</span>
+          <span className='truncate'>Log in</span>
         </Button>
       )}