ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

Fix metric cards grid to use md: breakpoint instead of @container queries

Browse Source 
Tailwind 3 doesn't support container queries without a plugin.
This commit is contained in:
Usman Baig
2026-03-09 22:56:53 +01:00
parent 033d735c3a
commit 7175de44af
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/dashboard/Chart.tsx
View File

@@ -323,16 +323,16 @@ export default function Chart({
return ( return (
<div ref={chartContainerRef} className="relative"> <div ref={chartContainerRef} className="relative">
<Card className="@container w-full overflow-hidden rounded-2xl"> <Card className="w-full overflow-hidden rounded-2xl">
<CardHeader className="p-0 mb-0"> <CardHeader className="p-0 mb-0">
{/* Metrics Grid - 21st.dev style */} {/* Metrics Grid - 21st.dev style */}
<div className="grid grid-cols-2 @2xl:grid-cols-2 @3xl:grid-cols-4 grow w-full"> <div className="grid grid-cols-2 md:grid-cols-4 grow w-full">
{metricsWithTrends.map((m) => ( {metricsWithTrends.map((m) => (
<button <button
key={m.key} key={m.key}
onClick={() => setMetric(m.key)} onClick={() => setMetric(m.key)}
className={cn( className={cn(
'cursor-pointer flex-1 text-start p-4 last:border-b-0 border-b @2xl:border-b @2xl:even:border-r @3xl:border-b-0 @3xl:border-r @3xl:last:border-r-0 border-neutral-200 dark:border-neutral-800 transition-all', 'cursor-pointer flex-1 text-start p-4 border-b md:border-b-0 md:border-r md:last:border-r-0 border-neutral-200 dark:border-neutral-800 transition-all',
metric === m.key && 'bg-neutral-50 dark:bg-neutral-800/40', metric === m.key && 'bg-neutral-50 dark:bg-neutral-800/40',
)} )}
> >