-
Bug
-
Resolution: Fixed
-
Minor
-
Jenkins 2.332.1
Mozilla Firefox 91.8.0esr
-
-
2.349
The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):
<a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
and this CSS rule applies to it:
.jenkins-table__link, .jenkins-table .sortheader { display: inline-flex; }
Microsoft Edge 100.0.1185.29 renders it nicely:
Mozilla Firefox 91.8.0esr however breaks the "Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx" part (before the first <wbr> tag) to two lines, and then renders the rest "/XXXXX-111_xxxxxxxxxxxxxxxxx" at the right side of that, even centering it vertically:
I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.
If I disable display: inline-flex; in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:
Alternatively, if I keep the original CSS rule but replace each <wbr> with ​, then Firefox 91.8.0esr renders like this:
- is caused by
-
JENKINS-68229 Modernise the table design
-
- Closed
-
- links to
[JENKINS-68205] Strange line breaks on Firefox 91.8.0esr when Build History uses wbr within display: inline-flex (regression in 2.321)
Labels | New: css |
Description |
Original:
The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):
{code:HTML} <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a> {code} and this CSS rule applies to it: {code:CSS} .jenkins-table__link, .jenkins-table .sortheader { display: inline-flex; } {code} Microsoft Edge 100.0.1185.29 renders it nicely: !edge-100.0.1185.29.png|thumbnail! Mozilla Firefox 91.8.0esr however breaks the part before the first {{<wbr>}} tag to two lines, and then renders the rest at the right side of that: !firefox-91.8.0esr.png|thumbnail! I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow. If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr: !firefox-91.8.0esr-without-inline-flex.png|thumbnail! Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{​}}, then Firefox 91.8.0esr renders like this: !firefox-91.8.0esr-ZWSP.png|thumbnail! |
New:
The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):
{code:HTML} <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a> {code} and this CSS rule applies to it: {code:CSS} .jenkins-table__link, .jenkins-table .sortheader { display: inline-flex; } {code} Microsoft Edge 100.0.1185.29 renders it nicely: !edge-100.0.1185.29.png|thumbnail! Mozilla Firefox 91.8.0esr however breaks the part before the first {{<wbr>}} tag to two lines, and then renders the rest at the right side of that: !firefox-91.8.0esr.png|thumbnail! I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow. If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr: !firefox-91.8.0esr-without-inline-flex.png|thumbnail! Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&#x200B;}}, then Firefox 91.8.0esr renders like this: !firefox-91.8.0esr-ZWSP.png|thumbnail! |
Description |
Original:
The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):
{code:HTML} <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a> {code} and this CSS rule applies to it: {code:CSS} .jenkins-table__link, .jenkins-table .sortheader { display: inline-flex; } {code} Microsoft Edge 100.0.1185.29 renders it nicely: !edge-100.0.1185.29.png|thumbnail! Mozilla Firefox 91.8.0esr however breaks the part before the first {{<wbr>}} tag to two lines, and then renders the rest at the right side of that: !firefox-91.8.0esr.png|thumbnail! I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow. If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr: !firefox-91.8.0esr-without-inline-flex.png|thumbnail! Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&#x200B;}}, then Firefox 91.8.0esr renders like this: !firefox-91.8.0esr-ZWSP.png|thumbnail! |
New:
The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):
{code:HTML} <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a> {code} and this CSS rule applies to it: {code:CSS} .jenkins-table__link, .jenkins-table .sortheader { display: inline-flex; } {code} Microsoft Edge 100.0.1185.29 renders it nicely: !edge-100.0.1185.29.png|thumbnail! Mozilla Firefox 91.8.0esr however breaks the "Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx" part (before the first {{<wbr>}} tag) to two lines, and then renders the rest "/XXXXX-111_xxxxxxxxxxxxxxxxx" at the right side of that: !firefox-91.8.0esr.png|thumbnail! I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow. If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr: !firefox-91.8.0esr-without-inline-flex.png|thumbnail! Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&#x200B;}}, then Firefox 91.8.0esr renders like this: !firefox-91.8.0esr-ZWSP.png|thumbnail! |
Description |
Original:
The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):
{code:HTML} <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a> {code} and this CSS rule applies to it: {code:CSS} .jenkins-table__link, .jenkins-table .sortheader { display: inline-flex; } {code} Microsoft Edge 100.0.1185.29 renders it nicely: !edge-100.0.1185.29.png|thumbnail! Mozilla Firefox 91.8.0esr however breaks the "Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx" part (before the first {{<wbr>}} tag) to two lines, and then renders the rest "/XXXXX-111_xxxxxxxxxxxxxxxxx" at the right side of that: !firefox-91.8.0esr.png|thumbnail! I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow. If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr: !firefox-91.8.0esr-without-inline-flex.png|thumbnail! Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&#x200B;}}, then Firefox 91.8.0esr renders like this: !firefox-91.8.0esr-ZWSP.png|thumbnail! |
New:
The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):
{code:HTML} <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a> {code} and this CSS rule applies to it: {code:CSS} .jenkins-table__link, .jenkins-table .sortheader { display: inline-flex; } {code} Microsoft Edge 100.0.1185.29 renders it nicely: !edge-100.0.1185.29.png|thumbnail! Mozilla Firefox 91.8.0esr however breaks the "Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx" part (before the first {{<wbr>}} tag) to two lines, and then renders the rest "/XXXXX-111_xxxxxxxxxxxxxxxxx" at the right side of that, even centering it vertically: !firefox-91.8.0esr.png|thumbnail! I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow. If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr: !firefox-91.8.0esr-without-inline-flex.png|thumbnail! Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&#x200B;}}, then Firefox 91.8.0esr renders like this: !firefox-91.8.0esr-ZWSP.png|thumbnail! |
Summary | Original: inline-flex wbr oddity on Build history page using Firefox 91.8.0esr | New: Strange line breaks on Firefox 91.8.0esr when Build History uses wbr within display: inline-flex |
Labels | Original: css | New: css ux |
kon Is this a recent regression or a long-standing issue? If it is a regression, do you know the last working version?