Fix design of subscription form in chrome and safari

[apeatling]

Fixes #169

Fix up the subscription button so it aligns correctly in safari and chrome. Also fix the placeholder text size.

Before	After

Testing Instructions

Because you need a Jetpack connection to test, you will instead need to manually add the following subscription form HTML to source/wp-content/themes/wporg-news-2021/block-template-parts/footer-archive.html in place of the shortcode:

<div class="jetpack_subscription_widget">
                <form action="#" method="post" accept-charset="utf-8" id="subscribe-blog-474">
                    <div class="jetpack-subscribe-count">
                        <p>
                            Join 1 other subscriber </p>
                    </div>
                    <p id="subscribe-email">
                        <label id="jetpack-subscribe-label" class="screen-reader-text" for="subscribe-field-474">
                            Email Address </label>
                        <input type="email" name="email" required="required" value="" id="subscribe-field-474"
                            placeholder="Email Address">
                    </p>

                    <p id="subscribe-submit">
                        <input type="hidden" name="action" value="subscribe">
                        <input type="hidden" name="source" value="https://wordpress.org/news-test/">
                        <input type="hidden" name="sub-type" value="widget">
                        <input type="hidden" name="redirect_fragment" value="474">
                        <button type="submit" class="wp-block-button__link" style="margin-left: 0px;"
                            name="jetpack_subscriptions_widget">
                            Subscribe </button>
                    </p>
                </form>
</div>

[apeatling]

Dark version has also been updated:

Before	After

[ryelle]

Cool, hit cmd-enter without meaning to— words coming soon :)

The sizing is fixed on both footer variations 🎉

On smaller screens (when it hits the single col breakpoint), the block isn't full-width. I don't think your changes introduced this, but it could be fixed here.

On the dark footer: in firefox, I don't see the placeholder, and in both FF & Chrome, text I type in is invisible (white).

According to the design, the input text should be 16px, but seems to be 13.333px.

[apeatling]

Will get these changes done on Monday 👍

[apeatling]

Fixed the width and white text, ready for another review @ryelle.

[ryelle]

Looks good now, thanks for fixing it!