feat: enhance auth buttons mobile layout and make History public

- Stack user email above History/Logout buttons on mobile
- Show History button for all users (authenticated and non-authenticated)
- Maintain horizontal layout on desktop screens
- Improve mobile user experience with better button spacing

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

1 files changed, 29 insertions, 19 deletions

diff --git a/frontend/components/auth/AuthButtons.tsx b/frontend/components/auth/AuthButtons.tsx
index 474593d..eea9f91 100644
--- a/frontend/components/auth/AuthButtons.tsx
+++ b/frontend/components/auth/AuthButtons.tsx
@@ -9,20 +9,22 @@ export async function AuthButtons() {
 
   if (user.isLoggedIn) {
     return (
-      <div className="flex items-center gap-3">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
         <span className="text-sm text-muted-foreground">{user.email}</span>
-        <Link href="/history">
-          <Button variant="outline" size="sm">
-            <Clock className="mr-2 h-4 w-4" />
-            History
-          </Button>
-        </Link>
-        <form action="/logout" method="post">
-          <Button type="submit" variant="outline">
-            <LogOut className="mr-2 h-4 w-4" />
-            Logout
-          </Button>
-        </form>
+        <div className="flex items-center gap-2 sm:gap-3">
+          <Link href="/history">
+            <Button variant="outline" size="sm">
+              <Clock className="mr-2 h-4 w-4" />
+              History
+            </Button>
+          </Link>
+          <form action="/logout" method="post">
+            <Button type="submit" variant="outline">
+              <LogOut className="mr-2 h-4 w-4" />
+              Logout
+            </Button>
+          </form>
+        </div>
       </div>
     )
   }
@@ -30,11 +32,19 @@ export async function AuthButtons() {
   const authUrl = `${Auth_tinyauth_public_endpoint()}/login`
 
   return (
-    <Button asChild>
-      <a href={authUrl}>
-        <LogIn className="mr-2 h-4 w-4" />
-        Login
-      </a>
-    </Button>
+    <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
+      <Link href="/history">
+        <Button variant="outline" size="sm">
+          <Clock className="mr-2 h-4 w-4" />
+          History
+        </Button>
+      </Link>
+      <Button asChild>
+        <a href={authUrl}>
+          <LogIn className="mr-2 h-4 w-4" />
+          Login
+        </a>
+      </Button>
+    </div>
   )
 }