From 80df686dcea8400928f80eb6fd5c421fe65bceaf Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <dev@valentinpalkovic.dev>
Date: Tue, 29 Sep 2026 12:16:20 +0200
Subject: [PATCH] Manager: Capitalize GitHub and open the contributors link in
 a new tab in the mobile About page

The mobile About page labeled its GitHub link "Github", and the Storybook
Community link was the only external link without target="_blank".
---
 .../components/mobile/about/MobileAbout.stories.tsx  | 12 ++++++++++--
 .../manager/components/mobile/about/MobileAbout.tsx  |  3 ++-
 .../mobile/navigation/MobileNavigation.stories.tsx   |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx b/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx
index 8ff5c836c89c..28a1cab2d36e 100644
--- a/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx
+++ b/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ManagerContext } from 'storybook/manager-api';
-import { within } from 'storybook/test';
+import { expect, waitFor, within } from 'storybook/test';
 
 import { LayoutProvider, useLayout } from '../../layout/LayoutProvider.tsx';
 import { MobileAbout } from './MobileAbout.tsx';
@@ -55,7 +55,15 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() => expect(canvas.getByRole('link', { name: 'GitHub' })).toBeVisible());
+    await expect(canvas.getByRole('link', { name: 'Documentation' })).toBeVisible();
+    await expect(canvas.getByRole('link', { name: 'Chromatic' })).toBeVisible();
+    await expect(canvas.getByRole('link', { name: 'Storybook Community' })).toBeVisible();
+  },
+};
 export const Dark: Story = {
   globals: { sb_theme: 'dark' },
 };
diff --git a/code/core/src/manager/components/mobile/about/MobileAbout.tsx b/code/core/src/manager/components/mobile/about/MobileAbout.tsx
index 271b12286324..a614913d7975 100644
--- a/code/core/src/manager/components/mobile/about/MobileAbout.tsx
+++ b/code/core/src/manager/components/mobile/about/MobileAbout.tsx
@@ -65,7 +65,7 @@ export const MobileAbout: FC = () => {
                     <GithubIcon />
                   </ActionList.Icon>
                   <ActionList.Text>
-                    <span>Github</span>
+                    <span>GitHub</span>
                   </ActionList.Text>
                   <ActionList.Icon>
                     <ShareAltIcon />
@@ -100,6 +100,7 @@ export const MobileAbout: FC = () => {
               and the{' '}
               <Link
                 href="https://github.com/storybookjs/storybook/graphs/contributors"
+                target="_blank"
                 rel="noopener noreferrer"
               >
                 Storybook Community
diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
index 2533dc2db118..b879dc6440bb 100644
--- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
+++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
@@ -298,7 +298,7 @@ export const AboutFocusTrapped: Story = {
     await waitFor(() => expect(backButton).toHaveFocus());
 
     await userEvent.tab();
-    await expect(screen.getByRole('link', { name: 'Github' })).toHaveFocus();
+    await expect(screen.getByRole('link', { name: 'GitHub' })).toHaveFocus();
     await userEvent.tab();
     await expect(screen.getByRole('link', { name: 'Documentation' })).toHaveFocus();
     // The package manager tabs are a single stop with a roving tabindex.