Give the login form a minimum width so its labels are not hyphenated - #12035
Open
lorenzgith wants to merge 1 commit into
Open
Give the login form a minimum width so its labels are not hyphenated#12035lorenzgith wants to merge 1 commit into
lorenzgith wants to merge 1 commit into
Conversation
.ilStartupSection uses width: fit-content with no lower bound, so the login form takes its width from the widest sibling instead of its own needs. Where the registration links are disabled the form collapses and the labels get hyphenated. This puts the lower bound on the form and resets it in the existing mobile media query.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this fixes
The login form takes its width from whatever happens to sit next to it, not from its own needs.
.ilStartupSectionin_component_init.scssuseswidth: fit-contentwith no lower bound, so its width is that of the widest child — and that child is not the form. On an installation where self registration and the "forgot your password" links are enabled, the row of those links is the widest element and stretches the container to a comfortable width. Where those links are switched off, nothing stretches it and the form collapses to its own intrinsic width. The label column, at 25% of that, becomes too narrow for its own text: in German the login name label renders as "Anmel-dena-me" across three lines.Measured on two of our installations at an identical viewport width of 1600px, both ILIAS 10.10:
.ilStartupSectionGrid definition, fonts and stylesheets are identical in both cases, so the difference is purely the missing sibling content.
Why it is done this way
Two variants do not work, both verified in the browser:
.ilStartupSectionelements that hold the link rows as well. Their left-aligned links then sit in a box that is too wide and no longer look centred under the form (measured: 15px gap left, 112px right).min-widthcollapses to zero, because it cannot be resolved against afit-contentparent. The section stayed at 432px instead of growing.So the bound goes on the form as a plain value, with a reset inside the media query that already switches the section to
width: autoon narrow screens.Verified
Notes
The compiled
templates/default/delos.cssis included since it is committed in the repository. To keep it free of noise from a different sass version, I compileddelos.scssbefore and after the change with the same binary, verified that the only differences are these two rules, and applied exactly those blocks to the committed file.There is no Mantis entry for this yet — happy to create one and add the number to the title if you would rather have it tracked as a bugfix.