fix responsive

thaian1234 · Dec 15, 2024 · 5c74d93 · 5c74d93
1 parent 6484f66
commit 5c74d93
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/app/(main)/search/page.tsx b/app/(main)/search/page.tsx
@@ -147,7 +147,7 @@ export default function SearchPage() {
 
     return (
         <section className="relative">
-            <div className="fixed right-10 flex min-w-72 items-center justify-center rounded-lg border border-slate-500 bg-black-1 p-3">
+            <div className="fixed right-10 z-50 flex min-w-72 items-center justify-center rounded-lg border border-slate-500 bg-black-1 p-3">
                 <CategoryFilter />
             </div>
             <Tabs defaultValue="All" className="w-full space-y-12 px-20">

diff --git a/lib/components/profile/search/user-preview-card.tsx b/lib/components/profile/search/user-preview-card.tsx
@@ -1,9 +1,9 @@
 import { Users } from "lucide-react";
 import { useRouter } from "next/navigation";
+import { useMediaQuery, useScreen } from "usehooks-ts";
 
 import { ROUTES } from "@/lib/configs/routes.config";
 import { FollowButton } from "@/lib/features/follow/components/follow-button";
-import { useAuth } from "@/lib/providers/auth-provider";
 
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
@@ -26,6 +26,7 @@ export function UserPreviewCard({
     isFollow,
 }: UserPreviewCardProps) {
     const router = useRouter();
+    const desktopScreen = useMediaQuery("(min-width: 1280px)");
 
     const handleNavigateLive = () => {
         router.push(ROUTES.STREAM_PAGE(username));
@@ -54,9 +55,19 @@ export function UserPreviewCard({
                                 <Users className="mr-1 h-4 w-4" />
                                 <span>{followers} Followers</span>
                             </div>
+                            {!desktopScreen && (
+                                <div className="mt-2">
+                                    <FollowButton
+                                        followingId={id}
+                                        isFollowed={isFollow}
+                                    />
+                                </div>
+                            )}
                         </div>
                     </div>
-                    <FollowButton followingId={id} isFollowed={isFollow} />
+                    {desktopScreen && (
+                        <FollowButton followingId={id} isFollowed={isFollow} />
+                    )}
                 </div>
             </CardContent>
         </Card>