[VarDumper] Fix CSS alignment in HtmlDumper #53147
Conversation
|
Thank you. CSS is tricky and I am no expert. But why does What I really wonder is: Is this according to the official rules and have this been tested in more than one browser? |
|
Intuitively, I would say that we want to align the baseline of the text here, so using |
|
It depends on the "bounding box" of the element. The FQCN is actually two parts here: the grey and the green one. The green part of the FQCN is already centered in its section. If the bounding-box is a bit taller than the text, then the "vertical-align: top" of the grey part pushes it on top of the bounding box. Not sure I'm super clear here 😅 @stof I'm having a look at this solution |
|
Unfortunately, baseline doesn't work well:
|
|
I've played a bit with this and to me, this was solved by doing this change instead: pre.sf-dump span {
- display: inline;
+ display: inline-flex;
}Can you please try if this also solves the design issues for you? Thanks! |
f8a2aa7 to
3a71a06
Compare
|
I can confirm this works well. Thanks Javier, PR updated! |
|
Thank you @alexandre-daubois. |
This PR was merged into the 6.4 branch. Discussion ---------- [VarDumper] Fix blank strings display | Q | A | ------------- | --- | Branch? | 6.4 | Bug fix? | yes | New feature? | no | Deprecations? | no | Issues | Fix #57980 | License | MIT Because `sf-dump-ellipsis` `span`s needed a `text-ellipsis`, their overflowing content was cut using `overflow: hidden`. As it required their inner display type to be `block`, this broke the alignment with the ellipsis’ “tail”. This was fixed by #53147 by making every dump’s `span`s `inline-flex`. This change made `sf-dump-ellipsis`’ `display`, `max-width` and `vertical-align` properties useless so this PR removes them, as well as a duplicated `overflow` one. Now, `inline-flex` elements’ content becomes flex items, which caused #57980 because > if the entire sequence of [a flex item’s] text runs contains only white space […] it is […] not rendered > > https://www.w3.org/TR/css-flexbox-1/#flex-items Instead of making every dump’s `span`s `inline-flex`, this PR targets a new `sf-dump-ellipsization` class added to `sf-dump-ellipsis`’ parents. It also wraps ellipsis tails with elements bearing the `sf-dump-ellipsis-tail` class so that we can prevent them to shrink: **Before**:  **After**:  Commits ------- b0c2a59 [VarDumper] Fix blank strings display
Bottom alignment seems the right one here: