Find way to avoid wrapping dates in tables in mobile view

[zkamvar]

Not sure how to do this because dates are incredibly hard to parse, but there is a situation that was found where dates wrap in mobile view: https://github.com/carpentries/lesson-transition/issues/65

[bencomp]

Did you fix this already? Looking at this table in Firefox's responsive mode, the issue is not very prominent anymore. My suggestion would be to use more of the screen when space is tight. Set smaller margins and a smaller gap between the columns. It will not work for all tables, but it should work for this one.

[zkamvar]

Hi @bencomp,

No, this has not been fixed. Checking on my device (an iPhone SE, which I have gotten several comments about how cute it is because it's so small), it's still an issue on Firefox and Safari mobile.

Set smaller margins and a smaller gap between the columns. It will not work for all tables, but it should work for this one.

It's weirdly difficult to define how wide a table should be using markdown: https://pandoc.org/MANUAL.html#tables

I think the solution may be to set the overflow-wrap: word property to tables: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

[bencomp]

It's weirdly difficult to define how wide a table should be using markdown: https://pandoc.org/MANUAL.html#tables

I should have clarified that I meant this be changed in the CSS. Looking at your screenshot I feel the gap between the columns is quite big, as well as the margins on the left and right of the table. If your phone is cute/small, better make good use of the available space! This would not rule out setting overflow-wrap: word as well.

[zkamvar]

Ah,

This turns out to be a problem with the width of the column headers: https://carpentries.github.io/sandpaper-docs/episodes.html#tables

The table headers for the the first table in episode 1 are at a 2:1 ratio and quite long (which is likely from a weird bug in {tinkr} that I'm going to have to suss out).

This causes the table widths to be set at 64% and 36%, respectively:

<table class="table">
  <colgroup>
    <col width="65%">
    <col width="34%">
  </colgroup>
  ...

The solution is to shorten the table widths to their original lengths