Fix Badge overflow and ensure a single column layout on mobile devices

Author: anicyne

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>

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;
+	}
+}