UI: use container media queries on Cards

.changeset/moody-taxis-live.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Use container media queries on Cards

packages/ui/src/components/card.tsx

@@ -2,20 +2,18 @@ import Link from 'fumadocs-core/link';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { cn } from '@/utils/cn';
 
-export function Cards(
-  props: HTMLAttributes<HTMLDivElement>,
-): React.ReactElement {
+export function Cards(props: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       {...props}
-      className={cn('grid grid-cols-1 gap-4 sm:grid-cols-2', props.className)}
+      className={cn('grid grid-cols-2 gap-4 @container', props.className)}
     >
       {props.children}
     </div>
   );
 }
 
-export type CardProps = HTMLAttributes<HTMLElement> & {
+export type CardProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
   icon?: ReactNode;
   title: ReactNode;
   description?: ReactNode;
@@ -24,12 +22,7 @@ export type CardProps = HTMLAttributes<HTMLElement> & {
   external?: boolean;
 };
 
-export function Card({
-  icon,
-  title,
-  description,
-  ...props
-}: CardProps): React.ReactElement {
+export function Card({ icon, title, description, ...props }: CardProps) {
   const E = props.href ? Link : 'div';
 
   return (
@@ -37,7 +30,7 @@ export function Card({
       {...props}
       data-card
       className={cn(
-        'block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors',
+        'block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full',
         props.href && 'hover:bg-fd-accent/80',
         props.className,
       )}