Visual distinction of grandfathering as less fair

[chantalwuer]

• Update order of allocation rules
• add extra text to GF mouseover ("Not considered fair")
• make GF text gray in StatsTable
• improve how columns are displayed in StatsTable.svelte
• Add (i) mouseover to Grandfathering with more info on why it is gray (--> can be added later on, not important)

@sverhoeven @Peter9192
I changed the order of the allocation rules and the colour with how grandfathering is displayed. By changing the order of the rules, the columns on the country pages now also moved in width and I could not quite figure out how to make them better aligned. The spacing in between did not look great and should be adjusted. Can one of you have a look at this?

Fixes #52

[chantalwuer]

@Peter9192 @sverhoeven
Could one of you have a look at the issue with the column width? I changed in which order the allocation rules are displayed but that messed up the column widths of the table on the country pages and I couldn't figure out how to change that.

[Peter9192]

For me it looks like this:

You mean that the headers are not aligned with the content, right?

[Peter9192]

@Peter9192 @sverhoeven Could one of you have a look at the issue with the column width? I changed in which order the allocation rules are displayed but that messed up the column widths of the table on the country pages and I couldn't figure out how to change that.

It looks like this issue was already present before this PR. It seems to emerge because we're (erroneously) using <th> instead of <td> in the table body.

[chantalwuer]

For me it looks like this:

You mean that the headers are not aligned with the content, right?

The spacing in between columns looks at bit chaotic. I don't like that the space between per capita and per capita convergence is not as big as between PCC and Ability to pay. So it would be nicer if those spaces were all equal. Maybe it also looks better when the headers are aligned with the content.

Comparing with the current version it doesn't look that strange anymore (the spaces there are also not equal apparently). Not sure if that was different before but regardless would be nice to adjust if possible.

[Peter9192]

Note that I gave only one example; you need to apply the same changes in the other parts of the table.

[chantalwuer]

@Peter9192
Thanks, I adjusted also the other two rows of the table.
It looks better but the gaps in between the columns are still quite wide. Is there something we can do about that? (This is now from a different screen than what I screenshotted before)

[Peter9192]

it would be nicer if those spaces were all equal

I think you could use table-fixed instead of table-auto: https://tailwindcss.com/docs/table-layout. I'm not sure, but it might affect the total width of the table, such that it may or may not fit on the page anymore.

[chantalwuer]

it would be nicer if those spaces were all equal

I think you could use table-fixed instead of table-auto: https://tailwindcss.com/docs/table-layout. I'm not sure, but it might affect the total width of the table, such that it may or may not fit on the page anymore.

The table looks nice that way but the whole page layout gets moved. Maybe @sverhoeven has another idea?