Merge branch 'responsive' of github-personal:thaian1234/livestream-ap…

…p into responsive
thaian1234 · Dec 15, 2024 · 39a3eda · 39a3eda
2 parents 5c74d93 + 41d2d41
commit 39a3eda
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/app/(main)/search/page.tsx b/app/(main)/search/page.tsx
@@ -150,7 +150,7 @@ export default function SearchPage() {
             <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">
+            <Tabs defaultValue="All" className="w-full space-y-12 px-[70px]">
                 <TabsList className="mb-8 grid w-[200px] grid-cols-2 space-x-4 bg-transparent">
                     {TABS.map((tabName, index) => (
                         <TabsTrigger
@@ -167,7 +167,7 @@ export default function SearchPage() {
                         {!selectedIds?.length && users && (
                             <>
                                 <p className="text-2xl">User</p>
-                                <div className="flex max-w-[700px] flex-col">
+                                <div className="flex flex-col">
                                     <UserPreview users={users} />
                                 </div>
                             </>

diff --git a/lib/components/profile/search/user-preview-card.tsx b/lib/components/profile/search/user-preview-card.tsx
@@ -32,15 +32,15 @@ export function UserPreviewCard({
         router.push(ROUTES.STREAM_PAGE(username));
     };
     return (
-        <Card className="w-full overflow-hidden py-4 transition-all duration-300 ease-in-out hover:bg-accent/50 hover:shadow-lg">
+        <Card className="w-[300px] overflow-hidden px-0 py-4 transition-all duration-300 ease-in-out hover:bg-accent/50 hover:shadow-lg lg:w-[520px] lg:px-4 xl:w-[700px]">
             <CardContent className="px-6">
-                <div className="flex cursor-pointer items-center justify-between">
+                <div className="flex cursor-pointer flex-col items-end justify-between lg:flex-row lg:items-center">
                     <div
                         className="flex flex-grow items-center space-x-6"
                         onClick={handleNavigateLive}
                     >
                         <UserAvatar imageUrl={imageUrl} size="xl" />
-                        <div className="min-w-0 flex-grow">
+                        <div className="flex-grow">
                             <div className="mb-2 flex items-center space-x-2">
                                 <h3 className="line-clamp-1 text-lg font-semibold transition-colors duration-300 ease-in-out hover:text-primary hover:underline">
                                     {username}