Submission: Fix messed up thanks you screen dot pattern

[renintw]

Fixes #224

TODO (Maybe)

• Make the dot pattern in https://wordpress.org/showcase-v2/submit-a-wordpress-site/ (Login/Non-login) also align with the text on both sides.

[adamwoodnz]

There's an issue with the image not repeating properly, see the double dots in your screenshot and here's a close up:

It's visible on the right and left above ~1330px wide. This isn't happening on main so I'm guessing the image crop has changed slightly.

[renintw]

Thanks @adamwoodnz! Nice catch.

Hi @marko-srb 👋

Can you help trim the image you provided in the ticket? Just trim the top, bottom, and left margins, leaving the right margin intact.

This is the original broken image. It appears normal when applied with repeat-x, so the right margin's whitespace needs to be preserved.

[marko-srb]

I see this is solved, and I see dot exports in Figma.

In case you still need my help, let me know. Thanks!

[renintw]

Update Screencast

dark.dots.mov

Here are some notes from my discussion with @jasmussen :

Joen mentioned if we can have the image align with the text on both sides. However, since the image is positioned at center/right/left and then repeat-x, there will still be some gaps.

For instance, when positioned at center, the image will repeat left and right until it can no longer repeat, naturally creating some small gaps.

Left	Right

While positioning it to the left would always align it with "Home", but as it repeats to the right, it creates a larger gap near "View All Sites", which can make the layout look a bit odd at certain screen sizes. Center positioning seems to be a better option in this scenario.

Bigger Gap on the right side	Look weird overall on certain screen sizes

Also added a TODO in the PR description, I guess we need to change the dot pattern on other pages accordingly?

[jasmussen]

I think this can work.

Just to wrap the concept, here's an alternative that I think could also work: https://codepen.io/joen/pen/BavbKQJ?editors=1100 — horizontally tiling.

[renintw]

Horizontally Tiling

Submit Page (Black Dots)	Login Page (Blue Dots)	Thank you Page

If it looks great, I'll merge it as is.

[jasmussen]

Looks good. If you can add or 4px margin or padding on the left, that'd be good, the dots almost line up with News but not quite. Thanks for keeping on this.

[renintw]

Is this the line you're referring to, it seems already lined up. I might've mistaken the context, though.

[jasmussen]

Oh, you're right! It was an optical imbalance on my part. They are indeed lined up. Thank you for the attention to detail, ship it.