diff --git a/apps/native/src/components/widget/onboarding/__snapshots__/onboarding-flow.stories.tsx.snap b/apps/native/src/components/widget/onboarding/__snapshots__/onboarding-flow.stories.tsx.snap index bd8f79c59..25e39a441 100644 --- a/apps/native/src/components/widget/onboarding/__snapshots__/onboarding-flow.stories.tsx.snap +++ b/apps/native/src/components/widget/onboarding/__snapshots__/onboarding-flow.stories.tsx.snap @@ -8,8 +8,8 @@ exports[`First Build 1`] = `"
nixmac

Step 6 of 7

AI Inference

nixmac turns plain-language requests into nix changes. Choose how those requests are processed — use our hosted models, or bring your own API key.

Sign in to nixmac

We'll email you a one-time code to sign in or create your nixmac account.

Encrypted in transit. We never see your nix configuration contents.

Not sure yet? You can finish this while your first build runs.

"`; -exports[`Nix Setup 1`] = `"
nixmac

Step 2 of 7

System Setup

nixmac needs the Nix package manager before it can manage this Mac. Installation happens in your terminal — pick one of the installers below, then re-check. nix-darwin is optional: if it isn't already installed, the first build fetches it via nix run.

System check

  • Nix package manager

    Not found — install it below

  • nix-darwin (darwin-rebuild)

    Optional — fetched via nix run during your first build

1Determinate Systems installerRecommended for most Macs: a polished installer with a clear uninstall path2Official NixOS installerThe upstream Nix project path, following terminal setup steps

Prefer to install yourself? That's fine too. Otherwise, hit “Check again” and nixmac will continue as soon as Nix is detected.

"`; +exports[`Nix Setup 1`] = `"
nixmac

Step 2 of 7

System Setup

nixmac needs the Nix package manager before it can manage this Mac. Installation happens in your terminal — pick one of the installers below, then re-check. nix-darwin is optional: if it isn't already installed, the first build fetches it via nix run.

System check

  • Nix package manager

    Not found — install it below

  • nix-darwin (darwin-rebuild)

    Optional — fetched via nix run during your first build

1Determinate Systems installerRecommended for most Macs: a polished installer with a clear uninstall path2Official NixOS installerThe upstream Nix project path, following terminal setup steps

Prefer to install yourself? That's fine too. Otherwise, hit “Check again” and nixmac will continue as soon as Nix is detected.

"`; -exports[`Permissions 1`] = `"
nixmac

Step 2 of 7

System Setup

nixmac needs the Nix package manager before it can manage this Mac. Installation happens in your terminal — pick one of the installers below, then re-check. nix-darwin is optional: if it isn't already installed, the first build fetches it via nix run.

System check

  • Nix package manager

    Not found — install it below

  • nix-darwin (darwin-rebuild)

    Optional — fetched via nix run during your first build

1Determinate Systems installerRecommended for most Macs: a polished installer with a clear uninstall path2Official NixOS installerThe upstream Nix project path, following terminal setup steps

Prefer to install yourself? That's fine too. Otherwise, hit “Check again” and nixmac will continue as soon as Nix is detected.

"`; +exports[`Permissions 1`] = `"
nixmac

Step 2 of 7

System Setup

nixmac needs the Nix package manager before it can manage this Mac. Installation happens in your terminal — pick one of the installers below, then re-check. nix-darwin is optional: if it isn't already installed, the first build fetches it via nix run.

System check

  • Nix package manager

    Not found — install it below

  • nix-darwin (darwin-rebuild)

    Optional — fetched via nix run during your first build

1Determinate Systems installerRecommended for most Macs: a polished installer with a clear uninstall path2Official NixOS installerThe upstream Nix project path, following terminal setup steps

Prefer to install yourself? That's fine too. Otherwise, hit “Check again” and nixmac will continue as soon as Nix is detected.

"`; -exports[`Playground 1`] = `"
nixmac

Step 2 of 7

System Setup

nixmac needs the Nix package manager before it can manage this Mac. Installation happens in your terminal — pick one of the installers below, then re-check. nix-darwin is optional: if it isn't already installed, the first build fetches it via nix run.

System check

  • Nix package manager

    Not found — install it below

  • nix-darwin (darwin-rebuild)

    Optional — fetched via nix run during your first build

1Determinate Systems installerRecommended for most Macs: a polished installer with a clear uninstall path2Official NixOS installerThe upstream Nix project path, following terminal setup steps

Prefer to install yourself? That's fine too. Otherwise, hit “Check again” and nixmac will continue as soon as Nix is detected.

"`; +exports[`Playground 1`] = `"
nixmac

Step 2 of 7

System Setup

nixmac needs the Nix package manager before it can manage this Mac. Installation happens in your terminal — pick one of the installers below, then re-check. nix-darwin is optional: if it isn't already installed, the first build fetches it via nix run.

System check

  • Nix package manager

    Not found — install it below

  • nix-darwin (darwin-rebuild)

    Optional — fetched via nix run during your first build

1Determinate Systems installerRecommended for most Macs: a polished installer with a clear uninstall path2Official NixOS installerThe upstream Nix project path, following terminal setup steps

Prefer to install yourself? That's fine too. Otherwise, hit “Check again” and nixmac will continue as soon as Nix is detected.

"`; diff --git a/apps/native/src/components/widget/onboarding/onboarding-flow.stories.tsx b/apps/native/src/components/widget/onboarding/onboarding-flow.stories.tsx index 8a519a5c1..98302dd48 100644 --- a/apps/native/src/components/widget/onboarding/onboarding-flow.stories.tsx +++ b/apps/native/src/components/widget/onboarding/onboarding-flow.stories.tsx @@ -6,6 +6,7 @@ import { tauriAPI } from "@/ipc/api"; import { onboardingActions, viewModelActions } from "@nixmac/state"; import type React from "react"; import { useEffect, useRef } from "react"; +import { expect, waitFor } from "storybook/test"; /** * Interactive, fully-mocked onboarding stories. Each story is a clickable @@ -558,6 +559,16 @@ export const Permissions = meta.story({ export const NixSetup = meta.story({ render: () => , + // The installer cards used to sit in an auto-sized grid track, which grew to + // the max-content width of their nowrap subtitles and pushed them past the + // step column. Guard the step against horizontal overflow at 800px. + play: async ({ canvasElement }) => { + const step = canvasElement.querySelector("[data-testid='onboarding-flow']"); + await waitFor(() => expect(step?.textContent).toContain("Determinate Systems installer")); + const scroller = step?.querySelector(".overflow-y-auto"); + expect(scroller).toBeTruthy(); + expect(scroller.scrollWidth).toBeLessThanOrEqual(scroller.clientWidth + 1); + }, }); export const ConfigDirectory = meta.story({ diff --git a/apps/native/src/components/widget/onboarding/steps/nix-setup-step.tsx b/apps/native/src/components/widget/onboarding/steps/nix-setup-step.tsx index 63cfc2bf7..bdc07ff0f 100644 --- a/apps/native/src/components/widget/onboarding/steps/nix-setup-step.tsx +++ b/apps/native/src/components/widget/onboarding/steps/nix-setup-step.tsx @@ -145,7 +145,10 @@ export function NixSetupStep() { -
+ {/* Column stack, not a grid: an auto-sized grid track grows to its + items' max-content width, which pushed the installer cards past the + step column in a narrow window. */} +
{NIX_INSTALLERS.map((installer, i) => ( {step} @@ -202,11 +205,13 @@ function InstallLink({ {title} - {subtitle} + + {subtitle} + );