Fix submit button positioning on mobile and bottom margin in newsletter CTAs

Author: webstackdev

src/components/Animations/Confetti/index.astro

@@ -4,9 +4,18 @@
  *
  * The client web component respects global animation lifecycle state via the store.
  */
+export interface Props {
+  /** Additional classes to add to the component wrapper */
+  classes: string
+}
+
+const { classes } = Astro.props
 ---
 
-<confetti-animation class="confetti-animation relative block" data-testid="confetti-animation">
+<confetti-animation
+  class:list={["confetti-animation relative block", classes]}
+  data-testid="confetti-animation"
+>
   <canvas
     data-confetti-canvas
     aria-hidden="true"

src/components/CallToAction/Newsletter/layouts/article.astro

@@ -29,7 +29,7 @@ const buttonText = 'Subscribe'
       </p>
 
       <form id="newsletter-form" class="space-y-4">
-        <div class="flex gap-3 pt-4">
+        <div class="flex flex-col md:flex-row gap-3 pt-4">
           <div class="relative flex items-center gap-2 flex-1 after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-within:after:-inset-1 focus-within:after:border-spotlight">
             <span class="text-success">$</span>
             <label id="newsletter-email-label" for="newsletter-email" class="sr-only">
@@ -45,7 +45,7 @@ const buttonText = 'Subscribe'
               aria-describedby="newsletter-message"
             />
           </div>
-          <Confetti>
+          <Confetti classes="self-end md:self-auto">
             {/** Intentionally not using Button component. */}
             <button
               type="submit"