Skip to content

Commit 3296d02

Browse files
authored
fix(ui): consistent padding for collapsed/expanded package accordions (#4426)
When viewing affected packages on vulnerability pages, the last package in an ecosystem had different bottom padding depending on whether it was collapsed or expanded: <img width="1777" height="849" alt="befafter" src="https://github.com/user-attachments/assets/12b4af46-6cd4-4a13-b8bb-bad533c19742" /> This was caused by the CSS rule `margin-bottom` being applied to `.package-details-card` inside `.package-accordion--last`. When the accordion was collapsed, this element was hidden, so the margin didn't apply. The padding rule is now applied on the last accordion element instead of the hidden child element.
1 parent 42c39d9 commit 3296d02

File tree

1 file changed

+2
-5
lines changed

1 file changed

+2
-5
lines changed

gcp/website/frontend3/src/styles.scss

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1071,7 +1071,7 @@ dl.vulnerability-details,
10711071
}
10721072

10731073
$last-ecosystem-border-offset: 12px;
1074-
$last-ecosystem-border-gap: 8px;
1074+
$last-ecosystem-border-gap: 16px;
10751075
$last-ecosystem-border-thickness: 1px;
10761076

10771077
.ecosystem-content-panel--last {
@@ -1110,10 +1110,7 @@ dl.vulnerability-details,
11101110

11111111
.package-accordion--last {
11121112
margin-bottom: 0;
1113-
1114-
.package-details-card {
1115-
margin-bottom: $last-ecosystem-border-gap;
1116-
}
1113+
padding-bottom: $last-ecosystem-border-gap;
11171114
}
11181115

11191116
.package-accordion h3.package-name-title {

0 commit comments

Comments
 (0)