Skip to content

Commit 5171b00

Browse files
committed
Fix Badge overflow and ensure a single column layout on mobile devices
1 parent a774085 commit 5171b00

File tree

2 files changed

+10
-2
lines changed

2 files changed

+10
-2
lines changed

dev/src/components/docs/ComponentList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const LazyLoadComponent: FC<
4949
>
5050
<SampleComponent lang={lang} />
5151
{badges && badges?.length > 0 && (
52-
<div className="absolute bottom-2 p-1">
52+
<div className="bottom-2 p-1">
5353
<div className="flex flex-wrap gap-2">
5454
{badges?.map((label) => (
5555
<KolBadge key={label} _color="#dadde1" _label={label}></KolBadge>

dev/src/css/custom.css

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,9 @@ kol-link-button {
158158

159159
.components-overview-item {
160160
position: relative;
161-
height: 350px;
161+
height: auto;
162+
padding: 1rem;
163+
box-sizing: border-box;
162164
}
163165

164166
.components-overview-item a {
@@ -170,3 +172,9 @@ kol-link-button {
170172
z-index: 1;
171173
cursor: pointer;
172174
}
175+
176+
@media (max-width: 768px) {
177+
.components-overview {
178+
grid-template-columns: 1fr;
179+
}
180+
}

0 commit comments

Comments
 (0)