@smileid/usesmileid 12.0.0 → 12.0.2

package/src/presentation/components/__tests__/use_smile_id_content_card.test.tsx

@@ -0,0 +1,112 @@
+import { describe, it, expect } from "vitest";
+import * as React from "react";
+import { create as createRenderer, act } from "react-test-renderer";
+import { Text, View } from "react-native";
+import { UseSmileIDContentCard } from "../use_smile_id_content_card";
+import { UseSmileIDThemeProvider } from "../../theme/theme_context";
+import { defaultDarkTheme, defaultLightTheme } from "../../theme/theme";
+
+function render(element: React.ReactElement) {
+  let tree!: ReturnType<typeof createRenderer>;
+  act(() => {
+    tree = createRenderer(element);
+  });
+  return tree;
+}
+
+/** Flatten the style array the card composes so a single key can be read. */
+function surfaceStyle(
+  tree: ReturnType<typeof createRenderer>,
+): Record<string, unknown> {
+  const surface = tree.root.findAllByType(View)[0];
+  if (!surface) throw new Error("card surface did not render");
+  const style = surface.props.style as unknown;
+  const parts = Array.isArray(style) ? style : [style];
+  return Object.assign(
+    {},
+    ...parts.filter((part): part is Record<string, unknown> => Boolean(part)),
+  ) as Record<string, unknown>;
+}
+
+describe("UseSmileIDContentCard", () => {
+  it("renders its children inside the card surface", () => {
+    const tree = render(
+      <UseSmileIDContentCard theme={defaultLightTheme}>
+        <Text testID="si_child">Body</Text>
+      </UseSmileIDContentCard>,
+    );
+
+    expect(tree.root.findAllByProps({ testID: "si_child" })).not.toHaveLength(
+      0,
+    );
+  });
+
+  it("uses the card surface colour and radius by default", () => {
+    const tree = render(
+      <UseSmileIDContentCard theme={defaultLightTheme}>
+        <Text>Body</Text>
+      </UseSmileIDContentCard>,
+    );
+
+    const style = surfaceStyle(tree);
+    expect(style.backgroundColor).toBe(defaultLightTheme.colors.cardBackground);
+    expect(style.borderRadius).toBe(defaultLightTheme.shapes.cardRadius);
+    expect(style.padding).toBe(defaultLightTheme.spacing.medium);
+  });
+
+  it("switches to the instruction tint for the instruction variant", () => {
+    const tree = render(
+      <UseSmileIDContentCard variant="instruction" theme={defaultLightTheme}>
+        <Text>Body</Text>
+      </UseSmileIDContentCard>,
+    );
+
+    expect(surfaceStyle(tree).backgroundColor).toBe(
+      defaultLightTheme.colors.instructionCardBackground,
+    );
+  });
+
+  it("falls back to the theme from context when no theme prop is given", () => {
+    const tree = render(
+      <UseSmileIDThemeProvider value={defaultDarkTheme}>
+        <UseSmileIDContentCard>
+          <Text>Body</Text>
+        </UseSmileIDContentCard>
+      </UseSmileIDThemeProvider>,
+    );
+
+    expect(surfaceStyle(tree).backgroundColor).toBe(
+      defaultDarkTheme.colors.cardBackground,
+    );
+  });
+
+  it("lets a caller-supplied style override the computed card style", () => {
+    const tree = render(
+      <UseSmileIDContentCard
+        theme={defaultLightTheme}
+        style={{ backgroundColor: "#123456", borderRadius: 99 }}
+      >
+        <Text>Body</Text>
+      </UseSmileIDContentCard>,
+    );
+
+    const style = surfaceStyle(tree);
+    expect(style.backgroundColor).toBe("#123456");
+    expect(style.borderRadius).toBe(99);
+  });
+
+  it("carries exactly one platform shadow treatment, never both", () => {
+    const tree = render(
+      <UseSmileIDContentCard theme={defaultLightTheme}>
+        <Text>Body</Text>
+      </UseSmileIDContentCard>,
+    );
+
+    const style = surfaceStyle(tree);
+    // Setting `elevation` and the iOS shadow* keys together double-draws the
+    // shadow on Android, so exactly one family must be present.
+    const hasAndroidShadow = "elevation" in style;
+    const hasIosShadow = "shadowOpacity" in style;
+    expect(hasAndroidShadow !== hasIosShadow).toBe(true);
+  });
+});

package/src/presentation/components/__tests__/use_smile_id_enhanced_smart_selfie_clip.test.tsx

@@ -8,8 +8,9 @@ import {
 import { AccessibilityInfo } from "react-native";
 import {
   UseSmileIDEnhancedSmartSelfieClip,
-  ENHANCED_SMART_SELFIE_ANIMATION_SIZE,
+  ENHANCED_SMART_SELFIE_ARROW_FIT,
 } from "../use_smile_id_enhanced_smart_selfie_clip";
+import { FaceOvalDefaults } from "../face_oval_defaults";
 import {
   ENHANCED_SMART_SELFIE_ANIMATION_SPEED,
   ENHANCED_SMART_SELFIE_TOTAL_FRAMES,
@@ -195,7 +196,7 @@ describe("UseSmileIDEnhancedSmartSelfieClip", () => {
   });
 
   describe("positioning", () => {
-    it("produces a container sized to ENHANCED_SMART_SELFIE_ANIMATION_SIZE", async () => {
+    it("sizes the container to the oval width times the arrow-fit factor", async () => {
       const tree = renderClip({ pingPong: false });
       await act(async () => {
         await Promise.resolve();
@@ -209,8 +210,12 @@ describe("UseSmileIDEnhancedSmartSelfieClip", () => {
       );
       expect(container).toBeDefined();
       const style = container!.props.style as { width: number; height: number };
-      expect(style.width).toBe(ENHANCED_SMART_SELFIE_ANIMATION_SIZE);
-      expect(style.height).toBe(ENHANCED_SMART_SELFIE_ANIMATION_SIZE);
+      const expectedSize =
+        BASE_CONTAINER_WIDTH *
+        FaceOvalDefaults.ovalWidthRatio *
+        ENHANCED_SMART_SELFIE_ARROW_FIT;
+      expect(style.width).toBe(expectedSize);
+      expect(style.height).toBe(expectedSize);
     });
   });
 

package/src/presentation/components/__tests__/use_smile_id_face_oval_image.test.tsx

@@ -0,0 +1,190 @@
+import { describe, it, expect, vi } from "vitest";
+import * as React from "react";
+import {
+  create as createRenderer,
+  act,
+  type ReactTestInstance,
+} from "react-test-renderer";
+
+// The shared setup's `react-native-svg` stub omits `Image`, which this
+// component needs. Re-stub locally (same host-forwarding shape) so the SVG
+// tree is inspectable without touching the workspace-wide setup.
+vi.mock("react-native-svg", async () => {
+  const React = await import("react");
+  function SvgHost(props: Record<string, unknown>) {
+    const { children, ...rest } = props as {
+      children?: React.ReactNode;
+    } & Record<string, unknown>;
+    return React.createElement("Svg", rest, children);
+  }
+  return {
+    __esModule: true,
+    default: SvgHost,
+    Svg: SvgHost,
+    Defs: SvgHost,
+    ClipPath: SvgHost,
+    Ellipse: SvgHost,
+    Image: SvgHost,
+  };
+});
+
+import { UseSmileIDFaceOvalImage } from "../use_smile_id_face_oval_image";
+import { computeFaceOvalGeometry } from "../face_oval_defaults";
+
+function render(element: React.ReactElement) {
+  let tree!: ReturnType<typeof createRenderer>;
+  act(() => {
+    tree = createRenderer(element);
+  });
+  return tree;
+}
+
+/** The host (string-typed) instance carrying `testID`, not the composite. */
+function host(
+  tree: ReturnType<typeof createRenderer>,
+  testID: string,
+): ReactTestInstance {
+  const match = tree.root
+    .findAllByProps({ testID })
+    .find((instance) => typeof instance.type === "string");
+  if (!match) throw new Error(`no host element with testID ${testID}`);
+  return match;
+}
+
+function flatStyle(instance: ReactTestInstance): Record<string, unknown> {
+  const style = instance.props.style as unknown;
+  const parts = Array.isArray(style) ? style : [style];
+  return Object.assign(
+    {},
+    ...parts.filter((part): part is Record<string, unknown> => Boolean(part)),
+  ) as Record<string, unknown>;
+}
+
+const URI = "file:///selfie.jpg";
+
+describe("UseSmileIDFaceOvalImage", () => {
+  it("renders nothing until the canvas has measured", () => {
+    const tree = render(
+      <UseSmileIDFaceOvalImage
+        uri={URI}
+        containerWidth={0}
+        containerHeight={0}
+      />,
+    );
+
+    expect(tree.toJSON()).toBeNull();
+  });
+
+  it("renders nothing when only one dimension has measured", () => {
+    const tree = render(
+      <UseSmileIDFaceOvalImage
+        uri={URI}
+        containerWidth={320}
+        containerHeight={0}
+      />,
+    );
+
+    expect(tree.toJSON()).toBeNull();
+  });
+
+  it("renders nothing when there is no captured file yet", () => {
+    const tree = render(
+      <UseSmileIDFaceOvalImage
+        uri=""
+        containerWidth={320}
+        containerHeight={480}
+      />,
+    );
+
+    expect(tree.toJSON()).toBeNull();
+  });
+
+  it("positions the oval at the canonical face-oval rect", () => {
+    const geometry = computeFaceOvalGeometry(320, 480);
+    const tree = render(
+      <UseSmileIDFaceOvalImage
+        uri={URI}
+        containerWidth={320}
+        containerHeight={480}
+        testID="si_face_oval_image"
+      />,
+    );
+
+    const style = flatStyle(host(tree, "si_face_oval_image"));
+    expect(style.width).toBeCloseTo(geometry.ovalWidth, 5);
+    expect(style.height).toBeCloseTo(geometry.ovalHeight, 5);
+    expect(style.left).toBeCloseTo(geometry.ovalLeft, 5);
+    expect(style.top).toBeCloseTo(geometry.ovalTop, 5);
+    expect(style.position).toBe("absolute");
+  });
+
+  it("draws the captured file clipped to the ellipse", () => {
+    const geometry = computeFaceOvalGeometry(320, 480);
+    const tree = render(
+      <UseSmileIDFaceOvalImage
+        uri={URI}
+        containerWidth={320}
+        containerHeight={480}
+      />,
+    );
+
+    const json = JSON.stringify(tree.toJSON());
+    expect(json).toContain(URI);
+    // The clip id ties the <Image> to the <ClipPath><Ellipse>; a mismatch
+    // renders an unclipped rectangle over the preview.
+    expect(json).toContain("url(#si_face_oval_image_clip)");
+    expect(json).toContain(`0 0 ${geometry.ovalWidth} ${geometry.ovalHeight}`);
+  });
+
+  it("sizes the ellipse to the full oval so the crop is not inset", () => {
+    const geometry = computeFaceOvalGeometry(320, 480);
+    const tree = render(
+      <UseSmileIDFaceOvalImage
+        uri={URI}
+        containerWidth={320}
+        containerHeight={480}
+      />,
+    );
+
+    const ellipse = tree.root
+      .findAllByType("Svg" as unknown as React.ComponentType)
+      .find((instance) => instance.props.rx !== undefined);
+    expect(ellipse?.props.rx).toBeCloseTo(geometry.ovalWidth / 2, 5);
+    expect(ellipse?.props.ry).toBeCloseTo(geometry.ovalHeight / 2, 5);
+    expect(ellipse?.props.cx).toBeCloseTo(geometry.ovalWidth / 2, 5);
+    expect(ellipse?.props.cy).toBeCloseTo(geometry.ovalHeight / 2, 5);
+  });
+
+  it("rescales the oval when the canvas resizes", () => {
+    const small = flatStyle(
+      host(
+        render(
+          <UseSmileIDFaceOvalImage
+            uri={URI}
+            containerWidth={320}
+            containerHeight={480}
+            testID="si_face_oval_image"
+          />,
+        ),
+        "si_face_oval_image",
+      ),
+    );
+    const large = flatStyle(
+      host(
+        render(
+          <UseSmileIDFaceOvalImage
+            uri={URI}
+            containerWidth={640}
+            containerHeight={960}
+            testID="si_face_oval_image"
+          />,
+        ),
+        "si_face_oval_image",
+      ),
+    );
+
+    expect(large.width as number).toBeCloseTo((small.width as number) * 2, 5);
+    expect(large.height as number).toBeCloseTo((small.height as number) * 2, 5);
+    expect(large.top as number).toBeCloseTo((small.top as number) * 2, 5);
+  });
+});

package/src/presentation/components/__tests__/use_smile_id_instructions_hero.test.tsx

@@ -78,6 +78,50 @@ describe("UseSmileIDInstructionsHero", () => {
     }
   });
 
+  it("pins oval-less heroes to the software Lottie engine on iOS", () => {
+    // lottie-ios's CA engine mis-renders the doc heroes' track mattes, so
+    // oval-less heroes must pin renderMode SOFTWARE on iOS.
+    const docTree = render(
+      <UseSmileIDInstructionsHero
+        source={SELFIE_HERO_ANIMATION}
+        showOval={false}
+        showOvalProgress={false}
+      />,
+    );
+    const docHero = docTree.root.findByProps({
+      testID: "si_instructions_hero",
+    });
+    act(() => {
+      docHero.props.onLayout({
+        nativeEvent: { layout: { width: 390, height: 600 } },
+      });
+    });
+    expect(docTree.root.findByType(AnimatedLottieView).props.renderMode).toBe(
+      "SOFTWARE",
+    );
+    act(() => docTree.unmount());
+
+    const ovalTree = render(
+      <UseSmileIDInstructionsHero
+        source={SELFIE_HERO_ANIMATION}
+        showOval
+        showOvalProgress={false}
+      />,
+    );
+    const ovalHero = ovalTree.root.findByProps({
+      testID: "si_instructions_hero",
+    });
+    act(() => {
+      ovalHero.props.onLayout({
+        nativeEvent: { layout: { width: 390, height: 600 } },
+      });
+    });
+    expect(
+      ovalTree.root.findByType(AnimatedLottieView).props.renderMode,
+    ).toBeUndefined();
+    act(() => ovalTree.unmount());
+  });
+
   it("gives the document card hero explicit dimensions (no intrinsic-size flash)", () => {
     const tree = render(
       <UseSmileIDInstructionsHero

package/src/presentation/components/__tests__/use_smile_id_learn_more_content.test.tsx

@@ -0,0 +1,159 @@
+import { describe, expect, it, beforeEach, vi } from "vitest";
+import * as React from "react";
+import {
+  create as createRenderer,
+  act,
+  type ReactTestInstance,
+} from "react-test-renderer";
+import { Linking, Text } from "react-native";
+import { UseSmileIDCrashReporting } from "@smileid/usesmileid_bridge";
+
+import { UseSmileIDLearnMoreContent } from "../use_smile_id_learn_more_content";
+import { enStrings } from "../../../l10n/strings_en";
+
+/**
+ * The consent screen's expandable privacy section. Two things must
+ * hold: the `{smile_id}` / `{partner}` / `{retention}` tokens are all
+ * substituted (a leaked token ships raw template text to a user), and
+ * a device with no browser must surface through crash reporting rather
+ * than presenting as a dead tap.
+ */
+
+const SMILE_ID_PRIVACY_URL = "https://usesmileid.com/privacy-policy/";
+
+function render(element: React.ReactElement) {
+  let tree!: ReturnType<typeof createRenderer>;
+  act(() => {
+    tree = createRenderer(element);
+  });
+  return tree;
+}
+
+function collectText(node: ReactTestInstance): string {
+  return node.children
+    .map((child) =>
+      typeof child === "string"
+        ? child
+        : collectText(child as ReactTestInstance),
+    )
+    .join("");
+}
+
+/** The pressable inline links, in render order: DSAR, Smile ID, partner. */
+function links(root: ReactTestInstance): ReactTestInstance[] {
+  return root.findAll(
+    (node) => node.type === Text && typeof node.props.onPress === "function",
+    { deep: true },
+  );
+}
+
+describe("UseSmileIDLearnMoreContent", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("substitutes every token in the description template", () => {
+    const { root } = render(
+      <UseSmileIDLearnMoreContent
+        partnerName="Acme Bank"
+        testID="si_learn_more"
+      />,
+    );
+
+    const text = collectText(root.findByProps({ testID: "si_learn_more" }));
+    expect(text).toContain("Acme Bank");
+    expect(text).toContain(
+      enStrings.si_consent_learn_more_description_smile_id,
+    );
+    expect(text).toContain(
+      enStrings.si_consent_learn_more_description_retention,
+    );
+    expect(text).not.toContain("{smile_id}");
+    expect(text).not.toContain("{partner}");
+    expect(text).not.toContain("{retention}");
+  });
+
+  it("opens the Smile ID privacy policy from the DSAR and privacy links", async () => {
+    const openURL = vi.spyOn(Linking, "openURL").mockResolvedValue(undefined);
+    const { root } = render(
+      <UseSmileIDLearnMoreContent partnerName="Acme Bank" />,
+    );
+
+    await act(async () => {
+      links(root)[0]?.props.onPress();
+    });
+
+    expect(openURL).toHaveBeenCalledWith(SMILE_ID_PRIVACY_URL);
+  });
+
+  it("opens the partner's own policy when one is configured", async () => {
+    const openURL = vi.spyOn(Linking, "openURL").mockResolvedValue(undefined);
+    const { root } = render(
+      <UseSmileIDLearnMoreContent
+        partnerName="Acme Bank"
+        partnerPrivacyPolicyUrl="https://acme.test/privacy"
+      />,
+    );
+
+    const partnerLink = links(root).at(-1);
+    await act(async () => {
+      partnerLink?.props.onPress();
+    });
+
+    expect(openURL).toHaveBeenCalledWith("https://acme.test/privacy");
+  });
+
+  it("is a silent no-op when the partner supplied no policy URL", async () => {
+    const openURL = vi.spyOn(Linking, "openURL").mockResolvedValue(undefined);
+    const { root } = render(
+      <UseSmileIDLearnMoreContent partnerName="Acme Bank" />,
+    );
+
+    const partnerLink = links(root).at(-1);
+    await act(async () => {
+      partnerLink?.props.onPress();
+    });
+
+    expect(openURL).not.toHaveBeenCalled();
+  });
+
+  it("reports a failed Smile ID link open to crash reporting", async () => {
+    const failure = new Error("no browser registered");
+    vi.spyOn(Linking, "openURL").mockRejectedValue(failure);
+    const captureException = vi
+      .spyOn(UseSmileIDCrashReporting, "captureException")
+      .mockImplementation(() => {});
+    const { root } = render(
+      <UseSmileIDLearnMoreContent partnerName="Acme Bank" />,
+    );
+
+    await act(async () => {
+      links(root)[0]?.props.onPress();
+      await Promise.resolve();
+    });
+
+    expect(captureException).toHaveBeenCalledWith(failure);
+  });
+
+  it("reports a failed partner link open to crash reporting", async () => {
+    const failure = new Error("malformed partner url");
+    vi.spyOn(Linking, "openURL").mockRejectedValue(failure);
+    const captureException = vi
+      .spyOn(UseSmileIDCrashReporting, "captureException")
+      .mockImplementation(() => {});
+    const { root } = render(
+      <UseSmileIDLearnMoreContent
+        partnerName="Acme Bank"
+        partnerPrivacyPolicyUrl="not-a-url"
+      />,
+    );
+
+    const partnerLink = links(root).at(-1);
+    await act(async () => {
+      partnerLink?.props.onPress();
+      await Promise.resolve();
+    });
+
+    expect(captureException).toHaveBeenCalledWith(failure);
+  });
+});

package/src/presentation/components/__tests__/use_smile_id_processing_center_indicator.test.tsx

@@ -0,0 +1,88 @@
+import { describe, it, expect } from "vitest";
+import * as React from "react";
+import { create as createRenderer, act } from "react-test-renderer";
+import { UseSmileIDProcessingCenterIndicator } from "../use_smile_id_processing_center_indicator";
+import { UseSmileIDLoadingIndicator } from "../use_smile_id_loading_indicator";
+import { UseSmileIDStatusIndicator } from "../use_smile_id_status_indicator";
+import { computeFaceOvalGeometry } from "../face_oval_defaults";
+import { defaultLightTheme } from "../../theme/theme";
+import type { ProcessingState } from "../../state/processing_state";
+
+function render(state: ProcessingState, width = 320, height = 480) {
+  let tree!: ReturnType<typeof createRenderer>;
+  act(() => {
+    tree = createRenderer(
+      <UseSmileIDProcessingCenterIndicator
+        state={state}
+        containerWidth={width}
+        containerHeight={height}
+        theme={defaultLightTheme}
+        testID="si_center_indicator"
+      />,
+    );
+  });
+  return tree;
+}
+
+describe("UseSmileIDProcessingCenterIndicator", () => {
+  it("renders nothing until the canvas has measured", () => {
+    expect(render({ kind: "loading" }, 0, 0).toJSON()).toBeNull();
+  });
+
+  it("renders nothing when only the height has measured", () => {
+    expect(render({ kind: "loading" }, 0, 480).toJSON()).toBeNull();
+  });
+
+  it("anchors to the same rect the captured image occupies", () => {
+    const geometry = computeFaceOvalGeometry(320, 480);
+    const tree = render({ kind: "loading" });
+
+    const container = tree.root
+      .findAllByProps({ testID: "si_center_indicator" })
+      .find((instance) => typeof instance.type === "string");
+    const style = Object.assign(
+      {},
+      ...(container!.props.style as Record<string, unknown>[]),
+    ) as Record<string, unknown>;
+
+    expect(style.width).toBeCloseTo(geometry.ovalWidth, 5);
+    expect(style.height).toBeCloseTo(geometry.ovalHeight, 5);
+    expect(style.left).toBeCloseTo(geometry.ovalLeft, 5);
+    expect(style.top).toBeCloseTo(geometry.ovalTop, 5);
+    expect(style.position).toBe("absolute");
+    expect(style.alignItems).toBe("center");
+    expect(style.justifyContent).toBe("center");
+  });
+
+  it("shows the spinner while the job is in flight", () => {
+    const tree = render({ kind: "loading" });
+
+    expect(tree.root.findAllByType(UseSmileIDLoadingIndicator)).toHaveLength(1);
+    expect(tree.root.findAllByType(UseSmileIDStatusIndicator)).toHaveLength(0);
+  });
+
+  it("shows the success status when the server accepts", () => {
+    const tree = render({ kind: "success", message: "approved" });
+
+    const status = tree.root.findAllByType(UseSmileIDStatusIndicator);
+    expect(status).toHaveLength(1);
+    expect(status[0]!.props.state).toBe("success");
+    expect(tree.root.findAllByType(UseSmileIDLoadingIndicator)).toHaveLength(0);
+  });
+
+  it("shows the failure status when the job is rejected", () => {
+    const tree = render({ kind: "failed", errorMessage: "declined" });
+
+    const status = tree.root.findAllByType(UseSmileIDStatusIndicator);
+    expect(status).toHaveLength(1);
+    expect(status[0]!.props.state).toBe("failure");
+  });
+
+  it("passes the resolved theme down to the child indicator", () => {
+    const tree = render({ kind: "loading" });
+
+    expect(tree.root.findByType(UseSmileIDLoadingIndicator).props.theme).toBe(
+      defaultLightTheme,
+    );
+  });
+});

package/src/presentation/components/use_smile_id_button.tsx

@@ -65,7 +65,10 @@ export function UseSmileIDButton(props: UseSmileIDButtonProps) {
       ]}
     >
       <Text
-        numberOfLines={1}
+        // Shrink rather than truncate: a longer localized label must stay fully readable.
+        numberOfLines={2}
+        adjustsFontSizeToFit
+        minimumFontScale={0.75}
         style={{
           ...theme.typography.button,
           color: disabled
@@ -84,7 +87,9 @@ export function UseSmileIDButton(props: UseSmileIDButtonProps) {
 
 const styles = StyleSheet.create({
   base: {
-    height: 48,
+    // `minHeight`, not `height`: the pill grows only for a label that has to wrap.
+    minHeight: 48,
+    paddingVertical: 8,
     paddingHorizontal: 24,
     alignItems: "center",
     justifyContent: "center",

package/src/presentation/components/use_smile_id_enhanced_smart_selfie_clip.tsx

@@ -13,8 +13,11 @@ import {
 export const ESS_ALL_DIRECTIONS_ANIMATION =
   require("../assets/si_ess_animation_all_directions.json") as AnimationObject;
 
-/** Square box the Enhanced Smart Selfie cues render in, centred on the oval. */
-export const ENHANCED_SMART_SELFIE_ANIMATION_SIZE = 383;
+/**
+ * Box width as a multiple of the oval width; the baked arrow tips touch the
+ * oval boundary at ≈1.19× — keep this factor below that.
+ */
+export const ENHANCED_SMART_SELFIE_ARROW_FIT = 1.15;
 /** Nudge so the composition's face lands on the oval centre. */
 export const VERTICAL_ALIGNMENT_OFFSET = -15;
 
@@ -46,7 +49,10 @@ export function UseSmileIDEnhancedSmartSelfieClip(
     return null;
   }
 
-  const size = ENHANCED_SMART_SELFIE_ANIMATION_SIZE;
+  const size =
+    containerWidth *
+    FaceOvalDefaults.ovalWidthRatio *
+    ENHANCED_SMART_SELFIE_ARROW_FIT;
   const ovalCenterY = containerHeight * FaceOvalDefaults.ovalCenterYRatio;
 
   const containerStyle = {