Template talk:Documentation
Style issue: Narrow viewport wrapping (resolved)
>.subpages .mw-prefixindex-list { display: inline-flex; } appears to break wrapping on narrow viewports.
.mw-prefixindex-list {
margin: 0;
padding: 0;
--> display: inline-flex;
Removing that falls back to the browser default display: block, which improves wrapping. -Oznogon (talk) 02:38, 13 January 2024 (UTC)
- I improved the wrapping by enabling flex-wrap and having the breaks after commas. Virenerus (talk) 00:06, 14 January 2024 (UTC)
Style issue: Comma separation
Using li::before to insert commas causes unusual behavior in long lists of subpages, such as on Template:Cite book.
> .subpages > ul {
margin: 0;
padding: 0;
display: inline-flex;
flex-wrap: wrap;
>li {
display: inline;
1-> &~li::before {
content:', ';
2-> padding-left: .2em;
}
}
}
}
- Placing the commas in li::before means items that start on a new line start with a comma. Placing them in li::after places the comma at the end of the list item, avoiding this.
- Padding the left side of the list item separates the comma from the previous list item.
If the comma is moved to li::after, the space doesn't need to be declared in content and padding-right can provide the visual separation.
If the comma stays in li::before, the trailing content space is stripped and should be explicit, ie. content: ',\0020'; where \0020 is the escaped hex code for a standard breaking space. With the space correct, padding-left can be removed.
For instance, this CSS results in a comma-separated list with commas that don't appear at the beginning of lines, with expected spacing between both the command and item and between items:
.documentation > .subpages > .subpages > ul > li::after {
content: ','; // no trailing space necessary
padding-right: 0.2em;
}
.documentation > .subpages > .subpages > ul > li:last-child:after {
content: ""; // don't add a comma after the last list item
}
Not sure how that translates to a Less style change. -Oznogon (talk) 21:04, 5 February 2024 (UTC)