Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Line break/long text in helper-text should keep intendation #17

Open
rugk opened this issue Apr 4, 2021 · 1 comment
Open

Line break/long text in helper-text should keep intendation #17

rugk opened this issue Apr 4, 2021 · 1 comment
Labels
bug Something isn't working help wanted Extra attention is needed user interface UI/UX/design issues

Comments

@rugk
Copy link
Member

rugk commented Apr 4, 2021

Especially when you have a lot of text/small UI width the helper-text CSS class is going to wrap and the indentation is broken beginning from the second line of text.

image

This is not what the Photon design wants (I guess), so we should find a way to begin the second line of text at the same X position.

Relevant design doc

https://design.firefox.com/photon/patterns/nesting.html
https://design.firefox.com/photon/patterns/helpers.html

@rugk rugk added the help wanted Extra attention is needed label Apr 4, 2021
@rugk rugk changed the title Helper-text line break should keep intendation Line break/long text in helper-text should keep intendation Apr 4, 2021
@rugk rugk added bug Something isn't working user interface UI/UX/design issues labels Apr 4, 2021
@tdulcet
Copy link

tdulcet commented Jul 2, 2022

I think this is related, when using the line CSS class it also puts extra unwanted margin at the end of some subelements, such as links (<a>) and <code>:
image

Here is the offending rule:

.line > * {
/* https://design.firefox.com/photon/visuals/grid.html#spacing */
margin: 0 8px 0 0;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help wanted Extra attention is needed user interface UI/UX/design issues
Projects
None yet
Development

No branches or pull requests

2 participants