keycloak-ui
keycloak-ui copied to clipboard
keycloak
[UX Review] Align the question mark with the tag in the Export tab
Describe the bug
In the Export settings page, the question mark and the tag should be in one row. So we can align the question with the tag.
Version
New admin UI
Expected behavior
No response
Actual behavior
No response
How to Reproduce?
No response
Anything else?
No response
This needs to be fixed in a general way. We see this all over the application.
I have investigated this issue. It really depends on how far we want to go with this. Every form in the app has this issue which is due to the patternfly .--pf-c-form--m-horizontal__group-label--md--GridColumnWidth set to 10.375rem globally.
I can fix this particular issue, however, Authorization details in the Clients > Client details > Authorization > Export is not the longest form field name in our app.
In order to fix all long-form names I'd need to set change --pf-c-form--m-horizontal__group-label--md--GridColumnWidth from 10.375rem to something like 15.375rem maybe even 16.375rem. This would, however, result in a column with form field names wider than the input fields column.
The best is probably changing --pf-c-form--m-horizontal__group-label--md--GridColumnWidth to 12.375rem. This will not solve all issues but many including the reported Authorization details while still retaining the form's original look.
@agagancarczyk So are you saying that PatternFly has chosen its default value poorly? If so, we should consult with the PatternFly team instead of overriding in our code.
Thanks @ssilvert . I think they should at least give an option to change it somehow without a need to override it. I'll double-check this with the patternfly team. Thanks for the suggestion Stan.
hi @jenny-s51 could I ask you for a small piece of advice? I'm trying to solve this issue we have with all long form field names which don't fit well in the column pushing the question mark icon to the next line.
It seems that patternfly is setting the column width to a fixed value .pf-c-form { --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;} - screenshot also attached.
I tried adding className="pf-u-w-100>" (w-100 is probably not the right value I'd need something greater but patternfly is not giving it as an option) to <FormGroup> component. This is not working.
Then I figured I'd need to override the patternfly's style --pf-c-form--m-horizontal__group-label--md--GridColumnWidth to 12.375rem. Is there any other way to solve this column width issue other than overriding patternfly's style?
Thanks Jenny!
Hi @agagancarczyk ! Thank you for reaching out - this is a really good question... There needs to be a way to keep the icon on the same line as the last word of the form label, and Patternfly currently doesn't support this with its current Form styling.
I brought this issue to the attention of our PF core developers during our monthly Patternfly Office Hours meeting, and based on the discussion that followed, we decided that solution to this should indeed be on the Patternfly side.
Could you open an issue for this in https://github.com/patternfly/patternfly/issues? If you could just link this issue and the relevant comments/details, the Patternfly team will be happy to help resolve this as soon as possible!
Hi @agagancarczyk ! Thank you for reaching out - this is a really good question... There needs to be a way to keep the icon on the same line as the last word of the form label, and Patternfly currently doesn't support this with its current Form styling.
I brought this issue to the attention of our PF core developers during our monthly Patternfly Office Hours meeting, and based on the discussion that followed, we decided that solution to this should indeed be on the Patternfly side.
Could you open an issue for this in https://github.com/patternfly/patternfly/issues? If you could just link this issue and the relevant comments/details, the Patternfly team will be happy to help resolve this as soon as possible!
Thank you @jenny-s51 ! I have now created an issue in Patternfly's repo. https://github.com/patternfly/patternfly/issues/5063
hi @jenny-s51 I have had a quick look to see if this issue has been resolved via patternfly fix. Unfortunately, it appears that it hasn't. We are using "@patternfly/patternfly": "^4.217.1". Could you point this out to the person who tried to fix it in the patternfly team? I'm happy to discuss it further with him/her if needed. Thanks!
Hi @agagancarczyk! We are still working on a fix for this issue in Patternfly.
I investigated this bug on the react side (see https://github.com/patternfly/patternfly-react/pull/8140), however following the discussion in that PR, we determined that the solution is not on the react side and will likely require breaking-change CSS updates (see issue here).
This issue has been prioritized by the core developers for our upcoming breaking change release.