uikit: center PlAlert close button vertically#1663
Conversation
🦋 Changeset detectedLatest commit: 54bc1de The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request modifies the PlAlert component to vertically center its close button. The reviewer noted that using top: 50% with a transform can cause layout issues on multi-line alerts or alerts with titles, and suggested using top: 12px instead to maintain clean alignment across both single-line and multi-line layouts.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1663 +/- ##
==========================================
- Coverage 53.22% 52.43% -0.79%
==========================================
Files 270 273 +3
Lines 15719 16135 +416
Branches 3411 3509 +98
==========================================
+ Hits 8366 8460 +94
- Misses 6236 6537 +301
- Partials 1117 1138 +21 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| position: absolute; | ||
| top: 10px; | ||
| // center vertically regardless of alert height (single- or multi-line) | ||
| top: 50%; |
There was a problem hiding this comment.
PlAlert can be more than one line, in this case it will be wrong style
There was a problem hiding this comment.
@AStaroverov Which is why I thought using 50 percent would always work, no? It will always be half way
Tested with multi line:
|
Alerts after commit cdce7e8 
|
Drop the translateY(-50%) transform. top: 4px centres the 40px button on the first content row (row centre 24px = 12px padding + half the 24px row; 24 - 20 = 4px) and matches PlDialogModal's existing close-button offset.
2 participants
What
PlAlert'scloseableclose button was pinned attop: 10px. That put the 40px button's center at 30px — ~6px below the center of a single-line (~48px) alert, drifting further as the alert grew.Center the button on the first line of text instead:
The first content row's center sits at 24px (12px padding + half the 24px row). Placing the 40px button's top edge at
24 − 20 = 4pxputs its center on that row.A fixed
top— nottop: 50%— anchors the X to the first line. On a tall multi-line alert the X stays top-right rather than floating to the vertical middle. (An earlier revision usedtop: 50%; review feedback asked to keep the multi-line X top-right, hence the first-line anchor.)top: 4pxalso matches the existing house pattern:PlDialogModalalready pins the samePlCloseModalBtnwithtop: 4px.Why
The off-center X showed on every
closeablePlAlert. Surfaced on the sequence-properties block (MILAB-6368).Blast radius
The change touches only
.pl-alert__close-btn, which renders only whencloseable. Across blocks + core there are 157PlAlertusages; 2 are closeable —sequence-propertiesandclonotype-enrichment— and both improve. Non-closeablePlAlerts and the separatePlNotificationAlert(its ownclosable/CSS) stay untouched.Verification
Built
@milaboratories/uikitand previewed live in the sequence-properties dev block. The X-center sits ~24px from the alert top regardless of height:Changeset:
@milaboratories/uikit: patch— auto-propagates a@platforma-sdk/ui-vuepatch (workspace:*+updateInternalDependencies: patch), so blocks pick up the fix on their next ui-vue bump.