From 5171b00213bd646ea8ac2b6888e11f2878ff9e09 Mon Sep 17 00:00:00 2001
From: Cyrine Ben Romdhane <135605630+anicyne@users.noreply.github.com>
Date: Mon, 29 Jul 2024 12:41:06 +0200
Subject: [PATCH 1/3] Fix Badge overflow and ensure a single column layout on
 mobile devices

---
 dev/src/components/docs/ComponentList.tsx |  2 +-
 dev/src/css/custom.css                    | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/dev/src/components/docs/ComponentList.tsx b/dev/src/components/docs/ComponentList.tsx
index aa016f57c2..73f699c52a 100644
--- a/dev/src/components/docs/ComponentList.tsx
+++ b/dev/src/components/docs/ComponentList.tsx
@@ -49,7 +49,7 @@ const LazyLoadComponent: FC<
 					>
 						<SampleComponent lang={lang} />
 						{badges && badges?.length > 0 && (
-							<div className="absolute bottom-2 p-1">
+							<div className="bottom-2 p-1">
 								<div className="flex flex-wrap gap-2">
 									{badges?.map((label) => (
 										<KolBadge key={label} _color="#dadde1" _label={label}></KolBadge>
diff --git a/dev/src/css/custom.css b/dev/src/css/custom.css
index 983d90465d..4b53965d0f 100644
--- a/dev/src/css/custom.css
+++ b/dev/src/css/custom.css
@@ -158,7 +158,9 @@ kol-link-button {
 
 .components-overview-item {
 	position: relative;
-	height: 350px;
+	height: auto;
+	padding: 1rem;
+	box-sizing: border-box;
 }
 
 .components-overview-item a {
@@ -170,3 +172,9 @@ kol-link-button {
 	z-index: 1;
 	cursor: pointer;
 }
+
+@media (max-width: 768px) {
+	.components-overview {
+		grid-template-columns: 1fr;
+	}
+}

From ac773ba01e088523e78be83a6c176259706a1ff9 Mon Sep 17 00:00:00 2001
From: Cyrine Ben Romdhane <135605630+anicyne@users.noreply.github.com>
Date: Tue, 30 Jul 2024 15:27:18 +0200
Subject: [PATCH 2/3] update custom.css

---
 dev/src/css/custom.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/dev/src/css/custom.css b/dev/src/css/custom.css
index 4b53965d0f..14918b16bd 100644
--- a/dev/src/css/custom.css
+++ b/dev/src/css/custom.css
@@ -159,8 +159,6 @@ kol-link-button {
 .components-overview-item {
 	position: relative;
 	height: auto;
-	padding: 1rem;
-	box-sizing: border-box;
 }
 
 .components-overview-item a {
@@ -173,7 +171,7 @@ kol-link-button {
 	cursor: pointer;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
 	.components-overview {
 		grid-template-columns: 1fr;
 	}

From 225286c721ad55a107270101f71435631a0ebf18 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Tue, 30 Jul 2024 15:45:25 +0200
Subject: [PATCH 3/3] Improve component card layout: Align badges to on the
 bottom and add some spacing

---
 src/components/docs/ComponentList.tsx | 26 ++++++++++++++++----------
 src/css/custom.css                    |  9 ++++++++-
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/docs/ComponentList.tsx b/src/components/docs/ComponentList.tsx
index d09643fc42..fe6d536f11 100644
--- a/src/components/docs/ComponentList.tsx
+++ b/src/components/docs/ComponentList.tsx
@@ -39,7 +39,11 @@ const LazyLoadComponent: FC<
 		<div ref={ref} className="components-overview-item">
 			{isVisible && (
 				<Suspense fallback={<div className="skeleton"></div>}>
-					<Link tabIndex={0} to={`${path}/components/${formattedComponentName}`} />
+					<Link
+						className="components-overview-item__link"
+						tabIndex={0}
+						to={`${path}/components/${formattedComponentName}`}
+					/>
 					<KolCard
 						tabIndex={-1}
 						aria-label={formattedComponentName}
@@ -47,16 +51,18 @@ const LazyLoadComponent: FC<
 						_level={2}
 						_label={formattedComponentName}
 					>
-						<SampleComponent lang={lang} />
-						{badges && badges?.length > 0 && (
-							<div className="bottom-2 p-1">
-								<div className="flex flex-wrap gap-2">
-									{badges?.map((label) => (
-										<KolBadge key={label} _color="#dadde1" _label={label}></KolBadge>
-									))}
+						<div className="components-overview-item__card-content">
+							<SampleComponent lang={lang} />
+							{badges && badges?.length > 0 && (
+								<div className="mt-4 p-1">
+									<div className="flex flex-wrap gap-2">
+										{badges?.map((label) => (
+											<KolBadge key={label} _color="#dadde1" _label={label}></KolBadge>
+										))}
+									</div>
 								</div>
-							</div>
-						)}
+							)}
+						</div>
 					</KolCard>
 				</Suspense>
 			)}
diff --git a/src/css/custom.css b/src/css/custom.css
index 4b53965d0f..f8204fcf9e 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -163,7 +163,14 @@ kol-link-button {
 	box-sizing: border-box;
 }
 
-.components-overview-item a {
+.components-overview-item__card-content {
+	display: flex;
+	flex-flow: column;
+	height: 100%;
+	justify-content: space-between;
+}
+
+.components-overview-item__link {
 	position: absolute;
 	width: 100%;
 	height: 100%;