fix: hide reading time on mobile and prevent category overlap

app/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@haroonwaves/blog-kit-app",
-	"version": "2.1.0",
+	"version": "2.1.1",
 	"private": true,
 	"scripts": {
 		"dev": "next dev",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "blog-kit",
-	"version": "2.1.0",
+	"version": "2.1.1",
 	"private": true,
 	"description": "The ultimate Next.js toolkit for building professional blog systems with markdown.",
 	"main": "index.js",

packages/blog-kit-core/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@haroonwaves/blog-kit-core",
-	"version": "2.1.0",
+	"version": "2.1.1",
 	"main": "dist/index.js",
 	"module": "dist/index.mjs",
 	"types": "dist/index.d.ts",

packages/blog-kit-react/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@haroonwaves/blog-kit-react",
-	"version": "2.1.0",
+	"version": "2.1.1",
 	"main": "dist/index.js",
 	"module": "dist/index.mjs",
 	"types": "dist/index.d.ts",

packages/blog-kit-react/src/components/ContentCard.tsx

@@ -25,13 +25,15 @@ export function ContentCard({
 	const defaultLink = (href: string, children: React.ReactNode) => <a href={href}>{children}</a>;
 	const Link = renderLink || defaultLink;
 
+	const hasVisibleOnMobile = (showCategory && metadata.categories?.length) || showDate;
+
 	return (
 		<article
-			className={`bk:rounded-lg bk:border bk:border-gray-200 bk:dark:border-[oklch(1_0_0/0.1)] bk:hover:border-gray-300 bk:dark:hover:border-[oklch(1_0_0/0.15)] bk:bg-white bk:dark:bg-[oklch(0.205_0_0)] bk:p-6 bk:transition-colors bk:min-h-[200px] bk:flex bk:flex-col ${className}`}
+			className={`bk:rounded-lg bk:border bk:border-gray-200 bk:dark:border-[oklch(1_0_0/0.1)] bk:hover:border-gray-300 bk:dark:hover:border-[oklch(1_0_0/0.15)] bk:bg-white bk:dark:bg-[oklch(0.205_0_0)] bk:p-5 bk:sm:p-6 bk:transition-colors bk:min-h-[200px] bk:flex bk:flex-col ${className}`}
 		>
 			{(showCategory || showReadingTime || showDate) && (
-				<div className="bk:mb-3">
-					<div className="bk:flex bk:items-center bk:gap-3 bk:justify-between">
+				<div className={`bk:mb-3 ${hasVisibleOnMobile ? '' : 'bk:hidden bk:sm:block'}`}>
+					<div className="bk:flex bk:flex-wrap bk:items-center bk:gap-x-3 bk:gap-y-2 bk:justify-between">
 						{showCategory && metadata.categories?.length ? (
 							<div className="bk:flex bk:items-center bk:gap-1.5 bk:flex-nowrap bk:overflow-hidden">
 								{metadata.categories.slice(0, 2).map((cat) => (
@@ -40,9 +42,13 @@ export function ContentCard({
 							</div>
 						) : null}
 						{(showReadingTime || showDate) && (
-							<div className="bk:flex bk:items-center bk:gap-2 bk:text-sm bk:text-neutral-500 bk:dark:text-neutral-400 bk:whitespace-nowrap">
-								{showReadingTime && <span>{metadata.readingTime}</span>}
-								{showReadingTime && showDate && <span>•</span>}
+							<div
+								className={`bk:flex bk:items-center bk:gap-2 bk:text-sm bk:text-neutral-500 bk:dark:text-neutral-400 bk:whitespace-nowrap ${showDate ? '' : 'bk:hidden bk:sm:flex'}`}
+							>
+								{showReadingTime && (
+									<span className="bk:hidden bk:sm:inline">{metadata.readingTime}</span>
+								)}
+								{showReadingTime && showDate && <span className="bk:hidden bk:sm:inline">•</span>}
 								{showDate && (
 									<time dateTime={metadata.date}>
 										{new Date(metadata.date).toLocaleDateString('en-US', {

packages/blog-kit-react/src/components/ContentRenderer.tsx

@@ -196,10 +196,14 @@ export function ContentRenderer({
 }: ContentRendererProps) {
 	const mergedComponents = { ...defaultComponents, ...components };
 
+	const hasVisibleOnMobile = (showCategory && metadata.categories?.length) || showDate;
+
 	return (
 		<>
 			{(showCategory || showReadingTime || showDate) && (
-				<div className="bk:flex bk:items-center bk:gap-3 bk:mb-4">
+				<div
+					className={`bk:flex bk:flex-wrap bk:items-center bk:gap-x-3 bk:gap-y-2 bk:mb-4 ${hasVisibleOnMobile ? '' : 'bk:hidden bk:sm:flex'}`}
+				>
 					{showCategory && metadata.categories?.length ? (
 						<div className="bk:flex bk:items-center bk:gap-1.5 bk:flex-wrap">
 							{metadata.categories.map((cat) => (
@@ -208,9 +212,13 @@ export function ContentRenderer({
 						</div>
 					) : null}
 					{(showReadingTime || showDate) && (
-						<div className="bk:flex bk:items-center bk:gap-2 bk:text-sm bk:text-neutral-500 bk:dark:text-neutral-400 bk:whitespace-nowrap">
-							{showReadingTime && <span>{metadata.readingTime}</span>}
-							{showReadingTime && showDate && <span>•</span>}
+						<div
+							className={`bk:flex bk:items-center bk:gap-2 bk:text-sm bk:text-neutral-500 bk:dark:text-neutral-400 bk:whitespace-nowrap ${showDate ? '' : 'bk:hidden bk:sm:flex'}`}
+						>
+							{showReadingTime && (
+								<span className="bk:hidden bk:sm:inline">{metadata.readingTime}</span>
+							)}
+							{showReadingTime && showDate && <span className="bk:hidden bk:sm:inline">•</span>}
 							{showDate && (
 								<time dateTime={metadata.date}>
 									{new Date(metadata.date).toLocaleDateString('en-US', {