chore: Add card filter overlay and update flex alignment in CollectionCardComponent

src/frontend/src/components/cardComponent/index.tsx

@@ -177,6 +177,7 @@ export default function CollectionCardComponent({
         )}
         onClick={onClick}
       >
+        <div className="hover:card-filter absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden"></div>
         <div>
           <CardHeader>
             <div>
@@ -292,7 +293,7 @@ export default function CollectionCardComponent({
 
         <CardFooter>
           <div className="flex w-full items-center justify-between gap-2">
-            <div className="flex w-full flex-wrap items-end justify-between gap-2">
+            <div className="flex w-full flex-wrap items-end justify-end gap-2">
               {playground && data?.metadata !== undefined ? (
                 <Button
                   disabled={loadingPlayground}
@@ -436,7 +437,6 @@ export default function CollectionCardComponent({
                   </ShadTooltip>
                 </div>
               )}
-              {button && button}
               {playground && data?.metadata === undefined && (
                 <Button
                   disabled={loadingPlayground}

src/frontend/src/style/applies.css

@@ -9,7 +9,9 @@
 
   body {
     @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
 }
 
@@ -1018,6 +1020,9 @@
   .langflow-chat-span {
     @apply text-lg text-foreground;
   }
+  .card-filter {
+    @apply bg-background bg-fixed opacity-20;
+  }
   .langflow-chat-desc {
     @apply w-2/4 rounded-md border border-border bg-muted px-6 py-8;
   }