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

public-ui · Jul 31, 2024 · e531b73 · e531b73
2 parents f3a14a5 + d23a738
commit e531b73
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git a/src/components/docs/ComponentList.tsx b/src/components/docs/ComponentList.tsx
@@ -39,24 +39,30 @@ 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}
 						role="img"
 						_level={2}
 						_label={formattedComponentName}
 					>
-						<SampleComponent lang={lang} />
-						{badges && badges?.length > 0 && (
-							<div className="absolute 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
@@ -158,10 +158,17 @@ kol-link-button {
 
 .components-overview-item {
 	position: relative;
-	height: 350px;
+	height: auto;
 }
 
-.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%;
@@ -170,3 +177,9 @@ kol-link-button {
 	z-index: 1;
 	cursor: pointer;
 }
+
+@media (max-width: 767px) {
+	.components-overview {
+		grid-template-columns: 1fr;
+	}
+}