@djangocfg/layouts 2.1.484 → 2.1.487

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.484",
+  "version": "2.1.487",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.484",
-    "@djangocfg/api": "^2.1.484",
-    "@djangocfg/centrifugo": "^2.1.484",
-    "@djangocfg/devtools": "^2.1.484",
-    "@djangocfg/i18n": "^2.1.484",
-    "@djangocfg/ui-core": "^2.1.484",
+    "@djangocfg/analytics": "^2.1.487",
+    "@djangocfg/api": "^2.1.487",
+    "@djangocfg/centrifugo": "^2.1.487",
+    "@djangocfg/devtools": "^2.1.487",
+    "@djangocfg/i18n": "^2.1.487",
+    "@djangocfg/ui-core": "^2.1.487",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -124,14 +124,14 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.484",
-    "@djangocfg/api": "^2.1.484",
-    "@djangocfg/centrifugo": "^2.1.484",
-    "@djangocfg/devtools": "^2.1.484",
-    "@djangocfg/i18n": "^2.1.484",
-    "@djangocfg/typescript-config": "^2.1.484",
-    "@djangocfg/ui-core": "^2.1.484",
-    "@djangocfg/ui-tools": "^2.1.484",
+    "@djangocfg/analytics": "^2.1.487",
+    "@djangocfg/api": "^2.1.487",
+    "@djangocfg/centrifugo": "^2.1.487",
+    "@djangocfg/devtools": "^2.1.487",
+    "@djangocfg/i18n": "^2.1.487",
+    "@djangocfg/typescript-config": "^2.1.487",
+    "@djangocfg/ui-core": "^2.1.487",
+    "@djangocfg/ui-tools": "^2.1.487",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/layouts/AuthLayout/components/steps/IdentifierStep.tsx

@@ -128,8 +128,9 @@ function IdentifierStepRaw() {
           className="auth-input"
         />
 
+        {/* Both opt-in rows share `auth-optin` — same control, same weight. */}
         {consentEnabled && (
-          <label className="auth-marketing-consent">
+          <label className="auth-optin">
             <Checkbox
               checked={consentChecked}
               onCheckedChange={(checked) => {
@@ -137,24 +138,24 @@ function IdentifierStepRaw() {
                 setMarketingConsent(checked === true);
               }}
               disabled={isLoading}
-              className="auth-marketing-consent-checkbox"
+              className="auth-optin-checkbox"
             />
             {/* Label copy comes from the consuming app — no product wording here. */}
-            <span className="auth-marketing-consent-label">
+            <span className="auth-optin-label">
               {marketingConsentConfig?.label}
             </span>
           </label>
         )}
 
         {rememberMeConfig?.enabled !== false && (
-          <label className="auth-remember">
+          <label className="auth-optin">
             <Checkbox
               checked={rememberMe}
               onCheckedChange={(checked) => setRememberMe(checked === true)}
               disabled={isLoading}
-              className="auth-remember-checkbox"
+              className="auth-optin-checkbox"
             />
-            <span className="auth-remember-label">
+            <span className="auth-optin-label">
               {rememberMeConfig?.label ?? 'Keep me signed in for 30 days'}
             </span>
           </label>

package/src/layouts/AuthLayout/styles/auth.css

@@ -404,9 +404,17 @@
   color: var(--foreground);
 }
 
-/* ===== MARKETING CONSENT (opt-in checkbox on the identifier step) ===== */
+/* ===== OPT-IN CHECKBOX ROWS (identifier step) =====
+ *
+ * One class for every opt-in row — marketing consent, remember-me, and whatever
+ * comes next. They are the same control doing the same job, so they must not
+ * drift apart in size, colour or alignment; two near-identical blocks are how
+ * the remember-me row ended up a step larger than the consent row above it.
+ *
+ * `align-items: flex-start` because a label may wrap to two lines: centring
+ * would then float the box against the middle of the paragraph. */
 
-.auth-marketing-consent {
+.auth-optin {
   display: flex;
   align-items: flex-start;
   gap: 0.625rem;
@@ -418,34 +426,13 @@
   user-select: none;
 }
 
-.auth-marketing-consent-checkbox {
+.auth-optin-checkbox {
   flex-shrink: 0;
   /* Optically align the box with the first line of the label copy. */
   margin-top: 0.0625rem;
 }
 
-.auth-marketing-consent-label {
-  cursor: pointer;
-}
-
-/* ===== REMEMBER ME ===== */
-
-.auth-remember {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  font-size: 0.875rem;
-  color: var(--foreground);
-  cursor: pointer;
-  user-select: none;
-}
-
-.auth-remember-checkbox {
-  flex-shrink: 0;
-}
-
-.auth-remember-label {
-  font-weight: 400;
+.auth-optin-label {
   cursor: pointer;
 }