search

jovandeginste / workout-tracker

A workout tracking web application for personal use (or family, friends), geared towards running and other GPX-based activities
Other
945 stars 31 forks source link

Alignment of columns in tables #257

Closed pixelspark closed 3 weeks ago

pixelspark commented 1 month ago

The columns in some tables are not quite aligned, which makes them look a bit cluttered and difficult to compare rows. This first example is almost okay, it just looks a bit messy:

image

The next example however is not so great:

image

I'd just put the different values in separate <td>s. However, if you like the current style visually, an easy fix is setting a min-width on the labels so they line out most of the time.

Another thing to consider, which I think is even better, is setting a max-width on the labels/<td>s. I'd then add this CSS (I am not familiar with Tailwind but it probably has something for this):

max-width: 123px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

This will make longer texts be cut off nicely. To make it really good, add a <td title="full text in the td"> title attribute, so you can read all of the text while hovering 💯

jovandeginste commented 1 month ago

I made a PR which mostly addresses this - can you check it out (together with the other changes in master)