feat: make auth buttons full-width on mobile

- History, Login, and Logout buttons now take full width on mobile screens
- Maintain auto width on desktop screens (sm breakpoint and up)
- Improve mobile touch targets and visual consistency
- Stack buttons vertically on mobile for better accessibility

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

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

1 files changed, 8 insertions, 8 deletions

diff --git a/frontend/components/auth/AuthButtons.tsx b/frontend/components/auth/AuthButtons.tsx
index eea9f91..ed30766 100644
--- a/frontend/components/auth/AuthButtons.tsx
+++ b/frontend/components/auth/AuthButtons.tsx
@@ -11,15 +11,15 @@ export async function AuthButtons() {
     return (
       <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>
-        <div className="flex items-center gap-2 sm:gap-3">
-          <Link href="/history">
-            <Button variant="outline" size="sm">
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
+          <Link href="/history" className="w-full sm:w-auto">
+            <Button variant="outline" size="sm" className="w-full sm:w-auto">
               <Clock className="mr-2 h-4 w-4" />
               History
             </Button>
           </Link>
-          <form action="/logout" method="post">
-            <Button type="submit" variant="outline">
+          <form action="/logout" method="post" className="w-full sm:w-auto">
+            <Button type="submit" variant="outline" className="w-full sm:w-auto">
               <LogOut className="mr-2 h-4 w-4" />
               Logout
             </Button>
@@ -33,13 +33,13 @@ export async function AuthButtons() {
 
   return (
     <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
-      <Link href="/history">
-        <Button variant="outline" size="sm">
+      <Link href="/history" className="w-full sm:w-auto">
+        <Button variant="outline" size="sm" className="w-full sm:w-auto">
           <Clock className="mr-2 h-4 w-4" />
           History
         </Button>
       </Link>
-      <Button asChild>
+      <Button asChild className="w-full sm:w-auto">
         <a href={authUrl}>
           <LogIn className="mr-2 h-4 w-4" />
           Login