@dloizides/auth-web 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 1.5.1 (2026-06-30)
+
+Patch release. Pure styling fix — no API changes.
+
+### Fixed
+
+- **Submit button label no longer overflows in `<ForgotPasswordFields>`.** The
+  shared `primaryButton` style (used by the forgot-password submit button as
+  well as `<LoginForm>` / `<OtpForm>` / `<PinForm>`) carried `paddingVertical`
+  but no `paddingHorizontal`. In the forgot-password modal's `flex-end` action
+  row the submit button sizes to its content, so with zero horizontal padding a
+  longer label like "Send reset link" ran to the button's rounded edges and
+  visually spilled past them. Added `paddingHorizontal: spacing.md` and
+  `flexShrink: 0` to the shared `primaryButton` and `secondaryButton` so the
+  button always sizes to fit its label, and let the modal action row wrap
+  (`flexWrap: 'wrap'`) as a safety net on very narrow modals. Colours, radii and
+  typography still come from the consumer `AuthTheme` — unchanged.
+
 ## 1.3.0 (2026-05-31)
 
 Additive release for the auth-UX reuse roll-out (feature-reuse-roadmap #1).

package/dist/index.js

@@ -305,6 +305,11 @@ function useAuthStyles(theme) {
       primaryButton: {
         borderRadius: radii.input,
         paddingVertical: BUTTON_VERTICAL_PADDING,
+        paddingHorizontal: spacing.md,
+        // Never shrink below the label width: in a row of actions (e.g. the
+        // forgot-password modal's Cancel + submit), shrinking would clip a long
+        // label like "Send reset link" past the button's rounded edge.
+        flexShrink: 0,
         alignItems: "center",
         justifyContent: "center",
         marginTop: spacing.xs,
@@ -347,6 +352,8 @@ function useAuthStyles(theme) {
         borderWidth: 1,
         borderColor: colors.primary,
         paddingVertical: BUTTON_VERTICAL_PADDING,
+        paddingHorizontal: spacing.md,
+        flexShrink: 0,
         alignItems: "center",
         justifyContent: "center",
         marginTop: spacing.sm,
@@ -823,6 +830,9 @@ function useModalStyles(theme) {
         flexDirection: "row",
         justifyContent: "flex-end",
         alignItems: "center",
+        // Wrap (rather than clip) when a long submit label + Cancel can't
+        // fit a narrow modal on one line.
+        flexWrap: "wrap",
         marginTop: theme.spacing.md,
         gap: theme.spacing.sm
       },
@@ -830,6 +840,8 @@ function useModalStyles(theme) {
         borderRadius: theme.radii.input,
         paddingVertical: theme.spacing.sm,
         paddingHorizontal: theme.spacing.md,
+        // Match the submit button: never shrink below the label width.
+        flexShrink: 0,
         borderWidth: SECONDARY_BORDER_WIDTH,
         borderColor: theme.colors.border
       },