CSS fixes for Start Page navigation using keyboard?

[Pathduck]

Since the last Snapshot, Tab can no longer be used to navigate the Start Page dials. Which sucks since I try to use the keyboard as much as possible.

However, it seems the arrow keys can now be used instead. Unfortunately because of my modded Start Page it does not work as expected.

It seems to "assume" a fixed width and number of dials per line, and since my mod has removed margins etc to enable more dials, keyboard nav using arrows also breaks

So are any of you CSS experts out there ( @potmeklecbohdan? ) able to give any input if I can change anything to make it work?

Here's my current CSS mod, single file and not advanced at all. No JS.
https://pathduck.vivaldi.net/2019/09/my-current-vivaldi-css-modification/

It's probably related to the position/transform/display of the .speeddial .dial element. I remember trying a lot of different things before I got it to work as I wanted, with good help from others I can't remember.

Any tips?

[Pesala]

@Pathduck Why do we need a mod at all now that the arrow keys work as expected?

[Pathduck]

@Pesala They don't work as expected, that's the problem. With my mod, using for instance right-arrow stops after 6 dials, and I'm unable to access the seventh on the same line.

The biggest problem is that the area for the dials is hard-coded to pixels, dependent on the window size. For for me on 2560x1440, the dials area is 1500px wide. I want the dials to take up the entire available area and that's what my mod does. But it leads to keyboard nav now being broken, which is what I'm asking help with; maybe there's other ways to accomplish the same that wouldn't break.

[A Former User]

I don't think I can fix this. Does the setting Start Page → Speed Dial → Maximum Columns help a bit?

[Pathduck]

@potmeklecbohdan No, I've set that to 8. The mod I use "flows" the dials so that setting doesn't seem to do anything, it just fits the most dials it can on one line, at full-screen 7, but I can only access 6 with the arrow keys. It seems to think the last one is actually on the next line.

I think there's some hard-coding of the size of the dials area dependent on resolution and it calculates the max number of dials per line from that or something similar.

[Pathduck]

I've been banging my head against this a couple of times lately, when I can find the energy to try again.
Main thing is I can't figure out how to remove the default margins at top and sides to make more dials fit into one line, while at the same time keeping the flex display so it won't break keyboard navigation.

It seems the sizing of some of the containers is weird, like if I set .dial-columns to 100% all the dials are left-aligned which is not what I want...

At the moment I have this, because I like things centered even if uneven:

But I'd be happy to have this if I can have working keyboard navigation: