[ADE-63] - Standardize CSS Units Across Auth Components

- Added guidelines for using relative CSS units in general.mdc to ensure consistency.
- Updated max-width in ForgotPasswordPage and ResetPasswordPage from 500px to 31.25rem.
- Changed margin values in ForgotPasswordForm and ResetPasswordForm from 16px to 1rem for better responsiveness.
- Adjusted gap in ResetPasswordForm's message section from 8px to 0.5rem to align with new standards.

Author: jkestering-modus

.cursor/rules/general.mdc

@@ -71,3 +71,55 @@ Technologies:
 
 
 AWS architecture: [aws architecture.pdf](mdc:docs/assets/aws architecture.pdf)
+
+# CSS Units Standards
+
+## Relative Units Requirement
+
+- **ALWAYS use relative units** instead of absolute pixel values (px) in CSS/SCSS
+- **Preferred relative units**:
+  - `rem` for most measurements (margins, paddings, font sizes)
+  - `em` for spacing related to the current element's font size
+  - `%` for responsive layouts and containers
+  - `vh/vw` for viewport-relative sizing
+  - `ch` for width measurements related to character width
+
+## Conversion Reference
+
+- `1rem` = base font size (typically 16px)
+- To convert px to rem: `[px value] / 16 = [rem value]`
+  - Example: `16px` = `1rem`, `24px` = `1.5rem`, `8px` = `0.5rem`
+
+## Why Relative Units?
+
+- **Accessibility**: Scales with user font size preferences
+- **Responsiveness**: Adapts to different viewport sizes
+- **Maintainability**: Easier to scale entire UI by changing root font size
+- **Consistency**: Creates a more harmonious design system
+
+## Limited Exceptions
+
+- Media queries may use px units (`@media (min-width: 768px)`)
+- 1px borders when a single-pixel line is required
+- Box shadows where precise control is needed
+
+## Examples
+
+```scss
+// ❌ AVOID
+.element {
+  margin: 16px;
+  padding: 8px 12px;
+  font-size: 14px;
+}
+
+// ✅ PREFERRED
+.element {
+  margin: 1rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+```
+```
+
+This rule provides clear guidelines on what units to use, how to convert between units, and why it's important for your project. You can add this to your general rules to ensure consistency across the codebase.

frontend/src/pages/Auth/ForgotPassword/ForgotPasswordPage.scss

@@ -8,7 +8,7 @@
 
   &__form {
     width: 100%;
-    max-width: 500px;
+    max-width: 31.25rem;
     margin: 0 auto;
   }
 } 

frontend/src/pages/Auth/ForgotPassword/components/ForgotPasswordForm.scss

@@ -2,19 +2,19 @@
   padding: 1rem;
 
   &__input {
-    margin-bottom: 16px;
+    margin-bottom: 1rem;
   }
 
   &__button {
-    margin-top: 16px;
+    margin-top: 1rem;
   }
 
   &__message {
-    margin-bottom: 16px;
+    margin-bottom: 1rem;
   }
 
   &__success {
-    margin-bottom: 16px;
+    margin-bottom: 1rem;
     text-align: center;
   }
 } 

frontend/src/pages/Auth/ResetPassword/ResetPasswordPage.scss

@@ -8,7 +8,7 @@
 
   &__form {
     width: 100%;
-    max-width: 500px;
+    max-width: 31.25rem;
     margin: 0 auto;
   }
 } 

frontend/src/pages/Auth/ResetPassword/components/ResetPasswordForm.scss

@@ -2,26 +2,26 @@
   padding: 1rem;
 
   &__input {
-    margin-bottom: 16px;
+    margin-bottom: 1rem;
   }
 
   &__button {
-    margin-top: 16px;
+    margin-top: 1rem;
   }
 
   &__message {
-    margin-bottom: 16px;
+    margin-bottom: 1rem;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 0.5rem;
   }
 
   &__email {
     color: var(--ion-color-dark);
   }
 
   &__success {
-    margin-bottom: 16px;
+    margin-bottom: 1rem;
     text-align: center;
   }
 }