From 3e3c8056b14c76465d6e0fb336973f570da9c5f5 Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Tue, 21 Apr 2026 23:23:20 -0400
Subject: [PATCH] feat(sign-in): make auth buttons responsive with icon-only
 mobile affordance

---
 src/components/sign-in.tsx | 12 ++++++++----
 tests/sign-in.test.ts      | 12 ++++++++++++
 2 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 tests/sign-in.test.ts

diff --git a/src/components/sign-in.tsx b/src/components/sign-in.tsx
index 7edd081..7bc77a8 100644
--- a/src/components/sign-in.tsx
+++ b/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>
 	);
 }
diff --git a/tests/sign-in.test.ts b/tests/sign-in.test.ts
new file mode 100644
index 0000000..5d4c65f
--- /dev/null
+++ b/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"}');
+	});
+});