fix: mobile CallToAction sizing

Author: KodingDev

src/app/art/page.tsx

@@ -27,7 +27,6 @@ export default function ArtPage() {
         <CallToAction
           picture={refSheet.images[0] ? { src: refSheet.images[0] } : undefined}
           href={`/art/${refSheetArtist.slug}/${refSheet.slug}` as Route}
-          picMaxWidth="80vw"
         >
           <div className="flex min-h-[400px] flex-col justify-end gap-3 p-6 md:p-10">
             {/* Artist name */}

src/components/clients/ClientCallToAction.tsx

@@ -10,11 +10,7 @@ type ClientCallToActionProps = {
 };
 
 export const ClientCallToAction: React.FC<ClientCallToActionProps> = ({ client }) => (
-  <CallToAction
-    href={`/clients/${client.slug}` as Route}
-    picture={client.banner ? { src: client.banner } : undefined}
-    picMaxWidth="40vw"
-  >
+  <CallToAction href={`/clients/${client.slug}` as Route} picture={client.banner ? { src: client.banner } : undefined}>
     <div className="flex flex-col gap-3 p-6 md:p-10">
       <div className="flex flex-row items-center">
         <div className={`h-2 w-2 rounded-full ${client.end ? "bg-red-500" : "bg-green-500"}`} />

src/components/interactive/CallToAction.tsx

@@ -9,17 +9,10 @@ type CallToActionProps = {
     src: StaticImageData;
     alt?: string;
   };
-  picMaxWidth?: string;
 } & React.PropsWithChildren &
   React.ComponentProps<typeof Link>;
 
-export const CallToAction: React.FC<CallToActionProps> = ({
-  picture,
-  picMaxWidth = "100%",
-  className,
-  children,
-  ...props
-}) => (
+export const CallToAction: React.FC<CallToActionProps> = ({ picture, className, children, ...props }) => (
   <Link
     {...props}
     className={cn(
@@ -30,13 +23,7 @@ export const CallToAction: React.FC<CallToActionProps> = ({
     <div className="absolute inset-0">
       {picture ? (
         <>
-          <Image
-            src={picture.src}
-            alt={picture.alt || "Cover"}
-            fill
-            className="h-full w-full object-cover object-top"
-            style={{ maxWidth: picMaxWidth }}
-          />
+          <Image src={picture.src} alt={picture.alt || "Cover"} fill className="h-full w-full object-cover" />
           <div className="absolute top-0 left-0 z-[1] h-full w-full bg-gradient-to-b from-transparent to-black/80" />
         </>
       ) : (