Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@glemaitre
Copy link
Member

@glemaitre glemaitre commented Aug 19, 2025

This PR is solving a couple of visual bugs for the "?" and "i" symbols:

  • the symbols are properly vertically aligned with the labels
  • the symbols are set to not be on a new line at any moment
  • use the sklearn-color instead of the IDE background. Therefore, we make sure that it is not varying depending on the theme.

main:

image

This PR:

image

@github-actions
Copy link

github-actions bot commented Aug 19, 2025

✔️ Linting Passed

All linting checks passed. Your pull request is in excellent shape! ☀️

Generated for commit: 0b1080f. Link to the linter CI: here

@DeaMariaLeon
Copy link
Member

DeaMariaLeon commented Aug 20, 2025

Thank you for your pull request @glemaitre ! 😁

It seems that "single components" names need to be centred when drop-downs are opened:
Screenshot 2025-08-20 at 09 05 00
Screenshot 2025-08-20 at 09 06 00

@glemaitre
Copy link
Member Author

It is weird. The icon looks off but locally, I have the following alignment:

image

@glemaitre glemaitre changed the title FIX align properly ? symbol in HTML diagram ENH improve alignment "?"/"i" and color in HTML diagram Aug 21, 2025
@glemaitre
Copy link
Member Author

Oh I see that you meant the label is not centered. I did not understood at first.

I did solve this issue and add a couple of improvement regarding the color as well.

It looks something like this now:

image

@DeaMariaLeon
Copy link
Member

The parameter names (C and kernel) are now right aligned, was this on purpose?
Screenshot 2025-08-21 at 11 12 24

@glemaitre
Copy link
Member Author

I think that we already have the bug currently in notebooks only. I made the change here in another PR. But I'll bring the change in this PR then.

Copy link
Member

@jeremiedbb jeremiedbb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The rendering looks good to me.
I'm not able to assess the quality of the css though.

Maybe @Charlie-XIAO or @thomasjpfan can have a look at the css to check that everything's fine ?

@Charlie-XIAO
Copy link
Contributor

Charlie-XIAO commented Sep 15, 2025

I might not have completely understood the goal. If it is just to vertically align the ?/! icons in the middle, then changing align-items: start to align-items: center in label.sk-toggleable__label is what you need. I'm not sure where those margins and paddings came from, but IMO flex layout is commonly more robust for alignment purposes.

image

If you want all of them (arrow, title, ?/! icons) to be horizontally centered as well, justify-content: center does the job (as what this PR currently does).

I may also suggest against using position: absolute for the leading arrow. As mentioned above, if we don't need it to be left-aligned, then absolute positioning is just not needed. I'm not 100% sure but a potential problem of absolute positioning is that it could potentially overlap with the title if we are not careful enough leaving sufficient space for it.

These are just suggestions anyways. As long as rendering looks good, I think the css implementation does not matter too much at our scale. And I could be missing something because I only tested with very simple estimators.

@glemaitre
Copy link
Member Author

The solution align-items: center apparently will work for the simple model but not for the metaestimator because they are not flex container. So actually, the part which is annoying is the display: inline-block for the meta-estimator. If I use inline-flex than I get the proper behaviour than what I tried with the no-wrap. So indeed it seems to be a better solution.

I should read the CSS book one day :)

@glemaitre
Copy link
Member Author

OK so I simplify as suggested and I triggered a documentation build.

Copy link
Contributor

@Charlie-XIAO Charlie-XIAO left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the changes! This LGTM!

@Charlie-XIAO Charlie-XIAO merged commit 10e5883 into scikit-learn:main Sep 16, 2025
36 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants