Stocktake: column labels overlap

[richardmoizeau]

What went wrong? 😲

Expected behaviour 🤔

No overlap :-)

How to Reproduce 🔨

Use the language "Français (Djibouti) and do a stocktake (on laptop)

Your environment 🌱

• Version: 1.6.03
• mSupply version: Desktop (Windows)

[richardmoizeau]

Another example in "Inbound Shipment": words are Emplacement (Location) & Boite (Pack)

[Chris-Petty]

This is going to be real tricky to get right with localisation.

Needs design input due to the overcrowded columns on Desktop, let alone android.

Needs architecture/solution because reviewing every localisation for every element will be very demanding - can the software warn us? Either FE tooling that checks element width against all localisations? UI testing tooling? This could be a wider, separate issue made if nothing small can be done.

[clemens-msupply]

Tried to add an ellipsis:

First I thought I display the full label in a tool tip but we already have the sort helper... So not sure what to do. Can keep the ellipse and then just ignore translations that are too long? But this would only slightly be better than having the overlap...

Could also try to detect the ellipse in js and show the full header instead of the sort helper in this case...

[mark-prins]

How about changing the tooltip like this:

const columnLabel = column.label === '' ? '' : t(column.label);
  const tooltip = (
    <>
      {!!description && <div>{t(description)}</div>}
      {sortable ? (
        <div>
          {t('label.click-to-sort')}
          {` ${columnLabel}`}
        </div>
      ) : (
        columnLabel
      )}
    </>
  );

that way the tooltip says the column name in the sort hint:

and displays the column name if there's no sort:

[marthakeezy]

Just tested on V1.7.0, the column titles don't seem to be overlapping anymore, however there is still the issue of titles not displaying fully across omSupply, not only under Stocktakes. However, it is a different issue :) This one is PASSED ✅