Merge remote-tracking branch 'origin/master' into dev

autogpt_platform/frontend/src/app/(platform)/marketplace/components/AgentsSection/AgentsSection.tsx

@@ -47,7 +47,7 @@ export function AgentsSection({
           </div>
         ) : null}
         {!displayedAgents || displayedAgents.length === 0 ? (
-          <Text variant="body" className="text-center text-gray-500">
+          <Text variant="body" className="ml-4 mt-8 text-gray-500">
             No agents found
           </Text>
         ) : (

autogpt_platform/frontend/src/app/(platform)/marketplace/components/FeaturedSection/FeaturedSection.tsx

@@ -10,6 +10,7 @@ import {
   CarouselPrevious,
 } from "@/components/__legacy__/ui/carousel";
 import { Text } from "@/components/atoms/Text/Text";
+import { cn } from "@/lib/utils";
 import { SparkleIcon } from "@phosphor-icons/react";
 import Link from "next/link";
 import { FeaturedAgentCard } from "../FeaturedAgentCard/FeaturedAgentCard";
@@ -68,8 +69,13 @@ export const FeaturedSection = ({ featuredAgents }: FeaturedSectionProps) => {
           <div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-[rgb(246,247,248)] to-transparent" />
           <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-[rgb(246,247,248)] to-transparent" />
         </div>
-        <div className="relative mt-2">
-          <CarouselIndicator className="-mt-6 ml-8" />
+        <div
+          className={cn(
+            "relative -mt-2",
+            featuredAgents.length === 3 && "md:hidden",
+          )}
+        >
+          <CarouselIndicator className="relative top-2 ml-8" />
           <CarouselPrevious
             afterClick={handlePrevSlide}
             className="right-14 h-10 w-10"

autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx

@@ -5,16 +5,11 @@ import Avatar, {
   AvatarFallback,
   AvatarImage,
 } from "@/components/atoms/Avatar/Avatar";
-import { Text } from "@/components/atoms/Text/Text";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/atoms/Tooltip/BaseTooltip";
+import { OverflowText } from "@/components/atoms/OverflowText/OverflowText";
 import { Skeleton } from "@/components/atoms/Skeleton/Skeleton";
+import { Text } from "@/components/atoms/Text/Text";
 import Image from "next/image";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { AddToLibraryButton } from "../AddToLibraryButton/AddToLibraryButton";
 
 interface Props {
@@ -48,13 +43,6 @@ export function StoreCard({
 }: Props) {
   const [imageError, setImageError] = useState(false);
   const [imageLoaded, setImageLoaded] = useState(false);
-  const titleRef = useRef<HTMLSpanElement>(null);
-  const [isTitleTruncated, setIsTitleTruncated] = useState(false);
-
-  function checkTitleOverflow() {
-    const el = titleRef.current;
-    if (el) setIsTitleTruncated(el.scrollHeight > el.clientHeight);
-  }
 
   const handleClick = () => {
     onClick();
@@ -62,7 +50,7 @@ export function StoreCard({
 
   return (
     <div
-      className="relative flex h-[25rem] w-full max-w-md cursor-pointer flex-col items-start rounded-2xl border border-border/50 bg-background p-4 shadow-md transition-all duration-300 hover:shadow-lg"
+      className="relative flex h-[26.5rem] w-full max-w-md cursor-pointer flex-col items-start rounded-2xl border border-border/50 bg-background p-4 shadow-md transition-all duration-300 hover:shadow-lg"
       onClick={handleClick}
       data-testid="store-card"
       role="button"
@@ -97,33 +85,14 @@ export function StoreCard({
 
       <div className="mt-3 flex w-full flex-1 flex-col">
         {/* Second Section: Agent Name and Creator Name */}
-        <div className="flex w-full flex-col">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span
-                  ref={titleRef}
-                  onPointerEnter={checkTitleOverflow}
-                  className="line-clamp-2 block min-h-[2.7lh] min-w-0 leading-tight"
-                >
-                  <Text
-                    variant="h4"
-                    as="span"
-                    className="text-xl leading-tight"
-                  >
-                    {agentName}
-                  </Text>
-                </span>
-              </TooltipTrigger>
-              {isTitleTruncated && (
-                <TooltipContent>
-                  <p>{agentName}</p>
-                </TooltipContent>
-              )}
-            </Tooltip>
-          </TooltipProvider>
+        <div className="flex w-full min-w-0 flex-col gap-1">
+          <OverflowText
+            value={agentName}
+            variant="h4"
+            className="text-xl leading-tight"
+          />
           {!hideAvatar && creatorName && (
-            <div className="mb-4 mt-2 flex items-center gap-2">
+            <div className="mb-2 mt-2 flex items-center gap-2">
               <Avatar className="h-6 w-6 shrink-0">
                 {avatarSrc && (
                   <AvatarImage

autogpt_platform/frontend/src/app/(platform)/marketplace/creator/[creator]/components/MainCreatorPage/MainCreatorPage.tsx

@@ -143,7 +143,7 @@ export function MainCreatorPage({ params }: Props) {
           <div className="hidden lg:block lg:w-3/5" />
         </div>
 
-        <div className="my-6" />
+        <div className="my-18" />
 
         {creatorAgents && (
           <AgentsSection

autogpt_platform/frontend/src/app/(platform)/marketplace/search/components/MainSearchResultPage/MainSearchResultPage.tsx

@@ -1,7 +1,6 @@
 import { GetV2ListStoreAgentsParams } from "@/app/api/__generated__/models/getV2ListStoreAgentsParams";
 import { SearchFilterChips } from "@/components/__legacy__/SearchFilterChips";
 import { SortDropdown } from "@/components/__legacy__/SortDropdown";
-import { Separator } from "@/components/__legacy__/ui/separator";
 import { Button } from "@/components/atoms/Button/Button";
 import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
 import { ArrowLeftIcon } from "@phosphor-icons/react";
@@ -101,9 +100,7 @@ export const MainSearchResultPage = ({
               {showAgents && agentsCount > 0 && agents && (
                 <AgentsSection agents={agents} />
               )}
-              {showAgents && agentsCount > 0 && creatorsCount > 0 && (
-                <Separator />
-              )}
+              <div className="h-[1rem] w-full" />
               {showCreators && creatorsCount > 0 && creators && (
                 <FeaturedCreators
                   featuredCreators={creators}