feat: add an option to display driver names instead of TLAs

[r4ai]

close #270

Changes

This PR mainly does the following:

• Adds an option on the Settings page to toggle whether drivers’ last names are displayed (the default is false, so the UI looks the same as now by default).
• Tweaks the styles so the layout stays intact even when drivers' names are shown.

If you feel this feature isn’t needed, feel free to close the PR.

Notes

All this PR does is add an option on settings page; the default presentation remains unchanged.

What to Review

To display drivers’ names on the dashboard, the CSS used for the LeaderBoard layout has been switched from Flexbox + Grid to Subgrid. Because this is a relatively large change, there may be unintended layout issues elsewhere. Also, some margins and spacing differ slightly from the current design, so please confirm whether those differences are acceptable.

Screenshots of the App

When driver names are shown:

When driver TLAs are shown:

[vercel]

@r4ai is attempting to deploy a commit to the f1-dash Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
f1-dash	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 26, 2025 9:12pm

[slowlydev]

Thanks for the PR.

I think this feature has its use case for newcomers, but I think the current implementation isn't optimal as I personally think it doesn't fit well. Maybe something else than the DriverTag could be used when using full names.

What do you think?

Also, loading state seems broken, which might be caused by the sub grid change, like you mentioned.

[r4ai]

@slowlydev Thank you for the review!

I think this feature has its use case for newcomers, but I think the current implementation isn't optimal as I personally think it doesn't fit well. Maybe something else than the DriverTag could be used when using full names.

What do you think?

When you say the current implementation isn't optimal, do you mean that the issue lies not in the design but in the choice of component?

If that's the case, I thought it might be better to create a new DriverName component instead of using DriverTag.

Also, regarding the design, I personally felt that when displaying driver names, it might be better to use a sans-serif font rather than a monospaced one.

Also, loading state seems broken, which might be caused by the sub grid change, like you mentioned.

I fixed it in 5687e2c

[slowlydev]

A bit of design because it's just the driver tag which doesn't really look good with the full name, the amount of white, and the spacing. Maybe we would show the full name on two rows + the position. Also, yes, a sans-serif would probably look better, and all of that could maybe be done in a different component.