fix: resolve red star and input field misalignment (freeCodeCamp-2025-Summer-Hackathon#168)

Author: Vallayah

frontend/src/components/RegisterForm.jsx

@@ -87,19 +87,22 @@ export function RegisterForm({ redirect_to = '/' }) {
 
   return (
     <form ref={formRef} onSubmit={handleSubmit(onSubmit)}>
-      <label className='floating-label flex justify-between py-2'>
-        Username: <span className='text-red-500'>*</span>
+      <div className='form-group'>
+        <label htmlFor='username' className='form-label'>
+          Username: <span className='text-red-500'>*</span>
+        </label>
         <label className='input input-sm'>
           <UserIcon />
           <input
+            id='username'
             {...register('username', { required: true })}
             type='Text'
             placeholder='Username'
             className='input-validator'
             aria-invalid={!!errors.username}
           />
         </label>
-      </label>
+      </div>
       {errors.username?.type === 'required' ? (
         <p role='alert' className='text-error'>
           The field "Username" is required.
@@ -113,38 +116,44 @@ export function RegisterForm({ redirect_to = '/' }) {
         )
       )}
 
-      <label className='floating-label flex justify-between py-2'>
-        Name: <span className='text-red-500'>*</span>
+      <div className='form-group'>
+        <label htmlFor='name' className='form-label'>
+          Name: <span className='text-red-500'>*</span>
+        </label>
         <label className='input input-sm'>
           <UserIcon />
           <input
+            id='name'
             {...register('name', { required: true })}
             type='Text'
             placeholder='Name'
             className='input-validator'
             aria-invalid={!!errors.name}
           />
         </label>
-      </label>
+      </div>
       {errors.name?.type === 'required' && (
         <p role='alert' className='text-error'>
           The field "Name" is required.
         </p>
       )}
 
-      <label className='floating-label flex justify-between py-2'>
-        Password: <span className='text-red-500'>*</span>
+      <div className='form-group'>
+        <label htmlFor='password' className='form-label'>
+          Password: <span className='text-red-500'>*</span>
+        </label>
         <label className='input input-sm'>
           <PasswordIcon />
           <input
+            id='password'
             {...register('password', { required: true, minLength: 8 })}
             type='Password'
             placeholder='Password'
             className='input-validator'
             aria-invalid={!!errors.password}
           />
         </label>
-      </label>
+      </div>
       {errors.password?.type === 'required' ? (
         <p role='alert' className='text-error'>
           The field "Password" is required.
@@ -157,11 +166,14 @@ export function RegisterForm({ redirect_to = '/' }) {
         )
       )}
 
-      <label className='floating-label flex justify-between py-2'>
-        Repeat Password: <span className='text-red-500'>*</span>
+      <div className='form-group'>
+        <label htmlFor='repeatPassword' className='form-label'>
+          Repeat Password: <span className='text-red-500'>*</span>
+        </label>
         <label className='input input-sm'>
           <PasswordIcon />
           <input
+            id='repeatPassword'
             {...register('repeatPassword', {
               required: true,
               validate: value => getValues('password') === value,
@@ -172,7 +184,7 @@ export function RegisterForm({ redirect_to = '/' }) {
             aria-invalid={!!errors.repeatPassword}
           />
         </label>
-      </label>
+      </div>
       {errors.repeatPassword?.type === 'required' ? (
         <p role='alert' className='text-error'>
           The field "Repeat Password" is required.

frontend/src/styles.css

@@ -99,7 +99,7 @@
   --idea-form-sub-heading-margin-bottom: 1.5rem;
   --form-group-margin-bottom: 1rem;
   --form-label-margin-bottom: 0.5rem;
-  --form-input-padding: 1.2rem;
+  --form-input-padding: 1.3rem;
   --form-textarea-min-height: 10rem;
   --voting-section-margin-top: 1.5rem;
   --voting-section-padding: 1.5rem;
@@ -734,12 +734,19 @@ body {
   padding: 0 var(--spacing-md);
 }
 
+.idea-form .animated-button {
+  display: block;
+  margin: 0 auto;
+}
+
 .form-group {
   margin-bottom: var(--form-group-margin-bottom);
   width: 100%;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
+  max-width: 50rem;
+  margin: 0 auto var(--form-group-margin-bottom);
 }
 
 .form-label {
@@ -749,16 +756,20 @@ body {
   color: var(--palette-primary-text);
   margin-bottom: var(--form-label-margin-bottom);
   width: 100%;
-  max-width: 50rem;
   text-align: left;
 }
 
+.form-group .input {
+  width: 100%;
+  margin: 0;
+}
+
 .form-input,
 .form-textarea,
 .form-select {
   width: 100%;
   max-width: 50rem;
-  padding: 1.2rem;
+  padding: var(--form-input-padding);
   border: var(--border-width-thin) solid var(--palette-borders-separators);
   border-radius: var(--border-radius-sm);
   font-size: 1rem;
@@ -768,7 +779,6 @@ body {
     border-color 0.2s ease-in-out,
     box-shadow 0.2s ease-in-out;
   box-sizing: border-box;
-  margin-inline: auto;
 }
 
 .form-input:focus,