From 2c53acbac53a2597fbb254a4cf569d1ae633144b Mon Sep 17 00:00:00 2001
From: Aslam H <iupin5212@gmail.com>
Date: Mon, 9 Sep 2024 07:18:44 +0700
Subject: [PATCH] chore: tweak responsive header and link

---
 web/components/routes/link/header.tsx             | 4 ++--
 web/components/routes/link/partials/link-item.tsx | 2 +-
 web/components/routes/topics/detail/Header.tsx    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/components/routes/link/header.tsx b/web/components/routes/link/header.tsx
index 4c3fd992..3fa3d863 100644
--- a/web/components/routes/link/header.tsx
+++ b/web/components/routes/link/header.tsx
@@ -26,11 +26,11 @@ export const LinkHeader = React.memo(() => {
 
 	return (
 		<>
-			<ContentHeader className="px-6 py-5 max-lg:px-4">
+			<ContentHeader className="px-6 max-lg:px-4 lg:py-5">
 				<div className="flex min-w-0 shrink-0 items-center gap-1.5">
 					<SidebarToggleButton />
 					<div className="flex min-h-0 items-center">
-						<span className="truncate text-left text-xl font-bold">Links</span>
+						<span className="truncate text-left font-bold lg:text-xl">Links</span>
 					</div>
 				</div>
 
diff --git a/web/components/routes/link/partials/link-item.tsx b/web/components/routes/link/partials/link-item.tsx
index 0ff605b7..e79f5d7e 100644
--- a/web/components/routes/link/partials/link-item.tsx
+++ b/web/components/routes/link/partials/link-item.tsx
@@ -92,7 +92,7 @@ export const LinkItem: React.FC<LinkItemProps> = ({
 			onKeyDown={handleKeyDown}
 			className={cn(
 				"relative cursor-default outline-none",
-				"grid grid-cols-[auto_1fr_auto] items-center gap-x-2 px-2 py-2 sm:px-4 sm:py-2",
+				"grid grid-cols-[auto_1fr_auto] items-center gap-x-2 py-2 max-lg:px-4 sm:px-5 sm:py-2",
 				{
 					"bg-muted-foreground/10": isActive,
 					"hover:bg-muted/50": !isActive
diff --git a/web/components/routes/topics/detail/Header.tsx b/web/components/routes/topics/detail/Header.tsx
index 461f3176..0987e9a0 100644
--- a/web/components/routes/topics/detail/Header.tsx
+++ b/web/components/routes/topics/detail/Header.tsx
@@ -93,7 +93,7 @@ export const TopicDetailHeader = React.memo(function TopicDetailHeader({ topic }
 			<div className="flex min-w-0 shrink-0 items-center gap-1.5">
 				<SidebarToggleButton />
 				<div className="flex min-h-0 items-center">
-					<span className="truncate text-left text-xl font-bold">{topic.prettyName}</span>
+					<span className="truncate text-left font-bold lg:text-xl">{topic.prettyName}</span>
 				</div>
 			</div>