@visns-studio/visns-components 6.24.4 → 6.26.0

package/src/components/auth/ClientAuthFrame.jsx

@@ -17,6 +17,11 @@ import AuthBrandPanel from './AuthBrandPanel';
  *             the other. A SECTION rather than a screen, sized by its parent —
  *             the consumer keeps its own header and footer and hands this the
  *             space between, which is why there is no `100vh` in its styles.
+ *
+ * A parent that has no height of its own to give — a bare router route element,
+ * say — therefore collapses the split to the height of the form. Wrap the step
+ * in `ClientAuthScreen` when it owns the page; that is what GenericAuth's
+ * client auth routes do.
  */
 const ClientAuthFrame = ({
     layout = 'card',

package/src/components/auth/ClientAuthScreen.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import styles from '../styles/ClientAuth.module.scss';
+
+/**
+ * A client sign-in step given the whole viewport.
+ *
+ * ClientAuthFrame's `split` layout is a SECTION: it fills its parent and states
+ * no viewport height of its own, which is exactly what lets a consumer keep its
+ * own header and footer and hand the sign-in the space between. Mounted as a
+ * router route element there is no such parent — the route renders straight
+ * into the app's mount node, an auto-height block — so `height: 100%` resolved
+ * to the height of the form and the screen collapsed into a band at the top of
+ * the page.
+ *
+ * The staff screens never had the problem because their shell is
+ * `position: fixed; inset: 0`. This is the same promise made in flow layout, so
+ * a tall step two scrolls the page rather than being clipped by an overlay.
+ *
+ * Wrap a client auth step in this whenever it OWNS the page — which is what
+ * GenericAuth's `/{base}/login` and `/{base}/verify` routes do. Leave it off
+ * when embedding one inside chrome of your own; that is the case the section
+ * was written for.
+ */
+const ClientAuthScreen = ({ children }) => (
+    <div className={styles.screen}>{children}</div>
+);
+
+export default ClientAuthScreen;