Fix long URL wrapping in banner/alert footnotes

[amcaplan]

WHY are these changes introduced?

When a terminal does not support hyperlinks (OSC 8), the Banner/Alert footnote system falls back to rendering the raw URL in a plain Ink <Text>. Ink hard-wraps that text to the terminal width, inserting real newline characters in the middle of the URL. This makes long links impossible to copy-paste and breaks clickability.

Example before:

[1] https://shopify.com/some/lon
g/url/maybe-with-a-query?string=
avalue

After:

[1] https://shopify.com/some/long/url/maybe-with-a-query?string=avalue

What is this PR doing?

Renders each footnote line inside a Box whose width equals the line length ([id] url). Ink then emits the full line on a single row instead of hard-wrapping it; the terminal soft-wraps the overflow at display time without mutating the underlying text, so the URL stays a single contiguous, copy-pasteable string.

• packages/cli-kit/src/private/node/ui/components/Banner.tsx — size each footnote line's Box to its content length.
• packages/cli-kit/src/private/node/ui/components/Alert.test.tsx — strengthen the existing footnote regression test to assert the URL appears as a single contiguous [1] <url> line (it previously tolerated the wrapped version).

The hyperlink-supported path (ansiEscapes.link) is unchanged.

How to test your changes?

In a terminal without hyperlink support, run a command that emits a long URL footnote (e.g. store info). The footnote URL should appear on one logical line, soft-wrapped by the terminal, and be copy-pasteable as a single string.

Automated: Alert.test.tsx + Banner.test.tsx (9 tests passing). lint + type-check clean.

[Copilot]

Pull request overview

This PR fixes long URL footnotes in Ink-rendered Banner/Alert output when OSC 8 hyperlinks aren’t supported, preventing Ink from inserting hard newlines inside URLs so they remain a single contiguous, copy-pasteable string.

Changes:

• Render each footnote line inside a Box sized to the line’s full length to prevent Ink hard-wrapping URLs.
• Strengthen the Alert regression test to assert the footnote appears as a single contiguous [1] <url> line.
• Add a changeset documenting the user-visible fix in @shopify/cli-kit.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
packages/cli-kit/src/private/node/ui/components/Banner.tsx	Wraps each footnote line in a content-sized Box to avoid Ink hard-wrapping long URLs.
packages/cli-kit/src/private/node/ui/components/Alert.test.tsx	Updates the regression assertion to require a single contiguous footnote line containing [1] ${longUrl}.
.changeset/fix-footnote-long-url-wrapping.md	Adds a patch changeset describing the user-facing improvement.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

Differences in type declarations

We detected differences in the type declarations generated by Typescript for this branch compared to the baseline ('main' branch). Please, review them to ensure they are backward-compatible. Here are some important things to keep in mind:

• Some seemingly private modules might be re-exported through public modules.
• If the branch is behind main you might see odd diffs, rebase main into this branch.

New type declarations

We found no new type declarations in this PR

Existing type declarations

packages/cli-kit/dist/public/node/ui.d.ts

@@ -81,10 +81,7 @@ To see a list of supported npm commands, run:
  * │                                                          │
  * ╰──────────────────────────────────────────────────────────╯
  * [1] https://shopify.dev
- * [2] https://www.google.com/search?q=jh56t9l34kpo35tw8s28hn7s
- * 9s2xvzla01d8cn6j7yq&rlz=1C1GCEU_enUS832US832&oq=jh56t9l34kpo
- * 35tw8s28hn7s9s2xvzla01d8cn6j7yq&aqs=chrome.0.35i39l2j0l4j46j
- * 69i60.2711j0j7&sourceid=chrome&ie=UTF-8
+ * [2] https://www.google.com/search?q=jh56t9l34kpo35tw8s28hn7s9s2xvzla01d8cn6j7yq&rlz=1C1GCEU_enUS832US832&oq=jh56t9l34kpo35tw8s28hn7s9s2xvzla01d8cn6j7yq&aqs=chrome.0.35i39l2j0l4j46j69i60.2711j0j7&sourceid=chrome&ie=UTF-8
  * [3] https://shopify.com
  *
  */
@@ -112,8 +109,7 @@ export declare function renderInfo(options: RenderAlertOptions): string | undefi
  * │    • See your deployment and set it live [1]             │
  * │                                                          │
  * ╰──────────────────────────────────────────────────────────╯
- * [1] https://partners.shopify.com/1797046/apps/4523695/deploy
- * ments
+ * [1] https://partners.shopify.com/1797046/apps/4523695/deployments
  *
  */
 export declare function renderSuccess(options: RenderAlertOptions): string | undefined;

[alfonso-noriega]

LGTM, nice catch