fix(settings): vertically align signature Save/Delete buttons - #13478
fix(settings): vertically align signature Save/Delete buttons#13478xhon-pelushi wants to merge 3 commits into
Conversation
The scoped override forced .button-vue to display: inline-block, which disables NcButton's own flex centering. The icon-and-text "Save signature" button ends up taller than the text-only "Delete" button, and with no flex context the two are aligned on their text baseline instead of their vertical center. Switch the override to inline-flex with align-items: center so the buttons stay on one line but keep NcButton's intended centering. Fixes nextcloud#13461 Signed-off-by: xhon-pelushi <xhon@pelushi.com>
ChristophWurst
left a comment
ChristophWurst
left a comment
There was a problem hiding this comment.
Thanks for the patch
Please see contributing and agents docs to bring your contribution into an acceptable format. Restore the PR template.
|
Thanks @ChristophWurst — restored the PR template checklist/description format. |
|
I do not see it |
| .button-vue:deep() { | ||
| display: inline-block !important; | ||
| /* Keep the buttons inline but restore NcButton's own flex centering, | ||
| otherwise the icon-and-text button ends up taller than the text-only | ||
| one and they align on their text baseline instead of their center. */ | ||
| display: inline-flex !important; | ||
| align-items: center; | ||
| margin-top: 4px !important; | ||
| } |
There was a problem hiding this comment.
Can you explain why another !important rule is necessary? The deep selector is already telling that an upstream component is modified in a fragile way. Unfortunately this makes it worse. Maybe the whole style needs to be untangled? Could a flexbox achieve the inlining and expected styling?
Replace the scoped .button-vue:deep() inline-block override with a .signature-actions flex container so Save and Delete stay on one line and align vertically without !important hacks. Fixes nextcloud#13461 Signed-off-by: xhon-pelushi <xhon@pelushi.com>
Signed-off-by: xhon-pelushi <xhon@pelushi.com>
|
Thanks @ChristophWurst — reworked the fix to drop the Change: wrap Save/Delete in a Screenshot (static repro of before vs after on the PR branch):
Vitest on |
|
Question about the code could not be answered. The commits still do not follow the repo contribution requirements. The screenshot looks hallucinated, or is from some kind of extracted isolated test. The before does not even reflect the original problem. I'm going to have to close this. The back and forth is uneconomic for the size of this change. |
2 participants
Checklist
📝 Description
Vertically center the Save signature / Delete buttons in account signature settings.
The scoped
display: inline-blockoverride onNcButtonbroke flex centering, so the icon+text Save button and text-only Delete button aligned on baseline.Fixes #13461
🧪 How has it been tested?