Fix/Column title in label options not properly aligned

[robLittiere]

Hello Magrit team,

I noticed a very very minor thing while implementing the new changes introduced since 0.15.0.

The fields titles in the label creation popup are not vertically aligned and can overlap if the column name is too long. I did a small CSS fix, I'll let you check it out. It's basically not forcing height and let the flexbox do its thing to align the items.

Before :

After :

If you don't like it or would like a change, please let me know,

Robin

[robLittiere]

I just realized another problem on that same issue. If the field property is only one word (even separated by an underscore "_") it will stay inline and break UI clarity.

Here is an exemple :

There are two fixes from the top of my head :

• We have the word-break CSS property such as :

  {
  word-break: break-word
  }

  We keep the full readable word even if it is broken, integrity is kept. Here is an exemple :

• There is the "clean" UI approach where we create an "..." ellipsis if the field's name is too long :

  {
    overflow: hidden;  
    white-space: nowrap;  
    text-overflow: ellipsis;  
  }

  We preserve a cleaner UI but we partially hide the field's name which could be an annoyance. Here is an exemple :

If you are interested in one of those changes, I can add them in a future commit quickly, since they are very minor and easy fixes.

Robin

[mthh]

Nice catch, thanks for raising this issue and proposing a fix !

I like the clean UI approach where an ellipsis is added when the name is too long (this is already what is done for the layer name - cf. screenshot below - although this is done manually and not directly in CSS with the text-overflow property).

In this case I think it could be beneficial to display the full name of the field when the hovering the cursor on the clipped field name (which is not done yet for the layer name displayed above). A simple tooltip, using the HTML title attribute should be enough.

[robLittiere]

I agree completly, I do think the clean UI is better IF we give a chance to the user to see the full field name. I added the css in the latest commit, I'll get add the attribute or add a small tooltip a bit later 👍. I think it would be nice to keep it html/css properties as it would reduce javascript code and event listeners bloat, what do you think ?

[mthh]

Thanks !

I think it would be nice to keep it html/css properties as it would reduce javascript code and event listeners bloat, what do you think ?

Indeed, I totally agree :+1:

[robLittiere]

After trying different things, the best/simplest solution remained adding a simple title attribute. The last commit did just that.

[mthh]

Thanks a lot !