www.credit-agricole.fr – “Open Hours“ exceed the allocated table space

[softvision-oana-arbuzov]

URL: https://www.credit-agricole.fr/spip.php?page=detail_agence&id_agence=6443&id_secteur_contexte=2455
Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-05-09)
Operating System: Nexus 5 (Android 6.0.1) - Resolution 1080 x 1920 pixels (~445 ppi pixel density)
Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: https://www.credit-agricole.fr/spip.php?page=detail_agence&id_agence=6443&id_secteur_contexte=2455
2. Observe “Horaires D’Ouverture” (“Open Hours”) section.

Expected Behavior:
The hours fir in the allocated table space.

Actual Behavior:
The hours exceed the allocated table space.

Note:

1. Reproducible on Firefox 52.0 Release
2. Not reproducible on Chrome (Mobile) 57.0.2987.132.
3. Screenshot attached.

Watchers:
@softvision-sergiulogigan
@softvision-oana-arbuzov

sv; country: fr

From webcompat.com with ❤️

[MDTsai]

The time is in a table. I think reason is by the default font size. Maybe add word-wrap could solve this issue.

[softvision-oana-arbuzov]

The issue is still reproducible.

Affected area:

<div>
   <table>
      <tbody>
         <tr class="odd">
            <td class="jour">Lundi</td>
            <td>fermé</td>
         </tr>
         <tr class="even">
            <td class="jour">Mardi</td>
            <td>08h15-12h00|13h30-17h30</td>
         </tr>
         <tr class="odd">
            <td class="jour">Mercredi</td>
            <td>08h15-12h00|13h30-17h30</td>
         </tr>
         <tr class="even">
            <td class="jour">Jeudi</td>
            <td>08h15-12h00|13h30-15h45</td>
         </tr>
         <tr class="odd">
            <td class="jour">Vendredi</td>
            <td>08h15-12h00|13h30-17h30</td>
         </tr>
         <tr class="even">
            <td class="jour">Samedi</td>
            <td>08h15-12h15</td>
         </tr>
         <tr class="odd">
            <td class="jour">Dimanche</td>
            <td>fermé</td>
         </tr>
      </tbody>
   </table>
</div>

Modifying the font-size from default to .7500em, the text no longer exceeds the allocated space.

#pleine-page .agence-horaires table {
    font-size: .8571em;
}

Note that the issue is not reproducible on Google Pixel (Android 8.1.0) - 1080 x 1920 pixels (~441 ppi pixel density).

Tested with:
Browser / Version: Firefox Mobile Nightly 59.0a1 (2018-01-04)
Operating System: Samsung Galaxy S7 Edge (Android 7.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

[karlcow]

Both Chrome and Firefox have for table in their browser stylesheet

word-break: normal
word-spacing: 0px
word-wrap: normal

I guess the difference seems to be about how - is handled in Chrome and in Firefox.

Firefox right
Chrome left

https://codepen.io/webcompat/pen/YareqB

Chrome allows to break after the - it means that it is a breakable character. It's very similar to this issue
https://bugzilla.mozilla.org/show_bug.cgi?id=1423408

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1448776

[karlcow]

I opened a new bug on bugzilla about it.