fix: collection header (#1264)

Author: sailwebs

web/src/app/workspace/collections/[collectionId]/collection-header.tsx

@@ -160,8 +160,11 @@ export const CollectionHeader = ({ className }: { className?: string }) => {
             </DropdownMenu>
           </CardAction>
         </CardHeader>
+        <CardDescription className="mb-4 px-4">
+          {collection.description || 'No description available'}
+        </CardDescription>
         <Separator />
-        <div className="bg-accent/50 flex flex-row gap-4 rounded-b-xl px-4">
+        <div className="bg-accent/50 flex flex-row gap-2 rounded-b-xl px-4">
           <Button
             asChild
             data-active={Boolean(pathname.match(urls.documents))}

web/src/app/workspace/collections/collection-list.tsx

@@ -70,14 +70,11 @@ export const CollectionList = ({
                   }
                   target={collection.subscription_id ? '_blank' : '_self'}
                 >
-                  <Card className="hover:bg-accent/30 h-34 cursor-pointer rounded-md">
+                  <Card className="hover:bg-accent/30 cursor-pointer gap-2 rounded-md">
                     <CardHeader className="px-4">
                       <CardTitle className="h-5 truncate">
                         {collection.title}
                       </CardTitle>
-                      <CardDescription className="h-5 truncate">
-                        {collection.description || 'No description available'}
-                      </CardDescription>
                       <CardAction className="flex flex-row items-center gap-4">
                         {collection.subscription_id ? (
                           <Badge>Subscribed</Badge>
@@ -92,6 +89,9 @@ export const CollectionList = ({
                         )}
                       </CardAction>
                     </CardHeader>
+                    <CardDescription className="mb-4 truncate px-4">
+                      {collection.description || 'No description available'}
+                    </CardDescription>
                     <CardFooter className="justify-between px-4 text-xs">
                       <div className="text-muted-foreground">
                         {collection.created && (

web/src/app/workspace/market/collections/[collectionId]/collection-header.tsx

@@ -62,11 +62,8 @@ export const CollectionHeader = ({
   return (
     <PageContent className={cn('flex flex-col gap-4 pb-0', className)}>
       <Card className="gap-0 p-0">
-        <CardHeader className="p-4">
-          <CardTitle className="text-2xl">{collection.title}</CardTitle>
-          <CardDescription>
-            {collection.description || 'No description available'}
-          </CardDescription>
+        <CardHeader className="p-4 pb-0">
+          <CardTitle className="mb-0 text-2xl">{collection.title}</CardTitle>
           <CardAction className="text-muted-foreground flex flex-row items-center gap-4 text-xs">
             {isOwner ? (
               <Badge>Mine</Badge>
@@ -78,7 +75,6 @@ export const CollectionHeader = ({
                 </div>
               </div>
             )}
-
             <Button
               variant="outline"
               size="sm"
@@ -92,8 +88,11 @@ export const CollectionHeader = ({
             </Button>
           </CardAction>
         </CardHeader>
+        <CardDescription className="mb-4 px-4">
+          {collection.description || 'No description available'}
+        </CardDescription>
         <Separator />
-        <div className="bg-accent/50 flex flex-row gap-4 rounded-b-xl px-4">
+        <div className="bg-accent/50 flex flex-row gap-2 rounded-b-xl px-4">
           <Button
             asChild
             data-active={Boolean(

web/src/app/workspace/market/collections/collection-list.tsx

@@ -58,14 +58,12 @@ export const CollectionList = ({
                 key={collection.id}
                 href={`/workspace/market/collections/${collection.id}/documents`}
               >
-                <Card className="hover:bg-accent/30 h-34 cursor-pointer rounded-md">
+                <Card className="hover:bg-accent/30 cursor-pointer gap-2 rounded-md">
                   <CardHeader className="px-4">
                     <CardTitle className="h-5 truncate">
                       {collection.title}
                     </CardTitle>
-                    <CardDescription className="h-5 truncate">
-                      {collection.description || 'No description available'}
-                    </CardDescription>
+
                     <CardAction className="flex flex-row gap-2">
                       {/* {isOwner && (
                         <Button
@@ -83,6 +81,9 @@ export const CollectionList = ({
                       )} */}
                     </CardAction>
                   </CardHeader>
+                  <CardDescription className="mb-4 truncate px-4">
+                    {collection.description || 'No description available'}
+                  </CardDescription>
                   <CardFooter className="text-muted-foreground justify-between px-4 text-sm">
                     {isOwner ? (
                       <Badge>Mine</Badge>