feat(sign-in): make auth buttons responsive with icon-only mobile affordance

src/components/sign-in.tsx

@@ -5,9 +5,11 @@ import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { signOut, useSession } from "@/lib/auth-client";
 
 export default function SignIn() {
+	const isMobile = useIsMobile();
 	const { data: session, isPending } = useSession();
 	const router = useRouter();
 
@@ -27,26 +29,28 @@ export default function SignIn() {
 	if (session?.user) {
 		return (
 			<Button
+				aria-label={session?.user ? "Sign out" : "Sign in"}
 				onClick={handleSignOut}
 				variant="ghost"
-				size="sm"
+				size={isMobile ? "icon" : "sm"}
 				className="text-xs text-muted-foreground"
 			>
 				<LogOut className="h-3.5 w-3.5" />
-				Sign Out
+				{isMobile ? null : "Sign Out"}
 			</Button>
 		);
 	}
 
 	return (
 		<Button
+			aria-label={session?.user ? "Sign out" : "Sign in"}
 			onClick={() => router.push("/auth/signin")}
 			variant="ghost"
-			size="sm"
+			size={isMobile ? "icon" : "sm"}
 			className="text-xs"
 		>
 			<LogIn className="h-3.5 w-3.5" />
-			Sign In
+			{isMobile ? null : "Sign In"}
 		</Button>
 	);
 }

tests/sign-in.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+
+describe("sign-in header affordance", () => {
+	test("auth control switches to an icon-only mobile affordance via useIsMobile", () => {
+		const source = readFileSync("src/components/sign-in.tsx", "utf8");
+
+		expect(source).toContain("useIsMobile");
+		expect(source).toContain('size={isMobile ? "icon" : "sm"}');
+		expect(source).toContain('aria-label={session?.user ? "Sign out" : "Sign in"}');
+	});
+});