fix: alert message is not positioned properly (#15995)

* fix: correct button functionality in alert component

* add: bottom margin to alert component

* revert alert comp changes

* small update

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>

apps/web/pages/signup.tsx

@@ -323,7 +323,12 @@ export default function Signup({
           <div className="ml-auto mr-auto mt-0 flex w-full max-w-xl flex-col px-4 pt-6 sm:px-16 md:px-20 lg:mt-12 2xl:px-28">
             {/* Header */}
             {errors.apiError && (
-              <Alert severity="error" message={errors.apiError?.message} data-testid="signup-error-message" />
+              <Alert
+                className="mb-3"
+                severity="error"
+                message={errors.apiError?.message}
+                data-testid="signup-error-message"
+              />
             )}
             <div className="flex flex-col gap-2">
               <h1 className="font-cal text-[28px] leading-none ">