Update developer-tools-state.js: fix alignment for ha-tips #17608
Conversation
| @@ -98,6 +98,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) { | |||
| ha-tip { | |||
| display: flex; | |||
There was a problem hiding this comment.
Can we remove display: flex, I feel like ha-tip should handle that?
There was a problem hiding this comment.
Probably the correct style should be defined for the "standard" ha-tip component. Now it is "block" - which looks ok when text-align=center:
but not ok when text-align=left:
So, probably we need to change a style for the ha-tip component itself (to display=flex).
There was a problem hiding this comment.
I can propose a PR for ha-tip component if you agree this way.
There was a problem hiding this comment.
It will need more than just display: flex (the icon changes size for example, and the text is not vertically centered) but yeah, that's fine by me.
There was a problem hiding this comment.
Tested with display: flex for the "ha-tip" component - and I do not like results.
Check this for some iPhone with the current default settings:
And with these:
display: flex;
justify-content: center;
align-items: center;
Or with this (align-items: start):
The default style looks much nicer!
So I propose to use the display: flex style for Dev tools -> Set state only, not globally.
Another unrelated proposal: let's get rid of the "Tip!" label, the "bulb" icon is self-explanatory (btw this label is hidden in "Dev tools -> Set state"):
Before:
After:
Breaking change
Proposed change
Type of change
Example configuration
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed: