Skip to content

Commit 6b94b2e

Browse files
committed
fix(lab-card): stack links vertically, right-align in horizontal mode
Two defects reported on the home page: - Links weren't right-aligned. The link column sat in the right grid track but its flex children aligned to the column's start, so the block hugged the center gutter. - The second link in a group appeared slightly lower. The list was flex-wrap with a row gap; two-link groups would wrap unpredictably when the label widths were close to the column width. Switch the link list to a vertical stack. In horizontal-band mode (container ≥40rem), right-align each group and its anchors with flex-end + text-align: end. On narrow stacked cards, default start alignment is preserved so the link list reads naturally below the intro.
1 parent 158e9b6 commit 6b94b2e

1 file changed

Lines changed: 9 additions & 2 deletions

File tree

src/design/components/lab-card/styles.css

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@
5858
padding: 0;
5959
margin: 0;
6060
display: flex;
61-
flex-wrap: wrap;
62-
gap: var(--space-3) var(--space-4);
61+
flex-direction: column;
62+
gap: var(--space-2);
6363
}
6464

6565
.lab-card__link-anchor {
@@ -97,5 +97,12 @@
9797
gap: var(--space-6);
9898
align-items: start;
9999
}
100+
.lab-card__group {
101+
align-items: flex-end;
102+
text-align: end;
103+
}
104+
.lab-card__link-list {
105+
align-items: flex-end;
106+
}
100107
}
101108
}

0 commit comments

Comments
 (0)