#383 Fixed the main interface layout

[username-011]

To compare before:

and after:

[Splode]

Brilliant! Thank you for the PR. Mostly, it looks good, although I notice the Start button (>) is skewed far to the right when the primary window is resized larger than the default size (see screenshot).

[username-011]

Brilliant! Thank you for the PR. Mostly, it looks good, although I notice the Start button (>) is skewed far to the right when the primary window is resized larger than the default size (see screenshot).

Hm, strange. I can't replicate it on my machine.

The only noticeable change there should be that there is style="transform: translateX(4px);". But it doesn't look like 4px on your screenshot, I can't replicate and so I don't know what might be the cause. @Splode can you take a look in the devtools to see what might be causing it for you?

[Splode]

The new SVG uses points="0,0 24,12 0,24" with style="transform: translateX(4px)" to center the triangle, but translateX(4px) is in CSS pixels while the viewBox maps 24 units into 18px — so the offset is wrong and the tip bleeds past the button with overflow: visible. This is corrected by reverting to the original points="5,3 21,12 5,21" at width="24" height="24", which are inherently centered without needing a transform. For reference, I am using Ubuntu 24.04.

Also, the PR converts all string literals to double quotes — please revert those to match the single-quote style used throughout the project.

The rest of the changes look good. Happy to re-review once these are addressed!

[username-011]

No, the explanation you gave is wrong. The original points="5,3 21,12 5,21" isn't centered, it just has meaningless padding from the viewbox of 0 0 24 24. The real size of the button is 21 - 5 = 16px, with some incorrect padding to make it improperly centered. I've rewritten it to use 0 0 24 12 0 24, which would be exactly the same shape, but bigger (24px instead of 16px). Then I made it smaller by changing the svg's width and height to 18px instead of 24px.

which are inherently centered without needing a transform

If it was properly centered, then I wouldn't do this PR.
The original is improperly centered. It is based on the median of X, it means that the center of the viewbox is at X: 24 / 2 = 12, while the triangle shape's center is actually at X ~10.33, which isn't ideal setup and don't look centered for a human eye.
Correctly centered shape is a shape centered based on Centroid. Using my rewritten shape it would be X: 24 / 3 = 8.
The difference between viewbox Median centering (using 0 0 24 12 0 24 for simplicity) and correct Centroid centering is Median X - shape's Centroid X = 12 - 8 = 4px.
The transform: translateX(4px); is doing exactly that: moving the icon from it's Median center point to Centroid center point. It should be applied before the svg's width and height paramets take effect and rescale the whole icon.

For comparison here is the icon at
<svg width="24" height="24" viewBox="0 0 24 24" style="overflow: visible;" class="svelte-1he4d7p"><polygon points="0 0 24 12 0 24" fill="currentColor" style="transform: translateX(4px);" class="svelte-1he4d7p"></polygon></svg>

Notice that it is correctly centered at it's natural size of 24px which equals the viewbox. Now take a look at the scaled down to 16px version:
<svg width="16" height="16" viewBox="0 0 24 24" style="overflow: visible;" class="svelte-1he4d7p"><polygon points="0 0 24 12 0 24" fill="currentColor" style="transform: translateX(4px);" class="svelte-1he4d7p"></polygon></svg>

Notice that the icon's center is exactly at the same place. That means that transform: translateX(4px) is applied first, and only then the button rescales.
Even though it's using 4px (absolute value), it is properly scaled based on the svg context. At least, that's how it working on my machine.

If you have a better explanation, then I can listen, but the current one you gave didn't quite help in determining the issue why we have a different behavior, even though we should be using the same code.

Also, the PR converts all string literals to double quotes — please revert those to match the single-quote style used throughout the project.

That is the behavior of a default Svelte formatter. Natural question: why aren't you using the default Svelte formatter? If you insist on using some arbitrary formatting guidelines, I'd ask you to commit a formatter configuration file to the root of the project so that every person who contributes to this repo can have their IDE automatically read it and adhere to those formatting rules without the trouble of someone automatically converting and then manually reverting something back and forth.
See https://github.com/sveltejs/prettier-plugin-svelte and create a .prettierrc file with your desired formatting configuration.
Otherwise, honestly I won't bother to convert it manually. If you aren't interested, you can close this PR then.

[Splode]

Well, I am not quite sure then why we are seeing the skewed appearance when the window is enlarged.

Regarding the formatting, I was unaware of the Svelte formatter. Thanks for bringing it to my attention. The choice of double-quotes is simply the project convention at this point in time.

[username-011]

Hm, I still can't recreate the issue, but in f1afd0e I tried removing transform css and moving it directly into the polygon's points. Visually for me it seems to be exactly the same. @Splode can you see if it's fixed now on your end?

[Splode]

With f1afd0e, the arrow maintains its position when the window is enlarged. So, looks good.