Track titles aren't aligned in album view

[lexxkoto]

This is a minor design quirk rather than a major bug - I know I'm being fussy by reporting this. I'll counter that by saying I really like the Spot app and it has replaced the official Spotify client on all my Linux machines. Spot is much more pleasant to use.

Describe the bug
When looking at an album, the track titles aren't aligned with each other. When the track number jumps from '9' to '10', the titles jump slightly to the right.

To Reproduce
Steps to reproduce the behavior:

1. Open Spot
2. Find an album with more than nine tracks
3. Notice the titles aren't in line with each other.

Expected behavior
Track titles should be consistently left-aligned with each other. The following screenshot is the same album stored locally, displayed in Gnome Music. Notice the track titles are consistently aligned, and the track number column is slightly wider and right-aligned. Applying a minimum width to the track number and right-alignng it would probably be the neatest solution.

General information:

• Distribution: Ubuntu 20.04
• Installation method: Built from source and installed without Flatpak. -Dbuildtype=release -Doffline=false --prefix="/usr"
• Version: 0.1.13
• Device used: Desktop

Tested with several different GTK themes, including Adwaita, Arc, Pocillo, Qogir, and Mojave-light-alt (used in screenshots). All display the same behaviour.

[xou816]

Not being fussy, no worries :) it's an issue worth reporting, good catch! Just not the top priority, of course. (Can't unsee it now though 😄 )

Indeed, minimum width + right alignment should do the trick!

[lexxkoto]

I've made some changes to my local copy of Spot and recompiled. Two caveats:

First, I'm a web developer, not a local app developer, so I'm hoping this is a decent fix. Second, I'm not an expert in UIs that work with multiple languages, especially right-to-left languages. So I hope this wouldn't break Spot for any right-to-left languages like Arabic.

Here's the changes I made:

Added to src/app.css:

.playlist.details__songs .song .song__index { min-width: 1.5em; }

Added the following property to GtkLabel#song_index in src/app/components/playlist/song.ui:

<property name="xalign">1</property>

1.5em should be wide enough to keep tracks up to 99 aligned.I hope there are no Spotfy albums with more than 100 or 1,000 songs!

[xou816]

This sounds like a reasonable fix! Feel free to open a PR with these changes :)

While there probably aren't a lot of albums with 100+ tracks (there are!), we also have to take playlists into account here, and these can reach well above 1000 tracks! Probably safer to go with something slightly larger?

As for rtl languages, translations have only recently been added to the app, so I guess that's a problem for future me 😬